首页 前端知识 TypeScript类型注释

TypeScript类型注释

2024-09-28 23:09:42 前端知识 前端哥 843 93 我要收藏

1.类型注释

TypeScript类型种类如下

TypeScript基本类型:

number,string,boolean,bigint,symbol,null,undefined,never,void,any,unknown,值类型

对象类型:

class,object,Array,interface,JavaScript构造函数类型

高级类型:

enum,tuple,type,联合类型,交叉类型

1.1 TypeScript基本类型

1.1.1 TypeScrip和JavaScript基本类型区别

  • 大小写区别:

    TypeScript类型和JavaScript类型大小写不同。

  • 性能区别:

    JavaScript中这些类型是作为构造函数或工厂函数使用,TypeScript这些类型就是纯粹的类型,没有这些功能。虽然使用两者进行注释是等效的,但是使用TypeScript中这些类型会有更好的性能和内存管理能力(参考ChatGPT)。

1.1.2 void和never

never和void是语义相近的类型,never比void更加严格。

  • never表示不能是任何类型:

    // 使用后文提到的“类型别名”和“交叉类型”来获得never类型
    type variableA = string 
    type variableB = number
    //得到的variableC是never类型,因为string和number类型不可能取交集
    type variableC = variableA & variableB 
    
    // 指定一个函数返回值为never类型,这个函数永远不能被赋值,因为函数默认返回undefined
    let funcEmpty: () => never
    
  • void表示值只能是undefined:

    // 指定一个函数为空函数
    let funcEmpty: () => void = () => {}
    

1.1.3 any和unknown

  • any表示任何类型:

    any表示任何类型,不推荐使用,使用后效果和JavaScript相同。

  • unknown表示未知类型,操作需要检查:

    unknown表示任何类型,含义和any相同,但是比any严格,可以使用。在调用变量属性方法,或进行其它操作时不经过检查都是不合法的。

    let variable: unknown = 'hello'
    console.log(variable.length) // 报错,不能对unknown类型变量进行操作
    
    if(typeof variable === 'string')
        console.log(variable.length) // 合法,提前检测了类型
    

1.1.4 值类型

当声明时指定了具体值之后,变量赋值只能赋为该值,否则会发生错误

let variableA: 2
variableA = 2

1.1.5 其它基本类型

直接进行类型注释即可,较为简单

let variable: string = 'hello'

1.2 对象类型

1.2.1 object和Object

  • 不要使用object和Object进行注释:

    在1.1.1中提到了用object和Object进行类型注释是等效的。但是实际上不推荐使用object和Object进行类型注释。使用object和Object进行对象类型注释,TypeScript会认为对象不可修改,必须保持和空对象一致。

    let obj: object = {
        name: "Danny",
        age: 21
    }
    
    console.log(obj.name) // 报错,不允许访问name属性
    obj.gender = "male" // 报错,不允许修改对象
    console.log(obj.toString) // 合法,空对象原型上有toString方法
    
  • 使用对象字面量进行注释:

    如果要类型注释对象类型,推荐使用对象字面量。不过要注意的是,TypeScript是“静态类型检查语言”(参考编译原理),对于类型检查是严格的,在变量初始化时指定了要和对象字面量形式一致,因此下面添加或删除对象属性都是非法的。

    let obj: { name: string, age: number } = {
        name: "Danny",
        age: 21
    }
    
    console.log(obj.name) // 合法
    obj.gender = "male" // 不合法
    console.log(obj.toString) // 合法
    
  • 其它推荐的对象注释方式:

    在实际应用时使用对象字面量注释不具有复用性,通常使用“接口”,“类型别名”,“类”进行注释

1.2.2 Array

TypeScript中数组类型注释较为简单。string[]类型注释是泛型类型注释Array<string>的简写,效果相同。

在使用Array时要另外注意一点Array类型在类型推断时会被推断为数组元素个数不确定,详情参考“2.2.2数组推断”或“TypeScript泛型”博文。

// 类型注释一维数组
let ar1Dim: string[] = ['1', '2', '3']
// 类型注释二维数组
let ar2Dim: string[][] = [['11', '12', '13'], ['21', '22', '23']]

// 还可以使用内置Array泛型来声明,但是声明高维数组较麻烦
const ar1Dim: Array<string> = ['1', '2', '3']
const ar2Dim: Array<Array<string>> = [['11', '12', '13'], ['21', '22', '23']]

1.2.3 Function

1.2.3.1 声明函数
  • “函数表达式”声明函数:

    function func(arg1: string, arg2: number): void {}
    
  • “赋值语句”声明函数:

    const func = function(arg1: string, arg2: number): void {}
    
  • “箭头函数”声明函数:

    const func = (arg1: string, arg2: number): void => {} 
    
  • “接口或类型别名”声明函数:

    // 接口
    interface FuncInterface {
        (arg1: string, arg2: number): void // 语法糖:对象字面量中定义函数返回值可以用“:返回值”替代
    }
    const funcI: FuncInterface = (arg1: string, arg2: number) => {}
    
    // 类型别名
    type FuncAlias = (arg1: string, arg2: number) => void // 语法糖:描述箭头函数类型
    const funcA = (arg1: string, arg2: number) => {}
    
  • “函数签名”声明函数:

    // 函数签名可以由“接口”,“类型别名”实现
    interface Func {
        description: string;
        (arg1: string, arg2: number): void
    }
    
    function func(arg1: string, arg2: number): void {}
    
    func.description = "this is a function"
    
    const funcS: Func = func
    
1.2.3.2 注释函数
  • 不要使用Function:

    不要使用Function进行类型注释:在最后两种声明方法中和“object和Object”一样,在这里也不推荐用Function进行注释。Function太过于宽泛,没有指明参数类型和返回值类型。

  • 使用throw可以不用考虑返回值:

    如果函数中使用throw,说明函数无法正常返回值,当然默认返回undefined也是不生效的。在这里已经抛出了错误,所以不需要考虑和函数返回值的类型注释保持一致。

    function test(): string {
        throw new TypeError('test') // 合法
    }
    test() // 合法
    

1.2.4 Interface

1.2.4.1 描述接口

在描述接口换行时可以使用逗号或分号

interface STU {
    id: string,
    name: string,
    gender: string,
    age: number,
    getDetailInfo(id: string): { grade: number, location: string }
}
1.2.4.2 扩展接口
  • 使用extends关键字扩展接口:

    interface A {
        name: string
    }
    interface B extends A { // 此时实现接口B也必须含有接口A中的name
        age: number
    }
    
  • 使用覆写方式扩展接口:

    interface A {
        name: string
    }
    interface A {
        age: number // 此时效果和extends效果相同
    }
    
  • 使用交叉类型扩展接口:

    interface A {
    	name: string
    }
    interface B {
        age: number
    }
    type C = A & B
    
1.2.4.3 实现接口
1.2.4.3.1 类实现接口
  • 使用implements实现接口无法进行类型推断:

    后文要提到的“类型推断”是指在不进行类型注释时TypeScript会推测变量类型是哪一种,这类似于JavaScript的V8引擎中的“JIT”优化中的热处理(详情参考博客“JavaScript编译器和解释器”)。由于这里只有implements关键字,TypeScript无法推测类实现的接口中的方法的参数类型。

    class SDUer implements STU { // STU接口在上文已经实现
        constructor(public id: string, public name: string, public gender: string, public age: number) {}
        getDetailInfo(id) {
            return {
                grade: 100,
                location: '6'
            }
        }
    }
    
    let sduer = new SDUer('123', 'Danny', 'male', 21) 
    sduer.getDetailInfo(1234) // 虽然接口中指明了该方法接收的参数应为字符串,但是编译器不会报错
    
  • 解决类实现接口可能出现的潜在错误:

    由于implements导致无法进行类型推断,因此函数参数默认为any,这样会影响静态类型检查,可能会出现错误。

    可行的解决方案:

    • 配置tsconfig.json,开启严格模式,这样不允许any类型出现

    • 实现接口方法时主动添加参数类型

      getDetailInfo(id: string) {
          return {
              grade: 100,
              location: '6'
          }
      }
      
    • 声明对象时指定对象就是接口的实现

      let sduer: STU = new SDUer('123', 'Danny', 'male', 21) 
      
  • 类不能实现接口描述的构造函数:

    接口或类型别名可能使用这样的语法糖来描述构造函数:

    interface Constructor {
    	new (arg1: string, arg2: number): { name: string, age: number }
    }
    
    type Constructor = {
    	new (arg1: string, arg2: number): { name: string, age: number }
    }
    

    但是类不能实现这样的接口,因为构造函数属于类的独有成员,不应该由接口描述,不论尝试怎样实现,编译器都会报错。

    接口描述构造函数的场景应用较少,比较常见的一个场景就是“使用工厂函数创建对象

    // 通过接口来描述构造函数
    interface Constructor {
        new (name: string, age: number): { name: string, age: number }
    }
    
    // 构造构造函数所在的类
    class Person {
        constructor(public name: string, public age: number) {}
    }
    
    // 工厂函数
    function factory(constructor: Constructor, name: string, age: number): Person {
        return new constructor(name, age)
    }
    
    // 构造函数通过类名调用,所以将Person类传递过去
    console.log(factory(Person, 'Danny', 21))
    
