TypeScript 常用操作符介绍

刘圣凯
123 阅读2分钟

前言

现在很多公司的项目在业务开发中都要求使用 TypeScript来保证代码的可读性和质量， 但是不少人对TypeScript的认知还比较浅薄，本文会介绍在TypeScript中常用的操作符, 旨在帮助刚刚接触TypeScript的开发人员能更深的认识以及更好的使用它

正文

typeof

在 TypeScript 中,typeof 用于获取一个变量或对象的数据类型

const userInfo = {
  name: '',
  phone: ''
}
type IUserInfo = typeof userInfo
// 等同于
type IUserInfo = {  
  name: string;
  phone: string;
}

keyof

在 TypeScript 中,keyof 是索引访问操作符,用于获取对象的键组成的联合类型。 假设我们需要约束某个值是对象的key，那么可以这样写：

const obj = {
  name: 'jack',
  age: 18
}

type Keys = keyof typeof obj
const objKey: Keys = 'name'

// 相当于如下写法，此时objKey对象是值只能是 'name' 或者 'age'
type Keys = "name" | "age"

in

在 TypeScript 中,in 用于遍历类型 假设我们需要根据一个字面量类型的联合类型生成一个对象， 字面量最为对象的key，那么我们可以这样写：

type Keys = "a" | "b" | "c" 
type Obj = { 
  [P in Keys]: string
}
const keysObj:Obj = {
  a: '',
  b: '',
  c: ''
}
// 相当于如下写法，约束了 keysObj 这个对象只包含 a,b,c 三个键且值为 string
type Obj = { 
  a: string;
  b: string;
  c: string;
}

extends

在TypeScript中,extends 主要用于两个场景:条件类型和泛型约束。 假设我们有这么一个场景，某个函数参数接受一个带有name属性的对象类型，那么我们可以通过泛型约束来实现

interface IName {
  name: string
}

function func<T extends IName>(obj: T) {
  console.log(obj.name)
}

func({ name: '', age: '' })

那么如何使用 extends 实现条件类型呢， 假设这么一个场景，我们需要声明一个 IUser 类型，这个类型中的某个属性类型需要依赖另一个属性变化而变化，那么我们可以这样写：

interface IUser {
  name: string
  identity: string[] | 'admin'
  auth: IUser['identity'] extends string ? string : string[]
}

// 如果 identity 是一个字符串，那么auth的类型同样会被校验成字符串

const p: IUser = {
  name: '',
  identity: 'admin',
  auth: ''
}

模板字面量操作符

在TypeScript中,模板字面量操作符其实和JS的方式一致，假如我们要约束一个字符串，它需要用el开头，那么我们可以这样写：

type ElClass = `el${string}`

const a: ElClass = 'elTable'

// 这样就约束了a的值需要是el开头的字符串，否者就会报错
console.log(a);

文末

随着 TypeScript 的日益普及，它为JavaScript 开发者提供了强大的类型系统，帮助我们构建更健壮、更易于维护的应用程序。希望今天的文章对你有帮助

avatar
文章
阅读
粉丝