• typescript中的类型别名和字面量类型


    类型别名

    类型别名就是给一种类型起个别的名字,之后只要使用这个类型的地方,都可以用这个名字作为类型代替。它只是起了一个名字,并不是创建了一个新类型。

    定义类型别名,使用 type 关键字:

    type StringType = string
    let s: StringType
    s = 'hello'
    s = 123 // error,不能将类型“123”分配给类型“string”。

    类型别名也可以使用泛型:

    type PositionType<T> = { x: T, y: T }
    
    let p1: PositionType<number> = {
      x: 3,
      y: 5
    }
    
    let p2: PositionType<string> = {
      x: 'right',
      y: 'top'
    }

    使用类型别名时也可以在属性中引用自己:

    type Next<T> = {
      val: T,
      next?: Next<T> // 这里属性引用类型别名自身
    }
    
    let list: Next<string> = {
      val: 'first',
      next: {
        val: 'second',
        next: {
          val: 'third',
          next: 'test' // 这里不符合类型别名规定,导致最外层 next 报错
        }
      }
    }

    但要注意,只可以在对象属性中引用类型别名自己,不能直接使用,比如这样是不行的:

    type Child = Child[]

    这样定义后会循环引用自身,无法使用,记住类型别名不能出现在声明右侧的任何地方。

    类型别名和接口很类似,有时候起到同样作用:

    type Alias = {
      num: number
    }
    
    interface Interface{
      num: number
    }
    
    let _alias: Alias = {num: 1}
    
    let _interface: Interface = {num: 2}
    
    _alias = _interface

    例子中使用类型别名和接口都可以定义一个只包含 num 属性的对象类型,而且类型是兼容的。到底用接口还是类型别名,通过两点选择:

    1. 类型别名无法被 extends 和 implements,所以类型需要拓展时,需使用接口;

    2. 当无法通过接口,并且需要使用联合类型或者元组类型时,用类型别名。

    字面量类型

    字符串字面量类型

    字符串字面量类型其实就是字符串常量,与字符串类型不同的是它是具体的值:

    type Name = 'Tom'
    let name1: Name = 'Bob' // error,不能将类型“"Bob"”分配给类型“"Tom"”
    let name2: Name = 'Tom'

    还可以使用联合类型来使用多个字符串

    type Fruit = 'apple' | 'pear' | 'orange' | 'banana'
    
    let f1: Fruit = 'peach' // error,不能将类型“"peach"”分配给类型“Fruit”
    let f2: Fruit = 'apple'

    数字字面量类型

    数字字面量类型和字符串字面量类型差不多,都是指定类型为具体的值:

    type Age = 18
    
    let age1: Age = 17 // error,不能将类型“17”分配给类型“18”。
    let age2: Age = 18
  • 相关阅读:
    Python之美[从菜鸟到高手]--Python垃圾回收机制及gc模块详解
    linux-memory-buffer-vs-cache
    MYSQL----myownstars(102)
    win10系统调用架构分析
    on io scheduling again
    Java并发编程
    elixir-lang
    mydumper工作原理, seconds_behind_master的陷阱和pt-heartbeat (102)
    深入理解JavaScript系列+ 深入理解javascript之执行上下文
    我们应该如何去了解JavaScript引擎的工作原理 系列
  • 原文地址:https://www.cnblogs.com/wjaaron/p/12930899.html
Copyright © 2020-2023  润新知