TypeScripe 笔记: 类型工具总结
admin
2024-03-16 11:43:11
0
TypeScripe 笔记: 类型工具总结

jcLee95 的CSDN博客
本文地址:https://blog.csdn.net/qq_28550263/article/details/128169632

目 录

1. 类型构造工具

  • Awaited
  • Partial
  • Required
  • Readonly
  • Record
  • Pick
  • Omit
  • Exclude
  • Extract
  • NonNullable
  • Parameters
  • ConstructorParameters
  • ReturnType
  • InstanceType
  • ThisParameterType
  • OmitThisParameter
  • ThisType

2. 字符串操作类型工具

  • 2.1 Uppercase
  • 2.2 Lowercase
  • 2.3 Capitalize
  • 2.4 Uncapitalize

1. 类型构造工具

类型工具描述
Awaited这种类型旨在对 async 函数中的 awaitPromises-specific 上的 .then() 方法等操作进行建模,特别是——它们以递归方式展开 promises
Partial构造一个 type 的所有属性都设置为可选的类型。该实用程序将返回一个表示给定类型的所有子集的类型。
Required构造由设置为 required 的所有类型属性组成的类型。Partial 的逆操作。
Readonly构造一个所有类型属性都设置为 readonly 的类型,这意味着不能重新分配构造类型的属性。
Record构造一个对象类型,其属性键是Keys,属性值是Type。该实用工具可用于将一种类型的属性映射到另一种类型。
Pick通过从类型中选取一组属性Keys(字符串或字符串的联合)来构造类型。
Omit通过从类型中选取所有属性,然后移除Keys(字符串文字或字符串文字的联合)来构造类型。
Exclude通过从UnionType中排除所有可分配给ExcludedMembers的联合成员来构造类型。
Extract通过从Type中提取可分配给 Union 的所有联合成员来构造类型。
NonNullable通过从 Type 中排除 nullundefined 来构造类型。
Parameters从函数类型 Type 的参数中使用的类型构造元组类型。
ConstructorParameters从构造函数类型的类型构造元组或数组类型。它产生一个包含所有参数类型的 tuple 类型(如果类型不是函数,则为 never 类型)。
ReturnType构造由函数类型的返回类型组成的类型。
InstanceType构造由类型中构造函数的实例类型组成的类型。
ThisParameterType提取函数类型的 this 参数的类型,如果函数类型没有 this 参数,则为 unknown
OmitThisParameter从 Type 中移除此参数。如果 Type 没有显式声明此参数,则结果只是 Type。否则,将从 Type 创建一个不带此参数的新函数类型。泛型被删除,只有最后一个重载签名被传播到新的函数类型中。
ThisType该实用工具不返回转换后的类型。相反,它充当上下文 this 类型的标记。请注意,要使用此实用程序,必须启用 noImplicitThis 标志。

1.1 Awaited

这种类型旨在对 async 函数中的 awaitPromises-specific 上的 .then() 方法等操作进行建模,特别是——它们以递归方式展开 promises

type A = Awaited>;            // type A = string
type B = Awaited>>;   // type B = number
type C = Awaited>;  // type C = number | boolean

1.2 Partial

构造一个 type 的所有属性都设置为可选的类型。该实用程序将返回一个表示给定类型的所有子集的类型。

interface Todo {title: string;description: string;
}function updateTodo(todo: Todo, fieldsToUpdate: Partial) {return { ...todo, ...fieldsToUpdate };
}const todo1 = {title: "organize desk",description: "clear clutter",
};const todo2 = updateTodo(todo1, {description: "throw out trash",
});

1.3 Required

构造由设置为 required 的所有类型属性组成的类型。Partial 的逆操作。

interface Props {a?: number;b?: string;
}
const obj: Props = { a: 5 };// 错误:类型 `{ a: number; }` 中缺少属性 `b`,但在类型 `Required` 中是必需的。
const obj2: Required = { a: 5 }; 

1.4 Readonly

构造一个所有类型属性都设置为 readonly 的类型,这意味着不能重新分配构造类型的属性。

interface Todo {title: string;
}
const todo: Readonly = {title: "Delete inactive users",
};// 错误:无法分配给 `title`,因为它是只读属性。
todo.title = "Hello";  

该工具对于表示将在运行时失败的赋值表达式非常有用(例如,当尝试重新分配冻结对象的属性时)。

1.5 Record

构造一个对象类型,其属性键是Keys,属性值是Type。该实用工具可用于将一种类型的属性映射到另一种类型。

interface CatInfo {age: number;breed: string;
}type CatName = "miffy" | "boris" | "mordred";const cats: Record = {miffy: { age: 10, breed: "Persian" },boris: { age: 5, breed: "Maine Coon" },mordred: { age: 16, breed: "British Shorthair" },
};// const cats: Record
cats.boris;

