TS 是什么？

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

TS 为了解决什么问题？

The goal of TypeScript is to be a static typechecker for JavaScript programs - in other words, a tool that runs before your code runs (static) and ensures that the types of the program are correct (typechecked).

TS基本类型

string、number、boolean、bigInt、null、undefined、void

Array、Tuple

const arr = ['hello', 18, false] type typeArr = typeof arr type numberArr = typeArr[number] // string | number | boolean const tuple = ['hello', 18, false] as const type typeTuple = typeof tuple type numberTuple = typeTuple[number] // false | "hello" | 18

Funciton、(...args: any) => any

// 声明了一个function function greeterFn(name: string): void { console.log(`hello, ${name}`); } // 给function加描述 greeterFn.desc = 'greeter desc' // Call Signatures type Greeter = { desc: string (name: string): void } function callGreeter(fn: Greeter) { console.log(fn.desc + " :" + fn('call')); } // 重载 function greeter(age: number): void function greeter(name: string): string function greeter(age: number, name: string): string function greeter(age: string | number, name?: string) { if (typeof age === 'number') { console.log('my age is 18!') return } if (!name) { name = age } return name } const g1 = greeter(18) // void const g2 = greeter('枫荷') // string const g3 = greeter(18, '枫荷') // string const g4 = greeter('18', '枫荷') // error // Argument of type 'string' is not assignable to parameter of type 'number'. // 协变、逆变 下期细说

Class、 new (...args: any) => any constructor

Object 、object 、record<string, any>

// 区别 // Object Contains stuff (like toString(), hasOwnProperty()) that is present in all JavaScript objects. // Any value (primitive, non-primitive) can be assigned to Object type type O = Object; let O1: O = 1; // 正确 let O2: O = ''; // 正确 let O3: O = {}; // 正确 let O4: O = { name: '枫荷' }; // 正确 // It is any non-primitive type. // You can't assign to it any primitive type like bool, number, string, symbol. type o = object; let o1: o = 1; // ts提示报错 let o2: o = ''; // ts提示报错 let o3: o = {}; // 正确 let o4: o = { name: '枫荷' }; // 正确 o4.name // ts 报错 Property 'name' does not exist on type 'object' type R = Record<string, any> let r1: R = 1; // ts提示报错 let r2: R = ''; // ts提示报错 let r3: R = {}; // 正确 let r4: R = { name: '枫荷' }; // 正确 r4.name. // 正确

Any

type intersectionAny = 1 & any // any type unionAny = 1 | any // any

Unkown

The unknown type represents any value. This is similar to the any type, but is safer because it’s not legal to do anything with an unknown value:

type intersectionUnknown = 1 & unknown // 1 type unionUnknown = 1 | unknown // Unknown

never

type intersectionNever = 1 & never // never type unionNever = 1 | never // 1

联合类型

type id = number | string

类型声明

1. Type Alias (类型别名)

1. interface

An interface declaration is another way to name an object type:

1. 区别

the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable

Type 能做类型推导

interface只能声明object type

// extend interface IAnimal { name: string } interface IBear extends IAnimal { honey: boolean } type TAnimal = { name: string } type TBear = TAnimal & { honey: boolean } // reopen interface IWindow { title: string } interface IWindow { toString: Function } type TWindow = { title: string } type TWindow = { // Error: Duplicate identifier 'TWindow'. toString: FunctionAPI } // 类型推导 type isAny<T> = 1 extends 0 & T ? true : false // 别名 type ID = string | number

类型断言

TypeScript only allows type assertions which convert to a more specific or less specific version of a type.

const myCanvas = <HTMLCanvasElement>document.getElementById("myCanvas"); myCanvas.getContext("2d")?.fillRect(0, 0, 100, 100) const myCanvas2 = document.getElementById("myCanvas") as HTMLCanvasElement; const string = "Hello World" as unknown as number;

泛型

A major part of software engineering is building components that not only have well-defined and consistent APIs, but are also reusable. Components that are capable of working on the data of today as well as the data of tomorrow will give you the most flexible capabilities for building up large software systems.

类型操作(基础)

属性描述

