Typescript學習筆記（一）基礎類型

為了面向ng2和前端未來，開始搞向ts，ts是微軟出的一枚語言，作為es6的超集，他出的一些特性還是蠻好用的(略坑)。對於我等純前端(從開始就接觸javascript)的人來說，真想說，這特么什么鬼。部分特性同es6（個人對es6還是蠻有好感的）。ts同期的coffeescript，將js python化，ts也把js搞的向其他語言靠攏。。

中文學習，這里是英文學習。如果不想看這些東西，那看我筆記學吧。哈哈。

ts的基礎類型，布爾值，數字，字符串，數組，元組（Tuple），枚舉，任意值，空值。后面幾個你不知道的就是新加的類型。看他們怎么定義。

ts定義有Interface，熟悉其他語言可能知道，這為類型的安全。布爾值定義為

let isDone: boolean = false;

數字為，需要注意的是它還支持了es6的2進制和8進制。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

字符串，

let name: string = "bob";
name = "smith";

還支持es6的模版定義的形式（不懂es6的看阮一峰的es6入門）

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`;

數組可以

let list: number[] = [1, 2, 3];

也可以

let list: Array<number> = [1, 2, 3];

兩種方式。

其實看一下前面這些js原有的類型，定義的時候只是多了一個：類型，如果變量賦值的時候類型不對，編譯器就會報錯。類型安全orz。（寫慣js的我看着不習慣）。編譯后的js里面還是原來的類型定義。

 

下面看新類型

元組：

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

 

 這個元組就是約定類型的已知數量的數組。x[0]是string類型，x[1]是number類型，只要不是編譯器就報錯。

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

 

這里用x[1]是數字類型，沒有substr，就報錯了。

x[3] = 'world'; // OK, 字符串可以賦值給(string | number)類型

console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString

x[6] = true; // Error, 布爾不是(string | number)類型

 

當越界訪問的時候，這個東西可以是string | number，別的都報錯。如上。

枚舉

enum類型是對JavaScript標准數據類型的一個補充。

enum Color {Red, Green, Blue};
let c: Color = Color.Green;

 

先看一下編譯器編譯的js的Color是什么

這里定義的c是Color類型，賦值為Color.Green，看上面的圖，就知道是1。當你取Color[1]的時候也就是Green。

enum Color {Red = 1, Green, Blue};
let c: Color = Color.Green;

enum Color {Red = 1, Green = 2, Blue = 4};
let c: Color = Color.Green;

 

這樣都可以。那么對應的序號也會相應的改變。

任意值(any)

當你不知道一個變量是啥類型，這個類型檢測就沒必要了吧。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

 

那定義這個any就會跳過編譯器的檢測。

你可能認為Object有相似的作用，就像它在其它語言中那樣。 但是Object類型的變量只是允許你給它賦任意值 -- 但是卻不能夠在它上面調用任意的方法，即便它真的有這些方法：

let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

 

定義數組，數組里面類型不同的時候也該用any

let list: any[] = [1, true, "free"];

list[1] = 100;

空值

它表示沒有任何類型，就像其他語言里的void，來表示這個函數不返回值。

function warnUser(): void {
    alert("This is my warning message");
}

 

聲明一個void類型的變量沒有什么大用，因為你只能為它賦予undefined和null：

let unusable: void = undefined;

 

類型斷言

 類型斷言好比其它語言里的類型轉換，但是不進行特殊的數據檢查和解構。 它沒有運行時的影響，只是在編譯階段起作用

一種是

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

 

還有一種寫法是

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

 

兩種形式是等價的。當然在jsx里面用第一種就不行了。