1.6 Pick

通过从类型中选取一组属性Keys(字符串或字符串的联合)来构造类型。

interface Todo {title: string;description: string;completed: boolean;
}type TodoPreview = Pick;const todo: TodoPreview = {title: "Clean room",completed: false,
};// const todo: TodoPreview
todo;

1.7 Omit

通过从类型中选取所有属性,然后移除Keys(字符串文字或字符串文字的联合)来构造类型。

interface Todo {title: string;description: string;completed: boolean;createdAt: number;
}type TodoPreview = Omit;const todo: TodoPreview = {title: "Clean room",completed: false,createdAt: 1615544252770,
};// const todo: TodoPreview
todo;
type TodoInfo = Omit;const todoInfo: TodoInfo = {title: "Pick up kids",description: "Kindergarten closes at 5pm",
};// const todoInfo: TodoInfo
todoInfo;

1.8 Exclude

通过从UnionType中排除所有可分配给ExcludedMembers的联合成员来构造类型。

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 void), Function>; // type T2 = string | number

1.9 Extract

通过从Type中提取可分配给 Union 的所有联合成员来构造类型。

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

1.10 NonNullable

通过从 Type 中排除 nullundefined 来构造类型。

type T0 = NonNullable;  // type T0 = string | number
type T1 = NonNullable;  // type T1 = string[]

1.11 Parameters

从函数类型 Type 的参数中使用的类型构造元组类型。

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<(arg: T) => T>;    // type T2 = [arg: unknown]
type T3 = Parameters;           // type T3 = [arg: { a: number; b: string;}]
type T4 = Parameters;                 // type T4 = unknown[]
type T5 = Parameters;               // type T5 = never// 类型 `string` 不满足约束`(...args: any) => any`。
type T6 = Parameters;              // type T6 = never// 类型 `Function` 不满足约束 `(...args: any) => any`。
// 类型 `Function` 没有为签名 `(...args: any): any`。
type T7 = Parameters;            // type T7 = never

1.12 ConstructorParameters

从构造函数类型的类型构造元组或数组类型。它产生一个包含所有参数类型的 tuple 类型(如果类型不是函数,则为 never 类型)。

type T0 = ConstructorParameters;     // type T0 = [message?: string]
type T1 = ConstructorParameters;  // type T1 = string[]
type T2 = ConstructorParameters;    // type T2 = [pattern: string | RegExp, flags?: string]
type T3 = ConstructorParameters;                  // type T3 = unknown[]// 类型 'Function' 不满足约束 `abstract new (...args: any) => any`.
// 类型 'Function' 没有为签名提供匹配项 `new (...args: any): any`.
type T4 = ConstructorParameters;             // type T4 = never

1.13 ReturnType

构造由函数类型的返回类型组成的类型。

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>;          // type T2 = unknown
type T3 = ReturnType<() => T>;  // type T3 = number[]
type T4 = ReturnType;           // type T4 = { a: number; b: string;}
type T5 = ReturnType;                 // type T5 = any
type T6 = ReturnType;               // type T6 = never// 类型 `string` does not satisfy the constraint '(...args: any) => any'.
type T7 = ReturnType;              // type T7 = any// 类型 `Function` 不满足约束 `(...args: any) => any`.
// 类型 `Function` 没有为签名提供匹配项 `(...args: any): any`.
type T8 = ReturnType;            // type T8 = any

1.14 InstanceType

构造由类型中构造函数的实例类型组成的类型。

class C {x = 0;y = 0;
}type T0 = InstanceType;  // type T0 = C
type T1 = InstanceType;       // type T1 = any
type T2 = InstanceType;     // type T2 = never// 类型 `string` 不满足约束 `abstract new (...args: any) => any`.
type T3 = InstanceType;    // type T3 = any// 类型 `Function` 不满足约束 `abstract new (...args: any) => any`.
// 类型 `Function` 没有为签名提供匹配项 `new (...args: any): any`.
type T4 = InstanceType;  // type T4 = any

1.15 ThisParameterType

提取函数类型的 this 参数的类型,如果函数类型没有 this 参数,则为 unknown

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

1.16 OmitThisParameter

从 Type 中移除此参数。如果 Type 没有显式声明此参数,则结果只是 Type。否则,将从 Type 创建一个不带此参数的新函数类型。泛型被删除,只有最后一个重载签名被传播到新的函数类型中。

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

1.17 ThisType

该实用工具不返回转换后的类型。相反,它充当上下文 this 类型的标记。

注意,要使用此实用程序,必须启用 noImplicitThis 标志。

type ObjectDescriptor = {data?: D;methods?: M & ThisType; // 方法中 `this` 的类型是 D & M
};function makeObject(desc: ObjectDescriptor): 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; // 强类型化 thisthis.y += dy; // 强类型化 this},},
});obj.x = 10;
obj.y = 20;
obj.moveBy(5, 5);

