TypeScript · Magic_sword2

[TOC] # 簡介說明 原文鏈接： - [TypeScript](https://www.typescriptlang.org/) - [github](https://github.com/microsoft/TypeScript) - [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) - [Triple-Slash Directives（三重斜杠指令）](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) - [Typescript 書寫聲明文件](https://juejin.cn/post/6844904034621456398) - [TypeScript Compiler API 使用簡介](https://meixg.cn/2020/06/24/typescript-compiler-api/) - [使用 TypeScript complier API](https://zhuanlan.zhihu.com/p/141410800) ``` 版本：TypeScript 作用：JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基于類的面向對象編程 ``` # 基本語法 # & ***** 聯合類型，將兩個類型合并 # - ***** 刪除已定義操作符 # + ***** 添加已定義操作符 # ?: ***** 聲明該內容是可選的，不代表可以定義為null # [] ***** 任意參數接口 ### 示例內容 1. 舉例說明 ``` // 當string類型和number都存在時，number值必須是string值子類型 interface Point { [key: string]: string, [key: number]: string, } ``` # abstract ***** 聲明抽象類和抽象方法 # as ***** 類型斷言 ### 示例內容 1. 舉例說明 ``` let el; // 類似類型轉換，斷言變量是某種類型 (<HTMLImageElement>el).src; // 第二種寫法 (el as HTMLImageElement).src; ``` # declare ***** 編寫描述文件時，定義聲明內容關鍵字 # decorator ***** 裝飾器函數，在TS中裝飾器只能作用于類 ### 示例內容 1. 舉例說明 ``` 修飾方法時： function log(target: any, name: any, descriptor: PropertyDescriptor) { let fn = descriptor.value; descriptor.value = function (x: number, y: number): number { console.log(x); console.log(y); let result = fn(x, y); result += 128; return result; } } class Method { @log add(x: number, y: number): number { return x + y } } let m = new Method(); console.log(m.add(1, 2)); ``` 2. React HOC使用 ``` const Hoc = (Com: ComponentClass<any>) => { return class Go extends Com{ render() { return <div> hello <Com/> world </div>; } } }; @Hoc class TList extends Component<any, any> { render(){ return <div>你好哇</div> } } ``` # enum ***** 定義枚舉類型 ### 示例內容 1. 舉例說明 ``` enum HTTP_CODE { OK = 200, ERROR = 400, NOT_FOUND = 404 } ``` # extends ***** 類型繼承，用于泛型時可以約束泛型格式 ### 示例內容 1. 舉例說明 ``` 將T中可以繼承U的內容選出返回never T extends U ? never : T; ``` 2. 查找類型 + 泛型 + keyof ``` interface API { '/user': { name: string }, '/menu': { foods: string[] } } const get = <URL extends keyof API>(url: URL): Promise<API[URL]> => { return fetch(url).then(res => res.json()); } get(''); get('/menu').then(user => user.foods); ``` # infer ***** 表示在 extends 條件語句中待推斷的類型變量 ### 示例內容 1. 舉例說明 ``` type ParamType<T> = T extends (param: infer P) => any ? P : T; 在這個條件語句 T extends (param: infer P) => any ? P : T 中，infer P 表示待推斷的函數參數。整句表示為：如果 T 能賦值給 (param: infer P) => any，則結果是 (param: infer P) => any 類型中的參數 P，否則返回為 T。 ``` # get | set ***** 訪問寄存器關鍵字 ### 示例內容 1. 舉例說明 ``` class Person { constructor() { } private _name: string; public get name() { return this._name; } public set name(name: string) { this._name = name; } } ``` # in ***** 遍歷類型集體聲明類型，type專屬 ### 示例內容 1. 舉例說明 ``` interface IPerson { name: string, age: number } type IDummyPerson = { [k in keyof IPerson]: string } let obj: IDummyPerson = { name: "", age: "" }; function getVal(k: keyof typeof obj) { return obj[k]; } getVal("name"); ``` # type ***** 聲明類型變量，可以作用于原始值（基本類型），聯合類型，元組以及其它任何你需要手寫的類型 ### 示例內容 1. 拓展類型 ``` type PartialPointX = { x: number; }; type Point = PartialPointX & { y: number; }; ``` # interface ***** 定義接口 ### 示例內容 1. 定義函數 ``` interface IFunc { (x: number, y: number): number } interface IObj { fn: (x: number, y: number) => number, fn2(x: number, y: number): number, } ``` 2. 定義數組 ``` let?arr:?number[]?=?[1,?2,?3,?4]?//?數字數組?不允許出現其他數據類型 let?arr2:?string[]?=?['h',?'h',?'h']?//?字符串數組 let?arr3:?any[]?=?[1,?'h',?'h',?3]?//允許數組中出現任意類型 interface?arr {[index:?number]:?number} let?list:?arr?= [1,?2,?3,?4] let arr: Array<string> = ['bonjour', 'hello'] let arr2: Array<number> = [1, 2] let arr3: Array<any> = [1, 2, 'hh'] ``` 3. 定義鍵值為symbol ``` const a:unique symbol=Symbol(); interface eventPool { [a]: number, } ``` 4. 只讀屬性 ``` interface Point { readonly x: number; } interface Preson { name: string; age?: number; [propName: string]: any } ``` 5. 類型拓展 ``` Interface extends interface interface PartialPointX { x: number; } interface Point extends PartialPointX { y: number; } Type alias extends type alias type PartialPointX = { x: number; }; type Point = PartialPointX & { y: number; }; Interface extends type alias type PartialPointX = { x: number; }; interface Point extends PartialPointX { y: number; } Type alias extends interface interface PartialPointX { x: number; } type Point = PartialPointX & { y: number; }; ``` 6. 常用類型定義 ``` // 定義函數的參數可以不全部接收 interface func { (): string } interface obj { a: string b: (x: number, y: number) => number } interface cla { new(): cla } ``` 7. 定義 ``` export interface ThunkDispatch<S, E, A extends Action> { <T extends A>(action: T): T; <R>(asyncAction: ThunkAction<R, S, E, A>): R; } export type ThunkAction<R, S, E, A extends Action> = ( dispatch: ThunkDispatch<S, E, A>, getState: () => S, extraArgument: E ) => R; ``` 8. 函數泛型 ``` export interface ThunkDispatch { <R>(x: R): R; } function f(dispatch: ThunkDispatch) { let a = dispatch<{ x: number }>({x: 1}); a.x } 箭頭函數hack const foo = <T extends {}>(x: T) => x; ``` 9. 模板字符串類型前綴 ``` type addPrefix<TKey, TPrefix extends string> = TKey extends string ? `${TPrefix}${TKey}` : never; type removePrefix<TPrefixedKey, TPrefix extends string> = TPrefixedKey extends addPrefix<infer TKey, TPrefix> ? TKey : ''; type prefixedValue<TObject extends object, TPrefixedKey extends string, TPrefix extends string> = TObject extends {[K in removePrefix<TPrefixedKey, TPrefix>]: infer TValue} ? TValue : never; type addPrefixToObject<TObject extends object, TPrefix extends string> = { [K in addPrefix<keyof TObject, TPrefix>]: prefixedValue<TObject, K, TPrefix> } ``` # is ***** 自定義類型保護 ### 示例內容 1. 舉例說明 ``` function canEach(data: any): data is Element[] | NodeList { return data.forEach !== undefined; } function f(elements: Element[] | NodeList | Element) { if (canEach(elements)) { console.log(elements.forEach) } } ``` # keyof ***** 索引類型查詢操作符 # typeof ***** 獲取對象type類型 ### 示例內容 1. 數組內容轉key集合 ``` typeof keys[number] ``` # namespace ***** 命名空間，在模塊內部劃分模塊，同名命名空間會合并 # new ***** 類型與類類型 ### 示例內容 1. 舉例說明 ``` class Obj { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } } interface IObjConstructor { new(name: string, age: number): void } interface IObjClass { name: string; age: number; } function ObjConstructor(Obj: IObjConstructor) { let o = new Obj("", 0); console.log(o); } function ObjClass(o: IObjClass) { console.log(o); } ObjConstructor(Obj); ObjClass(new Obj("", 0)); ``` # this ***** 描述this對象 ### 示例內容 1. 舉例說明 ``` interface IObj { name: string, fn(): number } let obj: IObj = { name: "SystemLight", fn(this: IObj): number { console.log(this.name); return 1; } }; ``` 2. 原型鏈實現 ``` interface IBus { } const Bus = function (this: IBus) { const [state, setState] = useState(false); console.log(state); } as any as { new(): IBus; } ``` # unknow ***** 安全版本的any，只能賦值給any或者unknown，沒有任何屬性和方法 # never ***** 聲明函數永遠不會返回，如函數拋出錯誤，也可以說是一個無效類型 ### 示例內容 1. 舉例說明 ``` export function a(x: ExpandTouchEvent<{}>): never { throw Error(); } ```