type Person = { name: string; // required age?: number; // optional readonly sex: string // readonly } // 去optional -? // 去readonly -readonly

Keyof

type Person = { name: string; // required age?: number; // optional readonly sex: string; // readonly }; type keys = keyof Person; // name | age | sex

Typeof

const Person = { name: '枫荷', age: 18, sex: '男', }; type IPerson = typeof Person; /** * type IPerson = { name: string; age: number; sex: string; } */

Index

type Person = { age: number; name: string; alive: boolean }; type Age = Person["age"];

简单操作

type Partial<T> = { [P in keyof T]?: T[P] } type Required<T> = { [P in keyof T]-?: T[P] } type Record<K extends keyof any, V> = { [P in K]: V } type Pick<T, K extends keyof T> = { [P in K]: T[P] } type Exclude<T, K> = T extends K ? never : T type Readonly<T> = { readonly [P in keyof T]: T[P] } type RemoveReadonly<T> = { -readonly [P in keyof T]: T[P] } type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : never type Awaited<T extends PromiseLike<any>> = T extends PromiseLike<infer R> ? R extends PromiseLike<any> ? Awaited<R> : R : T

conditional

Extends

1. 声明、等式左边(表示继承)

   class Animal { name: string } class Dog extends Animal { bark: () => void } function toString <T>(arg: T) { if (typeof arg === 'string') { return arg } return `${arg}` } function toStringWithLimit<T extends string | number>(arg: T) { if (typeof arg === 'string') { return arg } return `${arg}` } type NumberToString<T extends number> = `${T}` ``` 1. ######   ts中继承一般分为两种形式 1. 小的集合继承自大的集合 1. ``` type oneExtendsNumber = 1 extends number ? true : false // true ``` 1. 方法多的继承自方法少的（object） 1. ``` class Animal { name: string } class Dog extends Animal { bark: () => void } let animal: Animal // name let dog: Dog // name、bark type arrayExtendsReadonlyArr = [] extends readonly [] ? true : false // true ```

2. 等式右边（表示条件判断）

   1. T extends U ? X : Y

   2.   ts中的extends运算规则

   3. 参数：分发

      1. T' 代表T中的每一项, U' 代表你需要判断T' 是否继承自 U'的任意值

      2. type Union = 1 | 2 type StringUnion1<T extends string | number> = T extends any ? `${T}` : never // 1 | 2 type StringUnion2<T extends string | number> = T extends T ? `${T}` : never // 1 | 2 type StringUnion3<T extends string | number> = T extends 1 ? `${T}` : never // 1 | never => 1

   4. 结果：协变 => 并集（covariant => union），逆变 => 交集（contravariant => intersection）

      1. // 协变 type union = 1 | 2 type StringUnion = union extends any ? `${union}1` : never // 逆变 type unionFn = ((name: string) => string) | ((age: number) => number) type FnUnion1 = unionFn extends (args: infer P) => infer R ? [P, R] : never

Infer (Type inference in conditional types)

Within the extends clause of a conditional type, it is now possible to have infer declarations that introduce a type variable to be inferred. Such inferred type variables may be referenced in the true branch of the conditional type. It is possible to have multiple infer locations for the same type variable.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any; type Unpacked<T> = T extends (infer U)[] ? U : T extends (...args: any[]) => infer U ? U : T extends Promise<infer U> ? U : T; type T0 = Unpacked<string>; // string type T1 = Unpacked<string[]>; // string type T2 = Unpacked<() => string>; // string type T3 = Unpacked<Promise<string>>; // string type T4 = Unpacked<Promise<string>[]>; // Promise<string> type T5 = Unpacked<Unpacked<Promise<string>[]>>; // string // 函数重载类型 declare function foo(x: string): number; declare function foo(x: number): string; declare function foo(x: string | number): string | number; // 这里推导是返回最后一次声明的结果 type T30 = ReturnType<typeof foo>; // string | number

协变和逆变

1. 子集（SubType）

   class Animal { name: string; constructor(name: string) { this.name = name; } } class Dog extends Animal { bark() { console.log('wang wang !') } constructor(name: string) { super(name); } } // Dog is SubType of Animal // Dog <: Animal type IsSubtypeOf<S, P> = S extends P ? true : false; type T11 = IsSubtypeOf<Dog, Animal>; // true type T12 = IsSubtypeOf<'hello', string>; // true type T13 = IsSubtypeOf<42, number>; // true type T14 = IsSubtypeOf<Map<string, string>, Object>; // true ```

2. 协变 （Covariance）

如果一个操作是协变的，那么则有以下规则 > > A <: