乐趣区

关于前端:比同事更秀-TS-这7个方法你需要知道的

jiezi

作者：juno ng
译者：前端小智
起源：medium

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

TypeScript 中的类型零碎是十分弱小的。它为咱们提供了类型平安。类型零碎尽管受人青睐，但如果咱们不布局和设计类型和接口，它也会让咱们的代码变得凌乱难读。

泛型

防止代码反复中，创立可重用的类型，是咱们编写简洁代码重要的一环。泛型是 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 的泛型中，它能够被用来形容两个数字的相加或两个字符串的连贯。咱们不须要为每个函数写一个类型，而只须要用泛型做一次。这不仅节俭了咱们的精力，而且还使咱们的代码更加简洁，更不容易出错。

实用类型

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.or…

实用类型是 TypeScript 提供的十分有用的性能。开发人员应该利用它们来防止硬编码类型。要比共事更秀? 这些就是你须要晓得的！

~ 完，我是刷碗智，筹备去去那个了，咱们下期见！

原文：https://medium.com/ng/7-utili…

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://learue.co/2020/01/a-v…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版