专栏首页方球typescript 入门-工具类型

typescript 入门-工具类型

type 类型别名

// 为某类型指定别名
type Name = string
type Age = number
type Man = {
  name: Name
  age: Age
}

const c: Man = {
  name: 'c',
  age: 20
}

keyof 对象键类型

type _Object = { [key: string]: unknown }

function getKeysByObj<T extends _Object>(o: T): (keyof T)[]{
  return Object.keys(o)
}

const a = {
  name: 'a',
  age: 12
}

const aKeys = getKeysByObj(a)
// aKeys: ('name' | 'age')[]

const b = {
  1: 'b',
  2: 20
}

const bKeys = getKeysByObj(b)
// bKeys: (1|2)[]

typeof 值类型

const a = {
  name: 'a',
  age: 23
}
// 通过 typeof b 获取 a的类型定义
const b: typeof a = {
  name: 'b',
  age: 10
}

/**
 * a 类型定义
 * {
 *   name: string,
 *   age: number
 *  }
 */

// 获取函数定义
function random(n: number): number{
  return Math.random() * n
}

type Random = typeof random
// (n:number) => number

Partial<T> 转为可选参数

interface Man {
  name: string,
  age: number
}
// 将Man的所有属性改为可选
type ManCopy = Partial<Man>

const cache: ManCopy = {}
// ManCopy { name?: string, age?: number }

Required<T> 将属性全转为必填

interface Data {
  id: string
  type?: string
}

type FullData = Required<Data>

const fd: FullData = {
  id: 'xx',
  type: 'su'
}

Readonly <T> 属性都转为只读

interface Data {
  id: string
  type?: string
}

type ReadonlyData = Readonly<Data>

const d:ReadonlyData = {
  id: 'xx',
}

d.id = 'cc'
//  Cannot assign to 'id' because it is a read-only property.

Record<K, T> 定义 K 为键, T 为值的映射类型

type keys = 'name' | 'job' | 'age'
type Man = Record<keys, string>

const m: Man = {
  name: 'm',
  job: 't',
  age: '10',
}

/**
 * {
 *  name: string,
 *  job: string,
 *  age: string
 * }
 */

Pick 提取指定属性,生成新类型

interface Man {
  id: string
  name: string
  age: number
  job: string
  birth: string
  address: string
}

// 提取指定属性类型
type ManIt = Pick<Man, 'name' | 'age' | 'job'>

const m: ManIt = {
  name: 'm',
  age: 25,
  job: 'tt'
}

/**
 * {
 *   name: string,
 *   age: number,
 *   job: string
 * }
 */

Omit 删除指定属性,生成新类型

type A = 'color' | 'width' | 'height'
type B = {
  name: string
  width: number
  height: number
}

type C = Omit<B, A>
// { name: string }

Exclude<K, T> 联合类型取 K,T 的差集

interface A{
  name: string
  color: string
}

interface B{
  name: string,
  width: number
}

type keys = Exclude<keyof A, keyof B>
type C = Record<keys, string>

const c: C = {
  color: 'orange'
}

/**
 * {
 *  color: string
 * }
 */

Extract<A, B> 联合类型取 A, B的并集

type A = 'color' | 'width' | 'height'
type B = 'name' | 'height'
type C = Extract<A, B>
// "height"

NonNullable 过滤类型内的 null 、 undefined、never

type A = 'data' | null | undefined | never
type B = NonNullable<A>
// type "data"

type T1 = NonNullable<null>
// never
type T2 = NonNullable<undefined>
// never
type T3 = NonNullable<never>
// nerver
type T4 = NonNullable<any>
// any
type T5 = NonNullable<string>
// string

Parameters<FN> 获取函数参数类型元组

function buildCar(name: string, color: string){
  return { name, color }
}

const args: Parameters<typeof buildCar> = ['xx', 'yy']
// ('string', 'string')

console.log(buildCar(...args))
// { name: 'xx', color: 'yy'

ConstructorParameters<constructor> 获取构造函数参数类型元组

class Car{
  name:string
  color:string

  constructor(name: string, color:string){
    this.name = name
    this.color = color
  }

}

interface CarConstructor{
  new (name: string, color:string): Car
}

const args:ConstructorParameters<CarConstructor> = ['mini', 'blue']
// type ['string', 'string']

const c = new Car(...args)

InstanceType<constructor> 获取构造函数返回值类型

class Car{
  name:string
  color:string

  constructor(name: string, color:string){
    this.name = name
    this.color = color
  }

}

interface CarConstructor{
  new (name: string, color:string): Car
}

type c = InstanceType<CarConstructor>
// type Car

ReturnType<T> 函数返回值类型

function getNumber(): number{
  return Math.random()
}

function getString(): string{
  return `${Math.random()}`
}

let a:ReturnType<typeof getNumber>
let b: ReturnType<typeof getString>

a = 10
b = 'msg'

Uppercase 字符字面量全大写

type Status = 'success' | 'fail'
type STATUS = Uppercase<Status>
// type "SUCCESS" | "FAIL"

Lowercase 字符字面量全小写

type Status = "SUCCESS" | "FAIL"
type status = Lowercase<Status>
// type "success" | "fail"

Capitalize 字符字面量首字母大写

type Status = "success" | "FAIL"
type status = Capitalize<Status>
// type "FAIL" | "Success"

