Typescript語法簡單匯總

1、Typescript原始數據類型：

string

number

boolean

null

undefined

enum

symbol

空值一般采用void表示，void可以表示變量，也可以表示函數返回值。

2、Typescript中的任意值：

任意值（any）用來表示允許賦值為任意類型。

申明一個變量為任意值后，對它的任何操作，返回的內容的類型都是任意值。

變量如果在申明的時候如果未指定其類型，那么它會被識別為任意值類型。

let a; // a是任意類型 a = 5; a = 'a'; console.log(a);

3、Typescript的類型推論：

Typescript會依照類型推論的規則推斷出一個類型。

let b = 1; // b是number類型 b = 2; console.log(b);

如果定義的時候沒有賦值，不管之后有沒有被賦值，都會被推斷出any類型而完全不被類型檢查。

4、Typescript聯合類型：

聯合類型表示取值可以為多種類型中的一種。

只能訪問此聯合類型內的所有類型里共有的屬性和方法。

const a: string | number = 1; console.log(a.length); // 報錯：Property 'length' does not exist on type 'number' console.log(a.toString());

5、Typescript中對象類型-接口：

可描述類的一部分抽象行為，也可描述對象的結構形狀。

接口一般首字母大些，有的編程語言建議接口的名稱前加上“I”前綴。

賦值的時候變量的形狀必須跟接口的形狀保持一致。

接口中可定義可選屬性，只讀屬性，任意屬性。

interface Istate1 {
    name: string; age: number; } const obj1: Istate1 = { name: "Tom", age: 10 } // 可選屬性 interface Istate2 { name: string; age?: number; } const obj2: Istate2 = { name: "張三", age: 18 } const obj3: Istate2 = { name: "李四" } // 屬性個數不確定的時候， any必須是任意類型 interface Istate3 { name: string|number; age?: number; [propName: string]: any; } const obj33: Istate3 = { name: 'Jay', age: 20, sex: "men", isMary: false }

// 只讀屬性 interface Istate4{ name: string; readonly age: number; } const obj4: Istate4 = { name: "Jack", age: 55 } obj4.age = 56; // Cannot assign to 'age' because it is a read-only property.

6、Typescript數組類型：

1) 可采用"類型[]"法表示；

2) 可采用數組泛型“Array<類型>”表示法；

3) 可采用接口表示法。

// “類型[]”表示法 const arr1: number[] = [1, 2, 3, 4, 5]; const arr2: string[] = ["1", "2", "3"]; const arr3: any[] = [1, '2', true];

// "Array<類型>"表示法 const arr4: Array<number> = [1, 2, 3]; const arr5: Array<string> = ["1", "2", "3"]; const arr6: Array<any> = [1, "2", true];

// 接口表示法 interface Istate{ name: string; age: number; } interface Iarr{ [index: number]: Istate; } const arr7: Iarr = [ { name: 'Bill', age: 66 }, { name: "Pony", age: 51 } ]; const arr8: Istate[] = [ { name: 'Bill', age: 66 }, { name: "Pony", age: 51 } ]; const arr9: Array<Istate> = [ { name: 'Bill', age: 66 }, { name: "Pony", age: 51 } ];

7、Typescript函數類型：

函數約束：有函數本身的參數約束，返回值約束；

還有函數本身賦值的變量的約束；

可采用重載的方式才支持聯合類型的函數關系。

// 申明式類型的函數 function funType(name: string, age: number): number{ return age; } const ageNum: number = funType("Tom", 18); // 函數參數不確定 function funType2(name: string, age: number, sex?: string): number{ return age; } const age2Number = funType2("Tom", 18, "男"); // 函數參數的默認值 function funType3(name="Tom", age=18): number{ return age; } const age3Number = funType3(); console.log(age3Number)

// 表達式類型的函數 const funType4 = function(name: string, age: number): number{ return age; } const funType: (name: string, age: number) => number = function(name: string, age: number): number{ return age; } interface IfunType6{ (name: string, age: number): number; } const funType6: IfunType6 = function(name: string, age: number): number{ return age; }

// 對於聯合類型的函數可以采用重載的方式 // 輸入是number，輸出也是number // 輸入是string，輸出也是string function getValue(value: number): number; function getValue(value: string): string; function getValue(value: number|string): number|string{ return value; } const a: number = getValue(1); const b: string =getValue("1"); 

8、Typescript類型斷言：

類型斷言可以用來手動指定一個值的類型。

語法：<類型>值或者值 as 類型。

在tsx語法（React的jsx語法的ts版）必須采用后面一種。

類型斷言不是類型轉換，斷言成一個聯合類型中不存在的類型是不允許的。

// 類型斷言 只能斷言聯合類型中存在的類型 function getAssert(name: string|number){ //return (<string>name).length; return (name as string).length; }

9、Typescript類型別名：

類型別名可以用來給一個類型起一個新名字。

采用關鍵字，比如“type name = string | number”。

例子中name就表示可以設置字符串或者數值類型。

也可用type來約束取值只能是某些字符串中的一個，如：

type eventNames = "click" | "scroll" | "mousemove"

// 類型別名 //const str: string|number = "1"; type strType = string | number | boolean; let str: strType = "1" str = 1; str = true; console.log(str);

// 對於接口也可以采用類型別名 interface MuchType1{ name: string; } interface MuchType2{ age: number; } type MuchType = MuchType1 | MuchType2; const obj1: MuchType = { name: "Jack" } const obj2: MuchType = { age: 20 } const obj3: MuchType = { name: "Jay", age: 22 } console.log(obj1); console.log(obj2); console.log(obj3);

// 限制字符串的選擇 type sex = "男" | "女"; function getSex(s: sex): string{ return s; } getSex("男");

10、Typescript枚舉：

枚舉（enum）類型用於取值被限定在一定范圍內的場景。

采用關鍵字enum定義，比如：enum days{Sun， Mon, Tue, Wed, Thu, Fri, Sat}。

枚舉成員會被賦值為從0開始遞增的數字，同時也會被枚舉值到枚舉名進行反向映射。

// 使用枚舉可以定義一些有名字的數字常量 enum Days{ Sun, Mon, Tue, Wed, Thu, Fri, Sat } console.log(Days.Sun); // 0 console.log(Days.Sat); // 6 console.log(Days); // {0: "Sun", 1: "Mon", 2: "Tue", 3: "Wed", 4: "Thu", 5: "Fri", 6: "Sat", Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, …} console.log(Days[0] === "Sun"); // True

11、Typescript類的裝飾符：

public、private和protected。

12、Typescript泛型：

泛型是指在定義函數、接口或類的時候，不預先指定具體類型，而是在使用的時候再指定類型的一種特性。

// 函數中使用泛型 function createArr<T>(length: number, value: T): Array<T>{ const arr = []; for(let i = 0; i<length; i++){ arr[i] = value; } return arr; } const strArr: string[] = createArr(8,"a"); console.log(strArr); const numArr: number[] = createArr(6, 1); console.log(numArr); // 接口當中使用泛型 interface Icreate{ <T>(name: string, value: T): Array<T>; } const func: Icreate = function<T>(name: string, value: T): Array<T>{ return []; } const strArr2: number[] = func("Jack", 3);