使用这个五个强大的技巧来充分发挥 Typescript 的能力来提高您的编码技能。从使用 const 断言来保护类型到掌握 keyof 运算符,这些技巧将帮助您编写干净、更高效的代码。
使用 const 断言锁定类型
是否想过要确保您的类型在整个代码中保持不变?这时 const 断言派上用场!把它们当做您的类型的强力胶。当您使用 as const 时, Typescript 会确保以后不会更改你的类型。这就像在您的变量上放一个 “请勿触碰” 的标志来保证他们的安全。
const user = {
id: 1,
name: 'John Doe',
email: 'john.doe@example.com',
} as const;
// 无法为“id”赋值,因为它是只读属性
// user.id = 2;
使用 Pick 创建自定义类型
假如您有一个很大的接口类型,但您只需要它的几个部分。没问题!使用 Pick 技巧,您可以创建一个只选择您需要的新类型。这就像在餐厅点单--您得到您想要的,没有任何额外的属性。
interface User {
id: number;
name: string;
email: string;
}
type UserSummay = Pick<User, 'name' | 'email'>;
const user: User = {
id: 1,
name: 'John Doe',
email: 'John.doe@example.com'
};
const summary: UserSummary = {
name: user.name,
email: user.email,
}
使用 Extract 缩小您的选择范围
有没有过很多选择(多个联合类型),但只需要几个特定的?这时需要 Extract 帮助!它就像一根魔杖,能从一系列选项中准确地挑出您需要的东西。告别猜测,迎接请确!
type Fruit = 'apple' | 'banana' | 'cherry' | 'date';
type TropicalFruit = Extract<Fruit, 'banana' | 'date'>;
const myFruit: TropicalFruit = 'banana';
// 不能将类型“"apple"”分配给类型“TropicalFruit”。
const myOtherFruit: TropicalFruit = 'apple';
保持类型的安全 Readonly
假设您有一些永远不应该更改的重要数据。这就是 Readonly 进来的地方!这就像吧您的数据放在一个安全的保险库与强大的锁。一旦您做了 Readonly,没有人能改变它。
const fruits: ReadonlyArray<string> = ['apple', 'banana', 'cherry'];
// 类型“readonly string[]”上不存在属性“push”。// fruits.push('date');// 类型“readonly string[]”上不存在属性“pop”。// fruits.pop();// 类型“readonly string[]”中的索引签名仅允许读取。// fruits[1] = 'orange';
掌握 keyof 操作符
曾经想知道对象中的建是什么吗?满足 keyof 您的有用工具! 它显示对象中的所有属性值,是其更容易使用数据。
interface User { id: number; name: string; email: string;}type UserKey = keyof User;const key: UserKey = 'name'; // Valid// 不能将类型“"age"”分配给类型“keyof User”。// const invalidKey: UserKey = 'age';
总结
使用五个简单的技巧来展示 Typescript 的全部功能:使用 const 断言来锁定类型,使用 Pick 创建自定义类型,使用 Extract 缩小选择范围, 使用 Readonly 保护数据,以及使用 keyof 运算符轻松处理对象属性。这些技巧将帮助您编写干净、更高效的代码。
关于这个话题就到这里。感谢您的阅读! 如果您觉得这篇文章有帮助,请考虑点赞,评论,并转载。