TypeScript精炼知识点

ts属性

原始类型：string、number、bigint、boolean、symbol、null、undefined

never：任何值都没办法赋值给never，除非是他自己，所以never可以在switch case中用于穷尽测试；

Void：函数不会有任何的返回值，或者返回不了明确的值

object：除原始类型以外的，在ts里面函数也可被认为是object类型

Unknown: 可以表示任何的值和any类似，但是他做什么都不合法，可以用来描述接受不知道的类型参数，但这个参数在函数体内又不会被用到

Never：有些函数永远不会有返回值

Function： ?Function?类型的值总是可以被调用，结果会返回?any?类型

readonly: 标注只读 放在变量的前面

interface SomeType {

? readonly prop: string;

}

ts操作符?

！代表这个变量一定会有值存在

？代表这个参数可选

& 操作符 合并交叉类型 type ColorfulCircle = Colorful & Circle

a|b 联合属性内容

kind?联合类型里的属性kind? 变量.kind 来判断当前类型属于联合类型里的哪一个

public：所有都可见

protected： 成员仅仅对子类可见

private：私有的 不允许访问

内置字符操作类型

操作符列举

Uppercase <Type>：小写字母转大写字母

Lowercase<Type>：大写字母转小写字母

Capitalize<Type>：字符串第一个字符转大写形式

Uncapitalize<Type>：字符串第一个字符转小写形式

Partial<Type>：用于构造一个Type下面的所有属性都设置为可选的类型，这个工具类型会返回代表给定的一个类型的子集的类型。

Required<Type>：用于构造一个Type下面的所有属性全都设置为必填的类型

Readonly<Type>：用于构造一个Type下面的所有属性全都设置为只读的类型，意味着这个类型的所有的属性全都不可以重新赋值。

Record<Keys, Type>：?用于构造一个对象类型，它所有的key(键)都是Keys类型，它所有的value(值)都是Type类型。这个工具类型可以被用于映射一个类型的属性到另一个类型。

Pick<Type, Keys>:用于构造一个类型，它是从Type类型里面挑了一些属性Keys(Keys是字符串字面量 或者 字符串字面量的联合类型)

Omit<Type, Keys>:用于构造一个类型，它是从Type类型里面过滤了一些属性Keys(Keys是字符串字面量 或者 字符串字面量的联合类型)

Exclude<UnionType, ExcludedMembers>:用于构造一个类型，它是从UnionType联合类型里面排除了所有可以赋给ExcludedMembers的类型。

Extract<Type, Union>:用于构造一个类型，它是从Type类型里面提取了所有可以赋给Union的类型,就是选取两个里面都共有的类型，取他们的交集。

NonNullable<Type>：用于构造一个类型，这个类型从Type中排除了所有的null、undefined的类型。

Parameters<Type>：用于根据所有Type中函数类型的参数构造一个元祖类型。

ConstructorParameters<Type>：用于根据Type构造函数类型来构造一个元祖或数组类型，它产生一个带着所有参数类型的元组（或者返回never如果Type不是一个函数）。

ReturnType<Type>：用于构造一个含有Type函数的返回值的类型。

InstanceType<Type>：用于构造一个由所有Type的构造函数的实例类型组成的类型。

ThisParameterType<Type>：用于提取一个函数类型Type的this参数类型，返回unknown如果这个函数类型没有this参数。

OmitThisParameter<Type>：用于移除一个函数类型Type的this?参数类型。如果Type没有明确的声明this?类型，那么这个返回的结果就是Type，不然的话，就返回一个新的函数类型，基于Type，但不再有this参数。范型会被抹去，只有最后重载的签名被传播进了返回的新的函数类型。

ThisType<Type>：这个类型不返回一个转换过的类型，它被用作标记一个上下文的this类型。注意下如果想使用这个工具类型，noImplicitThis?(opens new window)的flag必须启用。

部分操作符示例?

Uppercase

