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裡面用第一種就不行了。