UnCapitalize 字符字面量首字母小写

type Status = "success" | "FAIL"
type status = Uncapitalize<Status>
// type "success" | "fAIL"

ThisType 明确当前函数this的指向类型

// 没有ThisType情况下
const foo = {
    bar() {
         console.log(this.a); // error,在foo中只有bar一个函数,不存在a
    }
}

// 使用ThisType
const foo: { bar: any } & ThisType<{ a: number }> = {
    bar() {
         console.log(this.bar) // error,因为没有在ThisType中定义
         console.log(this.a); // ok
    }
}

foo.bar // ok
foo.a // error,在外面的话,就跟ThisType没有关系了

ThisParameterType 获取函数this指向类型

interface Car{
  name: string
  color: string
}

function getCarName(this: Car){
  console.log(this.name)
}

const c = {
  name: 'x',
  color: 'y',
}

getCarName.apply(c)
// x

type T = ThisParameterType<typeof getCarName>
// type Car
// 函数 getCarName this 类型指向Car

OmitThisParameter 获取一个没有this指向的函数类型

interface Car{
  name: string
  color: string
}

function getCarName(this: Car){
  console.log(this.name)
}

type T = OmitThisParameter<typeof getCarName>
// type () => void

const fn: T = () => {
  console.log('not name')
}

infer 替代推断类型

type Unpacked<T> =  T extends (infer U)[] ? U : T;

type T0 = Unpacked<string[]>; // string
type T1 = Unpacked<string>; // string

文档

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • TypeScript 工具类型 - Utility Types

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

    Jerry Wang
  • typescript入门-基础类型

    copy_left
  • typescript入门-高级类型

    类型保护就是一些表达式,它们会在运行时检查以确保在某个作用域里的类型。 既是通过一次类型判断,值在当前作用域下类型为确定值

    copy_left
  • typescript入门-类

    copy_left
  • TypeScript入门笔记(二):数据类型

    为了使编写的代码更规范,更有利于维护,增加了类型校验,写 ts 代码必须指定类型。typescript中除了es5中的常见数据类型之外还多了元组类型tuple、...

    王小婷
  • typescript入门-泛型

    copy_left
  • TypeScript中的高级类型工具类型及关键字

    本文主要帮助理解 TypeScript 中的高级类型及工具类型。在实际使用 TypeScript 的开发过程中,得益于这些高级类型于工具类型,我们可以更方便的构...

    路过的那只狗
  • TypeScript里的工具类型Partial的用法

    在SAP Spartacus的源代码里我们可以观察到很多Partial的使用场景:

    Jerry Wang
  • 手动测试入门:概念,类型,工具

    http://mpvideo.qpic.cn/0bf2eiaacaaaoeael35j4bpfaiwdaeraaaia.f10002.mp4?dis_k=cce...

    归根落叶
  • 类型即正义:TypeScript 从入门到实践(三):类型别名和类

    学习了注解函数,又了解了类型运算如联合类型和交叉类型,接下来我们来了解一些 TS 中独有的类型别名,它类似 JS 变量,是类型变量,接着我们还会学习 TS 中内...

    一只图雀
  • 类型即正义:TypeScript 从入门到实践(一)

    JavaScript 已经占领了世界上的每一个角落,能访问网页的地方,基本上就有 JavaScript 在运作,然而 JavaScript 因为其动态、弱类型、...

    一只图雀
  • 单元测试入门:是什么?类型和工具

    http://mpvideo.qpic.cn/0bf27yaaaaaa4yaiwavl6fpfb7wdad7aaaaa.f10002.mp4?dis_k=854...

    归根落叶
  • (三万字长文)类型即正义:TypeScript 从入门到实践系列,正式完结!

    Tim Berners-Lee 于1989年发明了万维网并于1991年对外发布了世界上第一个网页浏览器 WorldWideWeb,从此拉开了 Web 时代的序幕...

    一只图雀
  • 类型即正义:TypeScript 从入门到实践(序章)

    因为需要尽可能全且精炼的讲解 TypeScript 语法知识,所以我们需要一个恰到好处的实战项目,这一小节主要是用于讲解我们准备初始 TypeScript 版...

    一只图雀
  • 《TypeScript 中文入门教程》 1、基础数据类型

    为了让程序更易用,我们兼容几种最基本的数据类型:numbers(数字),strings(字符串),structures(结构),boolean(布尔值)等等。在...

    OECOM
  • 编写TypeScript工具类型,你需要知道的知识

    用 JavaScript 编写中大型程序是离不开 lodash 工具的,而用 TypeScript 编程同样离不开工具类型的帮助,工具类型就是类型版的 loda...

    WahFung
  • 1、TypeScript初识及环境搭建

    TypeScript最近很火,有很多开源的项目也是由其开发的,如果你是一名前端开发工程师或准备要成为一名前端开发工程师的话,现在如果再不学习TypeScript...

    用户1272076
  • TypeScript入门教程(一)

    本文是TypeScript的入门文章,将分别从下面四点对TypeScript进行介绍:

    前端林子
  • TypeScript是什么,为什么要使用它?

    从历史上看,JavaScript已经成为了在Internet上编写网页和应用程序脚本语言的主要语言。但是否能通过JavaScript创建大型复杂Web应用系统呢...

    葡萄城控件

扫码关注云+社区

领取腾讯云代金券