1.2.4.3.2 对象实现接口
const sduStu: STU = {
    id: '1234',
    name: 'Danny',
    gender: 'male',
    age: 21,
    getDetailInfo(id: string) { // id可以不写类型注释,因为通过sdustu: STU可以推断出这里的id必须是string类型
        return {
            grade: 100,
            location: '6'
        }
    }
}
1.2.4.3.3 函数实现接口

函数实现接口的方法起始已经委婉地在上1.2.3中提到,就是“接口声明函数”和“函数签名声明函数”两种方式。

// 用接口声明函数
interface Cal {
    (a: number, b: number): number
}

const cal: Cal = (a, b) => a + b

1.2.5 其它构造函数类型

直接进行注释即可,较为简单

// JavaScript构造函数类型
let str: String = 'hello'

// 自定义class类型
class STU {
    public name: string
    public age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}
let stu: STU = new STU("Danny", 21)

1.3 高级类型

1.3.1 enum

使用enum声明一个枚举,枚举中又声明了若干枚举值,每一个枚举值又会有一个关联值。

1.3.1.1 默认枚举

默认从第一个枚举值开始关联0,往后关联1,2,3

enum Fruit {
    Apple,
    Orange,
    Melon
}

typescript的默认枚举在实现上实际是一个对象,对象中进行了反向映射

let Fruit = {
    Apple: 0,
    Orange: 1,
    Melon: 2,
    '0': 'Apple',
    '1': 'Orange',
    '2': 'Melon'
}

Fruit.AppleFruit[0]这两种访问形式都有应用场景

1.3.1.2 数值枚举

数值枚举要求给枚举值赋值为数值

enum Fruit {
    Apple = 2,
    Orange,
    Melon
}

反向映射结果为

let Fruit = {
    Apple: 2,
    Orange: 3,
    Melon: 4,
    '2': 'Apple',
    '3': 'Orange',
    '4': 'Melon'
}

也可以给全部枚举值指定关联值

enum Fruit {
    Apple = 2,
    Orange = 1,
    Melon = 4
}

反向映射结果为

let Fruit = {
    Apple: 2,
    Orange: 1,
    Melon: 4,
    '2': 'Apple',
    '1': 'Orange',
    '4': 'Melon'
}
1.3.1.3 字符串枚举

字符串枚举要求每个枚举值必须赋一个字符串关联值

enum Fruit {
    Apple = 'Apple',
    Orange = 'Orange',
    Melon = 'Melon'
}

反向映射结果为

let Fruit = {
    Apple: 'Apple',
    Orange: 'Orange',
    Melon: 'Melon',
}
1.3.1.4 混合枚举

混合枚举要求每个枚举值必须赋一个字符串或数值关联值。不推荐使用混合枚举,一般枚举值都有相关性,混合枚举破坏了相关的联系。

enum Fruit {
    Apple = 0,
    Orange = 'Orange',
    Melon = 'Melon'
}

反向映射结果为

let Fruit = {
    Apple: '0',
    0: 'Apple',
    Orange: 'Orange',
    Melon: 'Melon'
}
1.3.1.5 常量枚举

常量枚举在编译时会被删除,不产生枚举对应的对象形式,效率较高。因此声明常量枚举后直接访问枚举是非法的,只能访问枚举值。

const enum Fruit {
    Apple,
    Orange,
    Melon
}

console.log(Fruit) // 非法的
console.log(Fruit.Apple) // 合理的

因为不会生成对象形式,因此最后结果只会输出0

1.3.1.6 使用枚举的时机

在typescript中枚举,数组,对象相互之间的功能比较相似,需要在特定场景进行分析。

  • 语意明确时用枚举:

    当常量具有清晰明确的语意时,应该使用枚举类型。枚举类型为常量提供了明确的命名和类型,可以使代码更加可读和维护。

    enum DaysOfWeek {
      Monday,
      Tuesday,
      Wednesday,
      Thursday,
      Friday,
      Saturday,
      Sunday
    }
    
    function isWeekend(day: DaysOfWeek): boolean {
      return day === DaysOfWeek.Saturday || day === DaysOfWeek.Sunday;
    }
    
    isWeekend(DaysOfWeek.Saturday); // true
    
  • 值不需要变动用对象或数组:

    如果固定的值不会发生变化,可以考虑使用常量数组或对象。

    const weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
    const maxFileSize = { txt: 1024, jpg: 2048, gif: 3072 };
    
  • 值需要从动态来源获得用对象或数组

    如果值需要从动态来源获取,例如从后端API中获取,则应该使用对象或数组类型,并根据需要进行类型定义。

    interface User {
      id: number;
      name: string;
      role: "admin" | "member";
    }
    
    function hasAdmin(users: User[]) {
      return users.some(user => user.role === "admin");
    }
    
    // 从API中获取用户信息
    fetch("/users")
      .then(response => response.json())
      .then(data => {
        if (hasAdmin(data)) {
          // do something
        }
      });
    
1.3.1.7 枚举类型注释方法

枚举和枚举值都可以作为类型来进行注释。

  • (常用)注释为枚举类型:

    将变量注释为枚举类型,指的是变量的取值范围固定在枚举值的关联值当中。

    let variableEnum: Fruit = 0
    if(variableEnum === Fruit.Apple)
        console.log('Apple')
    else if(variableEnum === Fruit.Orange)
        console.log('Orange')
    else if(variableEnum === Fruit.Melon)
        console.log('Melon')
    else
        console.log('None')
    
  • 注释为枚举值类型:

    let variableA: Fruit.Apple
    variableA = 0
    

1.3.2 tuple

  • 元组确定性:

    元组确定了数组每个元素的类型以及数组的长度。数组只能规定每个元素的类型,不能确定数组长度。

    const tuple: [number, number] = [1, 2]
    const ar: Array<number> = [1, 2]
    const add = (a: number, b: number) => a + b
    add(...tuple) // 合法,元组长度固定,展开后add接收两个参数
    add(...ar) // 不合法,数组长度不确定,展开后接收未知个参数
    
  • 元组可选参数:

    在进行元组类型的注释时可以使用?表示元素可以不存在,但是只能在最后使用。

    type AnyTypeArray = [number, boolean?, string?]
    const ar: AnyTypeArray = [1] // 合法
    const ar: AnyTypeArray = [1, true] // 合法
    

    如果没有使用元组的可选元素,那么默认为undefined。元组的长度会包括类型注释时的可选参数。

    type AddParameters = [number, number, number?]
    const ar: AddParameters = [1, 2]
    
    const add = (a: number, b: number) => a + b
    add(...ar) // 报错,元组长度实际为3
    
  • 元组剩余参数:

    在进行元组类型注释时可以在非尾部使用剩余参数。

    type Tuple = [number, ...boolean[], string]
    const ar: Tuple = [1, 'hello']
    const arr: Tuple = [1, true, false, 'hello']
    

    ☆☆这种做法还可以实现JavaScript无法做到的函数形参声明。相当于可以在非末尾声明剩余形参。

    function handleUserInfo(...args: [number, ...string[], boolean]) {
        const [age, name, gender, location, isMarried] = args
        console.log(age, name, gender, location, isMarried)
    }
    
    // 使用效果相当炸裂
    handleUserInfo(21, 'Danny', 'male', 'WeiHai', true)
    
  • 只读元组:

    只读元组可以使用TypeScript内置的Readonly别名来声明

    const tuple: Readonly<[number, string]> = [21, 'Danny']
    const [userAge, userName] = tuple
    

    只读元组可以使用readonly关键字来声明

    const tuple: readonly [number, string] = [21, 'Danny']
    const [userAge, userName] = tuple
    

1.3.3 type

1.3.3.1 描述类型别名

使用类型别名指定已经存在的类型

// 使用类型别名指定为对象字面量类型
type School = {
    name: String,
    age: Number
}
let variable: School

// 使用类型别名指定为TypeScript基本类型
type str = string
1.3.3.2 扩展类型别名

