本篇文章匯總了，一些typescript的基礎概念和一些常用的類型工具方法。
常見的typescript類型定義
const num: number = 123 // 數值const str: string = 'string' // 字符串const boo: boolean = true // 布爾const un: undefined = undefined // undefinedconst nu: null = null // nullconst obj: object = {a: 1} // 對象const big: bigInt = 100n; // 大數const sym: symbol = Symbol('s') // symbolconst arr: number[] = [1,2,3] // 數組const arr: Array<number> = [1,2,3] // 數組
元組
在一個數組中，定義不同類型的值。
// 定義數組的第一個值是number類型，第二個是string類型const x: [number, string] = [123, 'hello workd']// 解構const [a,b] = xconsole.log(a,b) // 123, hello world
unknown
不可預先定義的類型，和any很相似，但是unknow比any更加安全。
any是任意類型的父類型，同時也是任意類型的子類型。
unknown是任意類型的父類型，僅此而已。
很多場景下，我們不好定義類型，需要根據實際情況做判斷來決定類型，此時如果用any就失去了校驗的能力，用unknown有any的效果，又保留了校驗的能力。
const str1: unknown = '123'const str2: any = '123'let sex: booleansex = str1 // 報錯，因為str類型沒有確定，是unknown類型，所以不能賦值給boolean類型sex = str2 // 正常，因為any可以賦值給任意類型
枚舉
可以給數值賦予名字，當我們使用的時候，就可以使用名字而不需要記數字，增加了代碼的可讀性。
// 定義一組角色，每個角色都用一個數字代表enum Roles { ADMIN = 0, USER = 1, MANAGER = 2}
類型繼承
接口可以繼承，提高了接口的可復用性
interface Animal { type: string;}interface Dog extends Animal{ name: sting; age: number;}interface TaiDi extends Dog { color: string;}
交叉類型
通過&，將多個類型聚合
很多時候，我們不會將類型寫在一個type下面，而且拆分成很多個type，通過將這些不同的type聚合組合成一個新的type。想過與interface的extends很相似
type T1 = {name: string}type T2 = {age: number}type T3 = T1 & T2 // {name: string;age: number}
聯合類型
通過｜，使一個類型支持多個類型，聽起來比較繞，我們直接看例子。
// value 支持string和number類型type value = string | number;// value 支持number和null類型type value = number ｜ null// score只能支持1，2，3，4這四個數值type score = 1 | 2 | 3 | 4
對于聯合類型，可以讓某個變量的值可以支持多種類型，通過這種方式可以避免寫any的情況。
交叉類型，簡單理解就是合并兩個對象類型，很像Object.assign。一個是對于類型，一個是對于對象。
斷言
我們希望寫的代碼定義的某個變量是什么類型，之后使用就是什么類型。
可以是在多人協作中，以及組件參數的傳遞中，還有接口后來返回值的類型和一開始定義的不一樣。
這個時候就可以使用斷言，強制定義某個變量是什么類型。
可以理解成雖然某個變量定義的string類型，但是我知道在某個邏輯下會變成number類型，然后告訴編譯器當作number類型吧，我拍胸脯保證不會錯的。
// 例子1,常見就是從JAVAScript遷移代碼到TypeScriptconst foo = {}foo.bar = 123 // Property 'bar' does not exist on type '{}'.(2339)interface Foo { bar: number}const foo = {} as Foofoo.bar = 123 // 正常賦值// 例子2const nums: number[] = [1,2,3,4,5,6] // 定義number數組// getNum類型是number | undefinedconst getNum = nums.find(item => item > 2) // 獲取大于2的第一個元素// Type 'undefined' is not assignable to type 'number'.(2322)const num : number = getNum // 我們知道這段代碼的getNum肯定能獲取到值，所以修改如下可以正常const num: number = getNum as number
函數
// 基本使用function sum(x: number, y: number) : number { return x + y}// 可選參數,通過 ？ 實現function sum(x: number, y: number,z?: number) : number { if(z) { return x + y + z } else { return x + y }}// 參數默認值function sum(x: number, y: number = 0) : number { return x + y}// 重載// TypeScript的函數重載通過為一個函數指定多個函數類型定義，從而對函數調用的返回值進行檢查function sum(a: number,b:number):numberfunction sum(a: string,b:string): stringfunction sum(a: string | number,b: number | string) : string | number { if(typeof a === 'number' && typeof b === 'number') { // 如果是數值就相加 return a + b } else { // 否則字符串通過逗號拼接 return a + ',' + b }}// 大家可以試一下，如果不用重載的話，返回的類型就是string ｜ number// 之后在使用ans1和ans2就還得需要斷言const ans1 = sum(1,2) // ans返回的number類型const ans2 = sum('1','2') // ans返回的string類型
常用的內置方法使用
掌握以下方法讓我們寫TypeScript事半功倍，通過一些類型轉換就可以得到自己想要的類型，而不需要重新定義。
PIck<T,K>
從T集合里面獲取K的子級
type Type = { id : number; age: number; name: string;}// SubType的類型是{id:number; name: string;}type SubType = Pick<Type, 'id' | 'name'>;
keyof
獲取一個類型的所有鍵值
type Person = { name:string; age:number}type Key = keyof person // 'age' | 'age'
Partial<T>
將所有屬性變為可選。
我們定義某個對象的類型的時候，一開始大部分都會定義成必傳的。之后，在另一個地方使用需要將其變成可選，這是便可以使用Partial定義一個新類型，而不改變之前的類型。
interface Todo { title: string; description: string;}// TodoPartial = {name?:string;age?:number}type TodoPartial = Partial<Todo> // description已經成為可選鍵值，所以不寫也可以const todo: TodoPartial = {title: 'sanmu'}
Required
和Partial相反，將可選全部變為必填
interface Props { a?: number; b?: string;} const obj: Props = { a: 5 };// Property 'b' is missing in type '{ a: number; }' // but required in type 'Required<Props>'.// b沒有傳，報錯const obj2: Required<Props> = { a: 5 };
Readonly<T>
將所有的鍵值對設置為只讀
interface Todo { title: string;}const todo: Readonly<Todo> = { title: "Delete inactive users",};// Cannot assign to 'title' because it is a read-only property.// 因為title是只讀，所以報錯todo.title = "Hello";
Exclude<T,K>
從T集合中，剔除T類型和U類型的交集，返回剩余部分
type T = Exclude<'a' | 'b' | 'c', 'a'> // 'b' | 'c'
Omit<T,K>
從T集合中，過濾掉K的鍵值對
interface Todo { title: string; description: string; completed: boolean; createdAt: number;}type TodoInfo = Omit<Todo, "completed" | "createdAt">;// TodoInfo 只有title和descriptionconst todoInfo: TodoInfo = { title: "Pick up kids", description: "Kindergarten closes at 5pm",};
Record<T,K>
構造一個對象類型，T表示對象的屬性值，K標識對象的屬性值
interface CatInfo { age: number; breed: string;}type CatName = "miffy" | "boris" | "mordred";// cats的keys是 "miffy" | "boris" | "mordred"，value是{ age,breed}const cats: Record<CatName, CatInfo> = { miffy: { age: 10, breed: "Persian" }, boris: { age: 5, breed: "Maine Coon" }, mordred: { age: 16, breed: "British Shorthair" },};
NonNullable
去除null和undefined。
開發中經常其他人定義了某個類型是包含null或者undefined，可是某些場景并不需要空值，這個時候不想重新寫一個新類型，便可以使用這個
type T0 = NonNullable<string | number | undefined>;// T0 = string | numbertype T1 = NonNullable<string[] | null | undefined>;// T1 = string[]
Parameters<T>
獲取函數的參數。
比如函數1的第一個參數的類型和函數2的第一個參數的類型是一樣的，可以通過這個方法獲取函數2的參數賦予給函數1的參數。
// T0 = [] 函數參數是空值type T0 = Parameters<() => string>;// T1 = [s: string]type T1 = Parameters<(s: string) => void>;declare function f3(arg: { a: number; b: string }): void;// T3 = [arg: {a: number;b: string;}]type T3 = Parameters<typeof f3>; // 將f4的第一個參數賦予f5函數的第1個參數declare function f4 (a: number, b: string ): void;// T4 = [a: number, b: string]type T4 = Parameters<typeof f4> // a: numberdeclare function f5(a: T4[0],b:string): void
ReturnType
Parameters獲取的函數的參數類型，ReturnType則是獲取函數的返回值的類型
// T0 = stringtype T0 = ReturnType<() => string>; // T1 = voidtype T1 = ReturnType<(s: string) => void>;// T2 = unknowntype T2 = ReturnType<<T>() => T>;declare function f1(): { a: number; b: string };// T4 = { a: number; b: string;}type T4 = ReturnType<typeof f1>;