2. 字符串操作类型工具

为了有助于字符串操作,TypeScript包含了一组可用于字符串操作的类型。这些类型内置于编译器中以提高性能,在TypeScript 附带的. d.ts文件中找不到。

类型工具描述
Uppercase将字符串中的每个字符转换为大写形式。
Lowercase将字符串中的每个字符转换为小写形式。
Capitalize将字符串中的第一个字符转换为等效的大写字符。
Uncapitalize将字符串中的第一个字符转换为小写的等效字符。

2.1 Uppercase

将字符串中的每个字符转换为大写形式。

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

2.2 Lowercase

将字符串中的每个字符转换为小写形式。

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

2.3 Capitalize

将字符串中的第一个字符转换为等效的大写字符。

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

2.4 Uncapitalize

将字符串中的第一个字符转换为小写的等效字符。

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

相关内容

热门资讯

ios系统切换安卓系统还原,还... 你有没有想过,有一天你的手机从iOS系统切换到了安卓系统,然后再从安卓系统回到iOS系统呢?这听起来...
灵焕3装安卓系统,引领智能新体... 你知道吗?最近手机圈里可是掀起了一股热潮,那就是灵焕3这款神器的安卓系统升级。没错,就是那个曾经以独...
安卓系统指南针软件,探索未知世... 手机里的指南针功能是不是让你在户外探险时倍感神奇?但你知道吗,安卓系统中的指南针软件可是大有学问呢!...
华为是不用安卓系统了吗,迈向自... 最近有个大新闻在科技圈里炸开了锅,那就是华为是不是不再使用安卓系统了?这可不是一个简单的问题,它涉及...
安卓系统热点开启失败,排查与解... 最近是不是你也遇到了安卓系统热点开启失败的小麻烦?别急,让我来给你详细说说这个让人头疼的问题,说不定...
小米max2系统安卓,安卓系统... 你有没有听说过小米Max2这款手机?它那超大的屏幕,简直就像是个移动的电脑屏幕,看视频、玩游戏,那叫...
电池健康怎么保持安卓系统,优化... 手机可是我们生活中不可或缺的好伙伴,而电池健康度就是它的生命力。你有没有发现,随着使用时间的增长,你...
安卓手机怎么调系统颜色,安卓手... 你有没有发现,你的安卓手机屏幕颜色突然变得不那么顺眼了?是不是也想给它换换“脸色”,让它看起来更有个...
安卓系统清粉哪个好,哪款清粉工... 手机用久了,是不是觉得卡得要命?别急,今天就来聊聊安卓系统清理垃圾哪个软件好。市面上清理工具那么多,...
华为被限制用安卓系统,挑战安卓... 你知道吗?最近科技圈可是炸开了锅!华为,这个我们耳熟能详的名字,竟然因为一些“小插曲”被限制了使用安...
安卓系统是不是外国,源自外国的... 你有没有想过,我们每天离不开的安卓系统,它是不是外国货呢?这个问题听起来可能有点奇怪,但确实很多人都...
安卓系统缺少文件下载,全面解析... 你有没有发现,用安卓手机的时候,有时候下载个文件真是让人头疼呢?别急,今天就来聊聊这个让人烦恼的小问...
kktv系统刷安卓系统怎么样,... 你有没有听说最近KKTV系统刷安卓系统的事情?这可是个热门话题呢!咱们一起来聊聊,看看这个新玩意儿到...
安卓系统连接电脑蓝牙,操作指南... 你有没有遇到过这种情况:手机里堆满了各种好用的应用,可就是想找个方便快捷的方式,把手机里的音乐、照片...
安卓车机11.0系统包,智能驾... 你有没有发现,最近你的安卓车机系统好像悄悄升级了呢?没错,就是那个安卓车机11.0系统包!这可不是一...
安卓系统最高到多少,从初代到最... 你有没有想过,你的安卓手机系统升级到哪一步了呢?是不是好奇安卓系统最高能到多少呢?别急,今天就来带你...
手机系统安卓和ios系统下载地... 你有没有发现,现在手机的世界里,安卓和iOS两大系统就像是一对双胞胎,各有各的特色,让人爱不释手。今...
安卓系统最早开发公司,从安卓起... 你有没有想过,我们每天离不开的安卓系统,它究竟是由哪家公司最早开发的呢?没错,就是谷歌(Google...
安卓系统平板推荐学生用,学生适... 作为一名热爱学习的学生,你是不是也在寻找一款既实用又好用的平板电脑呢?平板电脑在学习和生活中可是个得...
安卓5.0系统多大容量,存储容... 你有没有想过,你的安卓手机里那个神秘的安卓5.0系统到底有多大容量呢?别急,今天就来给你揭秘这个谜团...