类型别名一旦声明就只能通过&运算符进行扩展

type A = {
    name: string
}
type B = {
    age: number
}
type C = A & B // 合法
B.name: string // 非法

1.3.4 联合类型和交叉类型

1.3.4.1 联合类型

联合类型指的是用|来表示变量可以取不同的类型

let variableA: string | number | boolean
1.3.4.2 交叉类型

交叉类型指的是用&来表示变量取多种类型中的交集。

  • 对于接口,对象字面量类型:

    使用&交叉会合并属性,因为可以做到同时满足。

    interface A {
        name: string
    }
    interface B {
        gender: string
    }
    type C = A & B
    let obj: C = {
        name: 'Danny',
        gender: 'male'
    }
    
  • 对于普通类型:

    使用&交叉会直接取交集,因为无法同时满足。

    type TypeA = string | number
    type TypeB = number | boolean
    type TypeC = TypeA & TypeB
    let variable: TypeC = 123 // variable只能取数值类型
    

2.类型推断

合理利用类型推断可以使代码更简洁。不过要注意,尽可能不要被推断为any,在typescript严格模式下是不允许的。

2.1 类型推断方式

2.1.1 根据已有类型注释进行类型推断

下面函数的返回值一定是number类型,这是根据已有类型注释进行推断。

下面对象字面量实现接口,因为接口中已经显示指定类型且对象指定为接口的实现,那么实现的函数的参数将会被自动进行类型推断。

function cal(a: number, b: number) {
    return a + b
}

interface Test {
    work(a: number, b: number): void
}

const TestMaker: Test = {
    work: (a, b) => {}
}

2.1.2 根据变量值进行类型推断

下面会根据“hello”推测str为字符串类型。注意:除非显式指定变量为JavaScript值类型,否则不会被推测为JavaScript值类型。即下面的str不会被推测为“hello”类型。

let str = "hello"

2.2 类型推断特例

2.2.1 不进行类型推断

  • 类使用implements实现接口:

    例如使用类来实现一个接口中的check方法。注意:(tsc 5.1.3)由于没有类型注释,编译器无法进行类型推断。在实现接口方法时会认为参数均为any类型。

    interface CheckAble {
        check(name: string): boolean
    }
    
    class NameChecker implements CheckAble {
        check(s) {
            return true
        }
    }
    
    let nc = new NameChecker
    nc.check(123) // 编译不会报错
    

    添加类型注释,更规范地实现接口。(1)可以在声明变量时添加类型注释,指明是实现接口的变量(2)可以在类实现check方法时对参数进行类型注释

    interface CheckAble {
        check(name: string): boolean
    }
    
    class NameChecker implements CheckAble {
        check(s) {
            return true
        }
    }
    
    let nc: CheckAble = new NameChecker
    nc.check(123) // 编译会报错
    
  • 回调函数传参:

    该内容会在“TypeScript函数”博文中详细介绍,指的是回调函数实参个数可以少于形参个数。

    const filter = <T>(ar: Array<T>, callback: (el: T, idx: number, arr: Array<T>) => boolean): Array<T> => ar.filter(callback)
    
    console.log(filter([1, 2, 3, 4], el => !!(el % 2))) // 只给callback传了第一个参数,少于形参要求的三个参数
    

2.2.2 数组推断

  • 字面量创建数组将被推测为数组:

    在不进行类型注释时ar不会被推断为元组

    const ar = [1, 2, 3]
    
  • 数组长度推断:

    在对数组进行推断时,默认认为数组类型大小是不固定的(参考“TypeScript对象”博文)。这也是为什么我们特别地提出元组中元素个数是确定的的原因。

    const add = (a: number, b: number) => a + b
    
    const ar = [1, 2]
    console.log(add(...ar)) // 报错,推测ar为number数组类型且个数不确定,展开后不是确定的两个元素,与函数形参要求不匹配。
    
    const ar = [1, 2] as const
    console.log(add(...ar)) // 合法,使用类型断言将数组推断为元组,此时数组元素个数确定
    

2.2.3 值类型推断

值类型推断优先度最低,如果不显示地进行类型注释,则一定不会被推断为值类型

let str = "hello" // 推断为string类型而不是“hello”类型
let str2: "hello" = "hello" // 显示指定str2为“hello”类型

3.类型断言

类型断言用在表达式之后,是一种显示类型转化的方法

