TS TypeScript

TypeScript

发布日期: 2022-06-24

更新日期: 2025-05-09

文章字数: 2.7k

阅读时长: 15 分

阅读次数:

工具列表

[√] Partial<Type>
[√] Required<Type>
[√] Readonly<Type>
[√] Record<Keys, Type>
[√] Pick<Type, Keys>
[√] Omit<Type, Keys>
[√] Exclude<UnionType, ExcludedMembers>
[√] Extract<Type, Union>
[√] NonNullable<Type>
[√] Parameters<Type>
[√] ConstructorParameters<Type>
[√] ReturnType<Type>
[√] InstanceType<Type>
[√] ThisParameterType<Type>
[√] OmitThisParameter<Type>
[√] ThisType<Type>
[√] Uppercase<StringType>
[√] Lowercase<StringType>
[√] Capitalize<StringType>
[√] Uncapitalize<StringType>

Utility Types

`Partial<Type>`

将接口类型中定义的属性变成可选的(Optional)

源码实现

type Partial<T> = { [P in keyof T]?: T[P] | undefined; }

例子

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

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
  title: "organize desk",
  description: "clear clutter",
};

const todo2 = updateTodo(todo1, {
  description: "throw out trash",
});

`Required<Type>`

将接口类型中定义的属性变成必选项，与Partial<Type>相反
即使在之前先将它们设为可选的，Required也会使所有符合条件的属性成为必需的，如果省略掉属性的话TypeScript将会引发错误

源码实现

type Required<T> = { [P in keyof T]-?: T[P]; }

例子

interface Props {
  a?: number;
  b?: string;
}

const obj: Props = { a: 5 };

const obj2: Required<Props> = { a: 5 };
// Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

`Readonly<Type>`

所有属性设置为只读的类型，不能给类型的属性重新赋值

源码实现

type Readonly<T> = { readonly [P in keyof T]: T[P]; }

例子

interface Todo {
  title: string;
}

const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};

todo.title = "Hello";
// Cannot assign to 'title' because it is a read-only property.

`Record<Keys, Type>`

用于生成以联合类型为键名（Keys），键值类型为Type的新接口，即把Keys的每个键值拿出来，类型规定为Type
接收两个泛型参数，构造一个对象类型，键为keys，值为type，用于将一个类型的属性映射到另一个类型

源码实现

type Record<K extends string | number | symbol, T> = { [P in K]: T; }

例子

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" },
};

cats.boris;

`Pick<Type, Keys>`

选择一组属性Keys来构造类型Type，即从对象中挑选部分

源码实现

type Pick<T, K extends keyof T> = { [P in K]: T[P]; }

例子

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

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

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

`Omit<Type, Keys>`

Omit与Pick相反，它从类型Type中删除属性Keys，即是排除部分

源码实现

type Omit<T, K extends string | number | symbol> = { [P in Exclude<keyof T, K>]: T[P]; }

例子

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

type TodoPreview = Omit<Todo, "description">;

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


type TodoInfo = Omit<Todo, "completed" | "createdAt">;

const todoInfo: TodoInfo = {
  title: "Pick up kids",
  description: "Kindergarten closes at 5pm",
};

`Exclude<UnionType, ExcludedMembers>`

从UnionType(待筛选列表)中剔除ExcludedMembers(筛选条件)的所有属性

源码实现

type Exclude<T, U> = T extends U ? never : T

例子

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

`Extract<Type, Union>`

Extract与Exclude相反，从Type(待筛选列表)中保留Union(筛选条件)的所有属性，Union不存在的属性全部剔除

源码实现

type Extract<T, U> = T extends U ? T : never

例子

type T0 = Extract<"a" | "b" | "c", "a" | "f">;
// type T0 = "a"
type T1 = Extract<string | number | (() => void), Function>; 
// type T1 = () => void

`NonNullable<Type>`

从Type中排除null和undefined

源码实现

type NonNullable<T> = T extends null | undefined ? never : T

例子

type T0 = NonNullable<string | number | undefined>;
// type T0 = string | number
type T1 = NonNullable<string[] | null | undefined>;
// type T1 = string[]

`Parameters<Type>`

以元组的方式获得函数的入参Type的类型

