当前位置:首页 > 域名

比同事更秀? TS 这七个方法,你需要知道的!

TypeScript 中的比同类型系统是非常强大的。它为我们提供了类型安全。事更类型系统虽然受人喜爱,秀T需知但如果我们不规划和设计类型和接口,比同它也会让我们的事更代码变得混乱难读。

泛型

避免代码重复中,秀T需知创建可重用的比同类型,是事更我们编写简洁代码重要的一环。泛型是秀T需知 TypeScript 的一个功能,它允许我们编写可重用的比同类型。看下面的事更例子:

type Add<T> = (a: T, b: T) => T const addNumbers: Add<number> = (a, b) => {    return a + b } const addStrings: Add<string> = (a, b) => {    return a + b } 

将正确的类型放入Add的泛型中,它可以被用来描述两个数字的秀T需知相加或两个字符串的连接。我们不需要为每个函数写一个类型,比同而只需要用泛型做一次。事更这不仅节省了我们的秀T需知精力,而且还使我们的代码更加简洁,更不容易出错。站群服务器

实用类型

TypeScript 原生提供了几个有用的实用类型来帮助我们进行一些常见的类型转换。这些实用类型是全局可用的,它们都使用了泛型。

下面这7个是我经常用到的。

1. Pick<Type, Keys>

Pick会从 Type 中挑选属性集 Keys 来创建一个新的类型,Keys 可以是一个字符串字面或字符串字面的联合。Keys 的值必须是 Type 的键,否则TypeScript编译器会抱怨。当你想通过从有很多属性的对象中挑选某些属性来创建更轻的对象时,这个实用类型特别有用。

type User = {    name: string   age: number   address: string   occupation: string } type BasicUser = Pick<User, "name" | "age"> // type BasicUser = {  //   name: string; //   age: number; // } 

2. Omit<Type, Keys>

Omit与Pick相反。Keys 不是说要保留哪些属性,而是指要省略的属性键集。当我们只想从对象中删除某些属性并保留其他属性时,这个会更有用。

type User = {    name: string   age: number   address: string   occupation: string } type BasicUser = Omit<User, "address" | "occupation"> // type BasicUser = {  //   name: string; //   age: number; // } 

3. Partial<Type>

Partial 构造了一个类型,网站模板其所有的类型属性都设置为可选。当我们在编写一个对象的更新逻辑时,这个可能非常有用。

type User = {    name: string   age: number   address: string   occupation: string } type PartialUser = Partial<User> // type PartialUser = {  //   name?: string; //   age?: number; //   address?: string; //   occupation?: string; // } 

4. Required<Type>

Required与Partial相反。它构造了一个类型的所有属性都是必填的类型。它可以被用来确保在一个类型中没有可选属性出现。

type PartialUser = {    name: string   age: number   address?: string   occupation?: string } type User = Required<PartialUser> // type User = {  //   name: string; //   age: number; //   address: string; //   occupation: string; // } 

5. Readonly<Type>

Readonly 构建了一个类型,其类型的所有属性被设置为只读。重新分配新的值 TS 就会报错。

type User = {    name: string   age: number   address: string   occupation: string } type ReadOnlyUser = Readonly<User> const user: ReadOnlyUser = {    name: "小智",   age: 24,   address: "厦门",   occupation: "大迁世界" } user.name = "王大冶" // Cannot assign to name because it is a read-only property. 

7. ReturnType<Type>

ReturnType 从一个函数类型的返回类型构建一个类型。当我们处理来自外部库的函数类型并希望基于它们建立自定义类型时,它是非常有用的。

import axios from axios type Response = ReturnType<typeof axios> function callAPI(): Response{    return axios("url") } 

除了上面提到的,还有其他实用类型可以帮助我们编写更干净代码。关于实用工具类型的TypeScript文档链接可以在这里找到。

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

实用类型是TypeScript提供的非常有用的功能。开发人员应该利用它们来避免硬编码类型。云南idc服务商要比同事更秀? 这些就是你需要知道的!

~完,我是刷碗智,准备去去那个了,我们下期见!

作者:juno ng 译者:前端小智

来源:medium 原文:https://medium.com/ng/7-utility-types-that-every-typescript-developer-should-know-788fe73421f1

【编辑推荐】

为什么说,MQ,是互联网架构的解耦神器? Prometheus告警规则管理 最高法、人社部:“996”严重违法!取消“996”,你们公司提上日程了吗? Python正面硬刚C语言,结果会怎样? CNNIC:我国已成为6G专利申请的主要来源国

分享到:

滇ICP备2023006006号-16