3.1 类型推断断言

  • 类型注释优先级大于类型推断断言:

    一旦进行了类型注释,再进行类型断言不会影响变量最终类型的推理。下面的例子虽然断言num是any,但是已经确认了num是number类型,所以最终num是number类型,访问length属性是非法的。

    const num: number = 123 as any
    num.length // 报错,num是number类型
    

    下面的例子没有进行类型注释,此时使用类型断言会影响类型推断过程的走向。此时num被推测为any类型,访问length合法。

    const num = 123 as any
    num.length // 合法
    

    ☆☆下面的例子很有代表性,默认字面声明数组类型会被推断为数组,但是会认为数组长度未知,在使用展开符展开后作为实参传给函数,函数会认为你传递了未知数量的参数。这时候就需要类型断言,使用特殊的类型断言as const说明对象是只读的,因此每个元素的类型固定下来,长度也固定下来,这时候数组会被推断为元组。这样就可以展开后作为剩余实参传给函数。

    const ar = [1, 2] as const // as断言使得ar被推断为元组
    const add = (a: number, b: number) => a + b
    add(...ar) // 合法
    

    ☆☆下面的例子也有代表性。在理解了上面的例子后可以知道,一旦进行了类型注释,那么son就是Father类型。

    interface Father {
        name: string,
        age: number
    }
    
    interface Son extends Father {
        gender: string,
        getInfo: () => void
    }
    
    const son: Father = { 
       name: 'Danny',
       age: 21
    } as Son
    
    son.getInfo() // 报错,son是Father类型,没有getInfo方法
    son.gender // 报错,son是Father类型,没有gender属性
    
  • 类型推断断言不能用于无交集的类型:

    类型断言可以将123推断为any,也可以将any推断为123。即可以在具象和非具象之间断言,但是不能在无关类型间断言。

    下面的例子说明了字符串不可能被推断为数值。

    const variable = 'hello' as number // 报错,我们希望将variable推断为number类型,但是这一定不可能发生
    

    下面的例子说明了数组不可能被推断为元组。

    const ar: Array<number> = [1, 2] as const // 报错,我们希望将ar推断为元组,但是已经指定了ar为数组,数组类型长度在TypeScript中被认为是不确定的,所以ar一定不可能被推断为元组
    
    const arr: ReadonlyArray<number> = [1, 2] as const // 报错,理由同上(如果不了解as的机理,这种结果对于初学者可能难以理解)
    
  • 显示类型转化:

    除去JavaScript中的显示类型转化,TypeScript中显示类型转化有两种:(1)使用类型断言(2)在变量前使用<>改变其类型

    const ar = [1, 2] as const
    const ar = <const>[1, 2]
    
    const ar: ReadonlyArray<number> = [1, 2, 3]
    const arr: Array<number> = [4, 5, 6]
    

3.2 非空赋值断言

  • 类型注释优先级大于非空赋值断言:

    还是和类型推断断言as一样,类型注释一旦确定,我们无法再影响类型推断

    const str: null = null ! 
    console.log(str.length) // 报错,// 我们希望str被推断为非空,但是类型注释已经说明str为空,因此str一定不会被推断为非空
    

    下面这个例子说明非空赋值断言的应用场景

    const str = Math.random() + 0.5 > 0.5 ? 'hello' : null !
    
    console.log(str.length) // 合法,Math.random() + 0.5一定大于0.5,我们希望str被推断为非空。否则str会被推断为联合类型
    

    下面这个例子说明了非空赋值断言可以被类型推断断言替代

    const str = (Math.random() + 0.5 > 0.5 ? 'hello' : null) as string
    
    console.log(str.length) // 合法
    

4.类型操作符

4.1 keyof操作符

keyof操作符用于获取对象的键的类型

  • keyof用法:

    keyof操作符用于操作一个类型,返回该类型的所有键对应的类型。

    interface User {
    	name: string,
        age: number
    }
    type UserKey = keyof User
    const user: UserKey = 'name' // 合法
    const user2: UserKey = 'age' // 合法
    const user3: UserKey = '123' // 非法,UserKey的类型就是"name" | "age",其它任何值都不能取
    
  • keyof操作对象:

    注意类型操作符keyof操作的是类型,不能操作值

    const obj = {
        name: "Danny",
        age: 21
    }
    type ObjAlias = keyof obj // 报错,obj是值不是类型
    
  • keyof操作结果:

    因为对象的键是确定的,因此操作结果只可能是“数值类型”或“字符串值类型”或“符号值类型”。

    const alias = Symbol('alias')
    
    interface User {
        name: string,
        age: number,
        [alias]: symbol,
        [index: number]: string
    }
    
    type Type = keyof User
    
    // 操作结果是符号,是值类型Symbol('alias')
    const user: Type = alias
    // 操作结果是字符串,是值类型“name”
    const user2: Type = "name"
    // 操作结果是number
    const user3: Type = 123
    