源码实现

type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never

例子

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>;
// Type 'string' does not satisfy the constraint '(...args: any) => any'.
// type T6 = never
type T7 = Parameters<Function>;
// Type 'Function' does not satisfy the constraint '(...args: any) => any'.
// Type 'Function' provides no match for the signature '(...args: any): any'.
// type T7 = never

`ConstructorParameters<Type>`

以元组的方式获得构造函数的入参Type的类型

源码实现

type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never

例子

type T0 = ConstructorParameters<ErrorConstructor>;
// type T0 = [message?: string]
type T1 = ConstructorParameters<FunctionConstructor>;
// type T1 = string[]
type T2 = ConstructorParameters<RegExpConstructor>;
// type T2 = [pattern: string | RegExp, flags?: string]
type T3 = ConstructorParameters<any>;
// type T3 = unknown[]
type T4 = ConstructorParameters<Function>;
// Type 'Function' does not satisfy the constraint 'abstract new (...args: any) => any'.
// Type 'Function' provides no match for the signature 'new (...args: any): any'.
// type T4 = never

`ReturnType<Type>`

用于获取函数的返回类型

源码实现

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any

例子

declare function f1(): { a: number; b: string };
type T0 = ReturnType<() => string>;
// type T0 = string
type T1 = ReturnType<(s: string) => void>;
// type T1 = void
type T2 = ReturnType<<T>() => T>;
// type T2 = unknown
type T3 = ReturnType<<T extends U, U extends number[]>() => T>;
// type T3 = number[]
type T4 = ReturnType<typeof f1>;
// type T4 = {
//     a: number;
//     b: string;
// }
type T5 = ReturnType<any>;
// type T5 = any
type T6 = ReturnType<never>;
// type T6 = never
type T7 = ReturnType<string>;
// Type 'string' does not satisfy the constraint '(...args: any) => any'.
// type T7 = any
type T8 = ReturnType<Function>;
// Type 'Function' does not satisfy the constraint '(...args: any) => any'.
// Type 'Function' provides no match for the signature '(...args: any): any'.
// type T8 = any

`InstanceType<Type>`

推断/获得构造函数返回值的类型

源码实现

type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any

例子

class C {
  x = 0;
  y = 0;
}
type T0 = InstanceType<typeof C>;
// type T0 = C
type T1 = InstanceType<any>;
// type T1 = any
type T2 = InstanceType<never>;
// type T2 = never
type T3 = InstanceType<string>;
// Type 'string' does not satisfy the constraint 'abstract new (...args: any) => any'.
// type T3 = any
type T4 = InstanceType<Function>;
// Type 'Function' does not satisfy the constraint 'abstract new (...args: any) => any'.
// Type 'Function' provides no match for the signature 'new (...args: any): any'.
// type T4 = any

`ThisParameterType<Type>`

提取函数Type的this参数生成一个新的Type，若函数类型并没有此参数，则提取为unknown类型。

源码实现

type ThisParameterType<T> = T extends (this: infer U, ...args: never) => any ? U : unknown

例子

function toHex(this: Number) {
  return this.toString(16);
}
function numberToString(n: ThisParameterType<typeof toHex>) {
  return toHex.apply(n);
}

`OmitThisParameter<Type>`

创建一个OmitThisParameter类型，从函数类型Type中移除this参数，即忽略函数Type的this参数，生成一个新的函数Type

源码实现

type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T

例子

function toHex(this: Number) {
  return this.toString(16);
}
const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);
console.log(fiveToHex());

`ThisType<Type>`

ThisType不返回转换后的类型，只是给对象标记this接口。注意，要使用ThisType，必须启用noImplicitThis
源码实现
```
interface ThisType<T>
```

例子

type ObjectDescriptor<D, M> = {
  data?: D;
  methods?: M & ThisType<D & M>; // Type of 'this' in methods is D & M
};

function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {
  let data: object = desc.data || {};
  let methods: object = desc.methods || {};
  return { ...data, ...methods } as D & M;
}

let obj = makeObject({
  data: { x: 0, y: 0 },
  methods: {
    moveBy(dx: number, dy: number) {
      this.x += dx; // Strongly typed this
      this.y += dy; // Strongly typed this
    },
  },
});

