TypeScript

1.類型約束

介紹：為了避免給字符串類型分配一個數(shù)值，則整個針對字符串相關(guān)的操作都是錯誤的

//1.類型推斷，不建議使用
let str1 = "abc"; // 推斷 str 為字符串類型
str1 = 10; //報錯，不能將數(shù)值賦值給字符串類型

//2.類型注解，建議使用
let str2: string = "abc"; // 推斷 str 為字符串類型
str2 = 10; //報錯，不能將數(shù)值賦值給字符串類型

//3.類型斷言
let numArr = [1, 2, 3];
const result = numArr.find((item) => item > 2) as number;
result * 5;
//ts比較嚴謹，若 result 為未定義的時候，則不能與 5 相乘，所以報錯（在js中可以）
//所以加上 as number 來約束 result 的類型

2.基礎(chǔ)類型和聯(lián)合類型

let v1: string = "abc";
let v2: number = 10;
let v3: boolean = true;
let nu: null = null;
let un: undefined = undefined;
//聯(lián)合類型：v4 只能被分配 string 和 null 類型
let v4: string | null = null;
let v5: 1 | 2 | 3 = 2;

3.數(shù)組

//數(shù)組的類型約束
let arr1: number[] = [1, 2, 3];
let arr2: Array<string> = ["a", "b", "c"];

4.元組

功能：指定數(shù)組的元素個數(shù)和每個元素的類型

let t1: [number, string, number?] = [1, "a", 2];
//'?'為可選項，該位置可不填，但是填了之后也只能是對應(yīng)的類型

5.枚舉

//定義
enum MyEnum {
 A,
 B,
 C,
}

//訪問
console.log(MyEnum.A);
console.log(MyEnum[0]);

//輸出
0 
"A" 

6.函數(shù)

function MyFn1(a: number, b: string): string {
 return a + b;
}
//a 和 b 規(guī)定了約束了參數(shù)的類型
//():string 約束了返回值的類型。可以為 void 表示函數(shù)無返回值

function MyFn2(a: boolean, b = 10, c?: string, ...rest: number[]): boolean {
 return a;
}
//b 和 c 都為可選項
//b 不填則默認為 10，c 不填默認沒有
//...rest 為剩余參數(shù)，且剩余值為一個數(shù)組結(jié)構(gòu)，則可對其進行約束，為...rest: number[]
//注意，必選參數(shù)在左，可選參數(shù)在右，否則報錯

//使用
const f: boolean = MyFn2(true, 20, "zx", 1, 2, 3, 4, 5);
console.log(f);

//輸出
true 

7.接口

//正常定義對象類型
const obj = {
 name: "xiaomin",
 age: 15,
};

//使用接口
interface obj {
 name: string;
 age: number;
};

//使用該接口來定義對象
const obj: obj = {
 name: "a",
 age: 10,
};

8.類型別名

//若很多參數(shù)都需要定義約束類型
let a: string | number = 10;
let b: string | number = 20;
let c: string | number = 30;

//則使用類型別名
type MyType = string | number;
let a: MyType = 10;
let b: MyType = 20;
let c: MyType = 30;

9.泛型

功能：若一個函數(shù)是比較通用的函數(shù)，如下面的函數(shù)，想讓他處理一組字符串、布爾類型、數(shù)值類型，則可以使用泛型

//對函數(shù)定義泛型
function myFn<T>(a: T, b: T, ...r: T[]): T[] {
 return [a, b, ...r];
}

//使用
//也可以 const arr = myFn(1, 2, 3, 12, 3); 因為 ts 支持類型推斷
const arr: number[] = myFn<number>(1, 2, 3, 12, 3);
console.log(arr);

//輸出
[1, 2, 3, 12, 3]?