4.2 typeof操作符

typeof操作符用于获取值的类型

  • typeof用法:

    typeof操作符与keyof操作符恰好相反,typeof操作符作用于值类型。

    在TypeScript中修改了typeof操作符的功能,不再是像JavaScript中只返回字符串,而是会返回类型。

    const num: number = 123
    type Num = typeof num
    const myNum: Num = 456
    
    // typeof作用于对象不会返回object或Object
    const user = {
        name: 'Danny',
        age: 21,
        gender: 'male'
    }
    type User = typeof user
    const myUser: User = {
        name: 'Cathy',
        age: 21,
        gender: 'male'
    }
    

4.1 索引签名

索引签名指定了对象的键和值分别应该为什么类型

  • 键只能指定为数值或字符串类型:

    interface User {
        [index: number]: string // 合法
    }
    interface User {
        [index: string]: any // 合法
    }
    interface User {
        [index: symbol]: string // 非法,索引签名中键的类型只能被指定为number或string
    }
    
  • 索引签名引起的冲突:

    • 索引签名只应存在一个:

      interface User {
          [index: number]: string // 合法
          [index: string]: string // 合法,但没有意义。number键名会默认转化为string类型
      }
      
      interface User {
          [index: number]: string // 合法
          [index: string]: number // 报错,索引签名不能同时满足值既是string又是number
      }
      
    • 索引签名和已有属性冲突:

      interface User {
      	age: number, // 报错,下面的索引签名要求了所有键对应的值都应该为string类型
      	[index: string]: string
      }
      

4.4 索引访问操作符

索引访问操作符用于获取对象值的类型

  • 索引访问操作符用法:

    索引访问操作符是[],其中接收某一种类型。通过这种类型去对象(接口或别名)中寻找其对应的值。

    这里容易理解错误的是形如User["name"],你可能认为这里的“name”只是字符串,但是实际上它是“name”值类型。这也是解释了为什么在处理符号类型的键时要使用typeof alias的原因,因为[]操作符中只能接收类型而不是值。

    const alias = Symbol.for('alias')
    interface User {
        name: string,
        age: number,
        [alias]: boolean,
    }
    
    type UserAliasType = User[typeof alias] // 注意这里不是alias,是symbol.for('alias')类型,因为[]接收类型而不是值
    type UserNameType = User["name"] // 这里的“name”不是字符串,而是“name”值类型
    type UserAgeType = User["age"] // 这里的“age”同理也是“age”值类型
    
    const myAlias: UserAliasType = true
    const myName: UserNameType = 'Danny'
    const myAge: UserAgeType = 21
    
  • 索引访问操作符访问索引签名:

    访问索引签名键对应的值时,可以通过number,string或具体的number值类型来进行访问

    // 设定索引键为string
    interface User {
        name: string
        [index: string]: string
    }
    type UserSignType = User[string] // 合法,通过string类型访问
    const mySign: UserSignType = 'hello'
    
    // 设定索引键为number
    interface User {
        name: string
        [index: number]: string
    }
    type UserSignType = User[number] // 合法,通过number类型访问
    type UserDetailType = User[1] // 合法,通过number值类型访问
    const mySign: UserDetailType = 'hello'
    

    复杂的类型提取示例(源自TypeScript官网)

    const MyArray = [
      { name: "Alice", age: 15 },
      { name: "Bob", age: 23 },
      { name: "Eve", age: 38 },
    ];
    
    type Age = typeof MyArray[number]["age"]; // 先通过typeof得到Array类型,再通过[number]访问索引类型得到{ name: string, age: number}类型,再通过["age"]索引访问得到number类型
    
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18694.html
标签
评论
发布的文章

jQuery QueryBuilder 教程

2024-10-29 23:10:44

水球图 及各种参数设置

2024-10-29 23:10:13

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!