obj.x = 10;
obj.y = 20;
obj.moveBy(5, 5);

`Intrinsic String Manipulation Types`

TypeScript的一些类型可以用于字符操作，这些类型处于性能的考虑被内置在编译器中，你不能在.d.ts文件里找到它们。如：Uppercase<StringType>、Lowercase<StringType>、Capitalize<StringType>、Uncapitalize<StringType>、

`Uppercase<StringType>`

把每个字符转为大写形式

源码实现

type Uppercase<S extends string> = intrinsic

例子

type Greeting = "Hello, world"
type ShoutyGreeting = Uppercase<Greeting>
// type ShoutyGreeting = "HELLO, WORLD"
type ASCIICacheKey<Str extends string> = `ID-${Uppercase<Str>}`
type MainID = ASCIICacheKey<"my_app">
// type MainID = "ID-MY_APP"

`Lowercase<StringType>`

把每个字符转为小写形式

源码实现

type Lowercase<S extends string> = intrinsic

例子

type Greeting = "Hello, world"
type QuietGreeting = Lowercase<Greeting>
// type QuietGreeting = "hello, world"
type ASCIICacheKey<Str extends string> = `id-${Lowercase<Str>}`
type MainID = ASCIICacheKey<"MY_APP">
// type MainID = "id-my_app"

`Capitalize<StringType>`

把字符串的第一个字符转为大写形式

源码实现

type Capitalize<S extends string> = intrinsic

例子

type LowercaseGreeting = "hello, world";
type Greeting = Capitalize<LowercaseGreeting>;
// type Greeting = "Hello, world"

`Uncapitalize<StringType>`

把字符串的第一个字符转换为小写形式

源码实现

type Uncapitalize<S extends string> = intrinsic

例子

type UppercaseGreeting = "HELLO WORLD";
type UncomfortableGreeting = Uncapitalize<UppercaseGreeting>;
// type UncomfortableGreeting = "hELLO WORLD"

工具分类一览

全量修饰接口：Partial Readonly(Immutable) Mutable Required
裁剪接口：Pick Omit PickByValueType OmitByValueType
基于 infer：ReturnType`` ParamType PromiseType
获取指定条件字段：FunctionKeys OptionalKeys RequiredKeys
内置字符操作类型：Uppercase<StringType> Lowercase<StringType> Capitalize<StringType> Uncapitalize<StringType>

官方文档地址

https://www.typescriptlang.org/docs/handbook/utility-types.html

TS TypeScript

史蒂夫·乔布斯在斯坦福大学的演讲

2022-07-25 文摘

史蒂夫·乔布斯 Steve Jobs

git远程已经删除的分支本地环境仍能看到远程分支

2022-06-11 版本控制工具

git

TS内置工具类型使用

工具列表

Utility Types

Partial<Type>

Required<Type>

Readonly<Type>

Record<Keys, Type>

Pick<Type, Keys>

Omit<Type, Keys>

Exclude<UnionType, ExcludedMembers>

Extract<Type, Union>

NonNullable<Type>

Parameters<Type>

ConstructorParameters<Type>

ReturnType<Type>

InstanceType<Type>

ThisParameterType<Type>

OmitThisParameter<Type>

ThisType<Type>

Intrinsic String Manipulation Types

Uppercase<StringType>

Lowercase<StringType>

Capitalize<StringType>

Uncapitalize<StringType>

工具分类一览

官方文档地址

窄门大道

`Partial<Type>`

`Required<Type>`

`Readonly<Type>`

`Record<Keys, Type>`

`Pick<Type, Keys>`

`Omit<Type, Keys>`

`Exclude<UnionType, ExcludedMembers>`

`Extract<Type, Union>`

`NonNullable<Type>`

`Parameters<Type>`

`ConstructorParameters<Type>`

`ReturnType<Type>`

`InstanceType<Type>`

`ThisParameterType<Type>`

`OmitThisParameter<Type>`

`ThisType<Type>`

`Intrinsic String Manipulation Types`

`Uppercase<StringType>`

`Lowercase<StringType>`

`Capitalize<StringType>`

`Uncapitalize<StringType>`