• TS之类型推论、联合类型、类型断言


    1.类型推论

    TS中,没有明确指出类型的地方,类型推论会帮助提供类型。如下面的例子:

    let x = 3

    这里的x就被推断为数字,这种推断发生在初始化变量和成员,设置默认参数值和决定参数返回值时。 

    如果要从几个表达式中推断类型的时候,会使用这些表达式的类型来推断出一个最合适的通用类型。例如:

    let x = [0, 1, null];

     为了推断x的类型,我们必须考虑所有元素的类型。 这里有两种选择: numbernull。 计算通用类型算法会考虑所有的候选类型,并给出一个兼容所有候选类型的类型。

    2.联合类型

    当一个变量的属性无法确定的时候就可以用到联合类型(union type)。如:

    let nOs: number | string
    
    nOs = 123
    nOs = "abc"

    上面代码表示nOs这个变量的类型可以是number或者是string。

    注意的是,如果TS不确定一个联合类型的变量是哪个类型的时候,只能访问此联合类型的共有的属性/方法。如:

    这里只有number和string类型共有的这三个方法供选择。

    3.类型断言

    TS告诉的类型断言的作用是告诉编译器,我自己比编译器更了解这个类型,并且不应该报出错误来。示例:

    function getLength(input: string | number): number {
      const str = input as string
      if (str.length) {
        return str.length
      } else {
        const number = input as number
        return number.toString().length
      }
    }
    // 不能断言成一个不存在的类型
    
    let nl = getLength(123)
    let sl = getLength("abc")

    上面代码使用as关键字手动将str变量断言为string和number属性。且不能断言成一个不存在于参数中定义的类型。

    上面功能还可以使用typeof关键字来实现:

    function getLength(input: string | number): number {
      const str = input as string
      if (typeof input === "string") {
        return input.length
      } else {
        return input.toString().length
      }
    }
  • 相关阅读:
    使用CSS3实现超炫的Loading(加载)动画效果
    三种简洁的经典高效的DIV+CSS制作的Tab导航简析
    Span和Div的区别
    [总结]Jquery api 快速参考
    25个可遇不可求的jQuery插件
    基于单个 div 的 CSS 绘图
    一款基于jQuery的图片场景标注提示弹窗特效
    HTML5手机开发——滚动和惯性缓动
    发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
    CSS框架BluePrint
  • 原文地址:https://www.cnblogs.com/codexlx/p/14442000.html
Copyright © 2020-2023  润新知