使用更具可读性的方式来设置 TypeScript 类型

开发 前端
TypeScript 提供了一些内置的实用类型,可以更好的方式将类型从一种形式转换到另一种形式。

[[405512]]

TypeScript 提供了一些内置的实用类型,可以更好的方式将类型从一种形式转换到另一种形式。

这些内置的类型全局可用的,所以可以很方便的使用它们。

TypeScript 泛型

在了解 TypeScript 实用、类型之前,类型别名和泛型很重要。我们以在TypeScript中为任何现有类型创建类型别名。

  1. type MyString = string; 
  2.  
  3. let helloWorldMessage: MyString = 'Hello Wisdom Geek'

泛型用于创建可重用的类型别名。假设我们有一个identity 函数,该函数返回传递的任何值:

  1. const identity = (arg: string): string => arg; 

如果我们要返回的是 number 类型怎么办?有小伙伴可能会用any代替特定的类型

  1. const identity = (arg: any): any => arg; 

但这减少了参数的类型信息,因此,也失去 TypeScript 带来的好处。我们想要以一种可以用来表示返回类型的方式来捕获参数的类型。这就是泛型派上用场的地方。我们将使用适用于类型而不是值的类型变量。

  1. const identity<T> = (arg: T): T => arg; 

接着,在调用它时指定函数的类型:

  1. const output = identity<string>("Hello Wisdom Geek"); 

TypeScript 中的内置实用类型

在开始讲解内置实用类型之前,这些工具类型在4.0版本之前是可用的,不需要任何额外的包。

Partial

Pritial<T>把 T 的所有属性变为可选。

  1. type BlogPost = { 
  2.   title: string; 
  3.   author: string; 
  4.  
  5. type PartialBlogPost = Partial<BlogPost>; 
  6. /* 等价于 { 
  7.   title?: string; 
  8.   author?: string; 
  9. } */ 

Required

Required<T>把 T 的所有属性变为必填的。

  1. type PartialBlogPost = { 
  2.   title?: string; 
  3.   author?: string; 
  4.  
  5. type BlogPost = Required<PartialBlogPost>; 
  6. /* 等价于 { 
  7.   title: string; 
  8.   author: string; 
  9. } */ 

Readonly

Readonly<T>把 T 的所有属性变为只读的。

  1. type BlogPost = { 
  2.   title: string; 
  3.   author: string; 
  4.  
  5. type BlogPost = Readonly<PartialBlogPost>; 
  6. /* 等价于 { 
  7.   readonly title: string; 
  8.   readonly author: string; 
  9. } */ 

Pick

Pick<T,K> 抽取T里的属性,属性来自K.

  1. type Point3D = { 
  2.   x: number, 
  3.   y: number, 
  4.   z: number, 
  5. }; 
  6.  
  7.  
  8. type Point2D = Pick<Point3D, 'x'|'y'>; 
  9. /* 等价于 { 
  10.   x: number, 
  11.   y: number 
  12. } */ 

Parameters

Parameters<T> T 是 Function,提取函数里返回值为 tuple。

  1. type T0 = Parameters<() => string>; 
  2. // type T0 = [] 
  3.  
  4. type T1 = Parameters<(s: string) => void>;  
  5. // type T1 = [s: string] 
  6.  
  7. type T2 = Parameters<<T>(arg: T) => T>; 
  8. // type T2 = [arg: unknown] 

Omit

Omit<T,K>和Pick相反(去除属性).

  1. type Point3D = { 
  2.   x: number, 
  3.   y: number, 
  4.   z: number, 
  5. }; 
  6.  
  7.  
  8. type Point2D = Omit<Point3D, 'z'>; 
  9. /* same as { 
  10.   x: number, 
  11.   y: number 
  12. } */ 

Record

Record<K,T>生成一个接口,属性为K的所有属性,k的所有属性都有T的类型

  1. type BlogPost = Record<'title' | 'author', strnig> 
  2.  
  3. /* same as { 
  4.   title: string; 
  5.   author: string; 
  6. } */ 

如果所有类型都具有相同的值,则声明的 Record 版本会更加简洁和可读,因为它们都具有相同的类型。

Extract

Extract<T, U> - 用于从类型T中取出可分配给U类型的成员

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

Exclude

Exclude<T, U> - 用于从类型T中去除不在U类型中的成员。

  1. type T0 = Exclude<"a" | "b" | "c""a">; 
  2.      // type T0 = "b" | "c" 
  3.  
  4. type T1 = Exclude<string | number | (() => void), Function>; 
  5.      // type T2 = string | number 

NonNullable

NonNullable<T>- 用于从类型T中去除undefined和null类型。

  1. type T0 = NonNullable<string | number | undefined>; 
  2.      // type T0 = string | number 
  3.  
  4. type T1 = NonNullable<string[] | null | undefined>; 
  5.      // type T1 = string[] 

ReturnType

ReturnType<T>- 获取函数类型的返回类型

  1. type T0 = ReturnType<() => string>; 
  2.       
  3. type T0 = string 
  4. type T1 = ReturnType<(s: string) => void>; 
  5.       
  6. type T1 = void 
  7. type T2 = ReturnType<<T>() => T>; 
  8.       
  9. type T2 = unknown 
  10. type T3 = ReturnType<<T extends U, U extends number[]>() => T>; 
  11.       
  12. type T3 = number[] 
  13.  
  14. type T5 = ReturnType<any>; 
  15.       
  16. type T5 = any 
  17. type T6 = ReturnType<never>; 
  18.       
  19. type T6 = never 
  20. type T7 = ReturnType<string>; 

InstanceType

InstanceType<T>- 获取构造函数的实例类型

  1. class C { 
  2.   x = 0; 
  3.   y = 0; 
  4.  
  5. type T0 = InstanceType<typeof C>; 
  6.       
  7. type T0 = C 
  8. type T1 = InstanceType<any>; 
  9.       
  10. type T1 = any 
  11. type T2 = InstanceType<never>; 
  12.       
  13. type T2 = never 

~完,我是小智。

更多实用类别,请自行看官网。https://www.typescriptlang.org/docs/handbook/utility-types.html#uppercasestringtype

作者:SARANSH KATARIA 译者:前端小智 来源:wisdomgeek

原文:https://www.wisdomgeek.com/development/web-development/typescript/using-utility-types-for-transforming-typescript-types/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:姜华 来源: 大迁世界
相关推荐

2021-01-26 09:18:27

Shell脚本网站

2023-10-30 18:05:55

Python类型

2021-10-09 10:24:53

Java 代码可读性

2020-11-08 14:36:27

pandas数据分析pipe()

2017-10-30 15:22:29

代码可读性技巧

2021-04-01 16:43:05

代码可读性开发

2015-08-27 13:11:18

JavaScript代码

2024-04-23 08:01:20

面向对象C 语言代码

2022-08-23 14:57:43

Python技巧函数

2017-12-19 16:24:20

2022-08-29 00:37:53

Python技巧代码

2019-12-03 09:32:32

JavaScript代码开发

2022-11-04 11:18:16

代码优化可读性

2024-01-31 08:04:43

PygmentsPython

2014-07-28 10:28:25

程序员

2014-07-29 09:55:33

程序员代码可读性

2023-01-30 08:16:39

Go语言Map

2011-09-22 16:10:09

编程语言

2023-08-07 08:00:58

GraphQL类型端点

2023-07-07 07:43:37

AutoMapper映射库
点赞
收藏

51CTO技术栈公众号