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中排除了所有的nullundefined的类型。

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

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

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

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

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

OmitThisParameter<Type>用于移除一个函数类型Typethis 参数类型。如果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中文文档_入门进阶必备

  • 48
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值