type Greeting = "Hello, world"

type ShoutyGreeting = Uppercase<Greeting>

Record

interface CatInfo {
  age: number;
  breed: string;
}

type CatName = "miffy" | "boris" | "mordred";

const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};
// const cats: Record<CatName, CatInfo>

Pick

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

todo;

Exclude?

type T0 = Exclude<"a" | "b" | "c", "a">;
// type T0 = "b" | "c"

type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
// type T1 = "c"

type T2 = Exclude<string | number | (() => void), Function>;
// type T2 = string | number

Parameters

declare function f1(arg: { a: number; b: string }): void;

type T0 = Parameters<() => string>;
// type T0 = []

type T1 = Parameters<(s: string) => void>;
// type T1 = [s: string]

type T2 = Parameters<<T>(arg: T) => T>;
// type T2 = [arg: unknown]

type T3 = Parameters<typeof f1>;
// type T3 = [arg: {
//    a: number;
//    b: string;
// }]
type T4 = Parameters<any>;
// type T4 = unknown[]

type T5 = Parameters<never>;
// type T5 = never

type T6 = Parameters<string>;
// TypeError: Type 'string' does not satisfy the constraint '(...args: any) => any'.
// type T6 = never

type T7 = Parameters<Function>;
// TypeError: Type 'Function' does not satisfy the constraint '(...args: any) => any'. Type 'Function' provides no match for the signature '(...args: any): any'.
// type T7 = never

小知识点?

真值检查： null &&变量；undefined &&变量

A in object 属性判断在某个对象与否，也可用于收窄联合类型

typeof 识别类型 收窄联合类型；会在泛型的判断中返回string | number | symbol三种类型

keyof 获取type的属性

==? !==? 等号值判断 收窄联合类型

+- 前缀添加或者删除这些修饰符

函数属性像?name、length、call?不能被用来定义?static?成员

在 TypeScript 中，剩余参数的类型…会被隐式设置为?any[]

私有类型一般是不允许在类之外访问。

但在类型检查的时候 如果用中括号[ ] 也是可以访问的，此时这些字段弱私有

class Base {
  private x = 0;
}
const b = new Base();
// Can't access from outside the class
console.log(b.x);


class MySafe {
  private secretKey = 12345;
}
// In a JavaScript file...
const s = new MySafe();
// Will print 12345
console.log(s[“secretKey”]);

ts类型定义

函数的类型定义

如果方法参数fn是传进来一个函数，则fn的类型定义为 fn: (a: string) => void

构造签名类型定义

type SomeConstructor = {
  new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
  return new ctor("hello");
}

?泛型

function firstElement<Type>(arr: Type[]): Type | undefined {
  return arr[0];
}

extends泛型继承语法

function longest<Type extends { length: number }>(a: Type, b: Type) {
  if (a.length >= b.length) {
    return a;
  } else {
    return b;
  }
}

继承条件判断

type NameOrId<T extends number | string> = T extends number
  ? IdLabel
  : NameLabel;

利用泛型函数避免使用函数重载

function setContents<Type>(box: Box<Type>, newContents: Type) {
  box.contents = newContents;
}

映射类型

?PropertyKeys?联合类型的泛型，其中?PropertyKeys?多是通过?keyof?创建，然后循环遍历键名创建一个类型

type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};

ts类型分发

1.被分发了

type ToArray<Type> = Type extends any ? Type[] : never;
type StrArrOrNumArr = ToArray<string | number>;        
// type StrArrOrNumArr = string[] | number[]

2.包裹上就不会被分发

type ToArrayNonDist<Type> = [Type] extends [any] ? Type[] : never;
// 'StrArrOrNumArr' is no longer a union.
type StrArrOrNumArr = ToArrayNonDist<string | number>;
// type StrArrOrNumArr = (string | number)[]

参考链接：

冴羽的 JavaScript 博客翻译版：TypeScript中文文档_入门进阶必备