TypeScript和JavaScript的一些小技巧記錄

項目里使用到的技巧，記錄一下，會持續更新。

JS的技巧完全可以使用到TS上哦。

JS

向下取整

Math.floor(4.5); // 4

簡寫：

var num = 4.5;
~~num;
num << 0;
num >> 0;
num >>> 0;

四種寫法都會返回向下取整后的值，即4。

但是要注意，簡寫的方式用在負數上會得到錯誤的結果：

Math.floor(-4.1); // -5
~~-4.1; // -4
-4.1 << 0; // -4
-4.1 >> 0; // -4
-4.1 >>> 0; // 4294967292

或者說在負數上變成了向上取整，另外由於 >>> 是無符號的位移操作，所以會得到一個巨大的正數。另外一點：沒有 <<< 這個操作符哦。

字符串轉數字

parseInt("4.5"); // 4
parseFloat("4.5"); // 4.5
parseInt({a:1}); // NaN

簡寫：

var num = "4.5";
+num; // 4.5

num = {a:1};
+num; // NaN

轉Boolean值

Boolean(5.99); // true
Boolean(0); // false
Boolean(1); // true
Boolean(null); // false
Boolean(undefined); // false
Boolean(""); // false
Boolean("1"); // true
Boolean({}); // true

簡寫：

!!5.99; // true
!!0; // false
!!1; // true
!!null; // false
!!undefined; // false
!!""; // false
!!"1"; // true
!!{}; // true

void 0

如果編寫的代碼會直接發布，盡可能用 void 0 代替 null 和 undefined，因為在某些瀏覽器中，undefined可以被賦值導致判斷全部錯誤。

比如在TS中，編譯后，使用到的undefined都會替換為 void 0。

TS

多使用接口方式

比如傳遞參數時，這么寫：

func(a: Point);

只能接受Point類型的變量，如果用下面的寫法：

func(a: {x:number, y:number});

就可以接受帶有x和y的所有變量，可以更好的復用該函數。

快速得到屬性

一般的寫法：

let x = point.x;
let y = point.y;

簡寫：

let {x, y} = point;

一般的寫法：

let arr = "100;200;300".split(';');
let a = arr[0];
let b = arr[1];
let c = arr[2];

簡寫：

let [a, b, c] = "100;200;300".split(';');

快速寫入屬性

一般的寫法：

let a = 0;
let b = "heelo";
let obj = {a: a, b: b};

簡寫：

let a = 0;
let b = "heelo";
let obj = {a, b};

參數類類型控制

比如我們需要傳遞一個參數，該參數是MyClass類的類型，而不是實例時，一般只能用any，實際上是可以指定類型的，寫法如下：

public func(classType: { new(): MyClass }): void;

傳入類型，得到該類型的實例

一般用於工廠或對象池等：

export function getInstance<T>(Class: {new () : T}): T {
  return new Class();
}

單例的簡寫方式

static get instance(): Obj {
  return this._instance || (this._instance = new Obj());
}

類屬性控制

interface IObj {
  // 可選屬性
  name?: string;
  // 只讀屬性
  readonly age: number;
}

控制動態屬性：

interface Map<T> {
  [key: string]: T;
}

用接口來規范一個對象

比如我們有一個接口，可以用下面的方法來規范一個對象，而不用編寫一個實現該接口的類：

export interface IPoint {
  x: number;
  y: number;
}

export function foo(point: IPoint) {
  // ...
}

foo(<IPoint> {x: 100, y: 100});

如果打錯屬性名稱或缺少必須的屬性會報錯，屬性類型不匹配也會報錯，可以大大降低寫錯的問題。另外添加額外屬性是允許的。