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(); } ```