TypeScript-高级类型

683 阅读3分钟

这是我参与8月更文挑战的第14天,活动详情查看:8月更文挑战

联合类型

联合类型也可以称为多选类型,当我们希望标注一个变量为多个类型之一时可以选择联合类型标注,或的关系

function css(ele:Element,attr:string,value:string|number ){
    
}

let box = document.querySelector('.box')
// document.querySelector 方法返回值就是一个联合类型
if(box){
    // TypeScript会提示null的可能性,加上判断更加严谨
    css(box, 'width', '100px'); 
    css(box, 'opacity', 1); 
    css(box, 'opacity', [1,2]); // 错误
}

交叉类型

交叉类型也可以称为合并类型,可以把多种类型合并到一起成为一种新的类型,并且的关系,对一个对象进行扩展

interface o1:{x:number; y:string}
interface o2:{z:number}

let o:o1&o2 = Object.assign({},{x:1,y:'2'},{z:100})

小技巧

TypeScript 在编译过程中只会转换语法(比如扩展运算符,箭头函数等语法进行转换,对于 API 是不会进行转换的(也没必要转换,而是引入一些扩展库进行处理的),如果我们的代码中 使用了 target 中没有的 API ,则需要手动进行引入,默认情况下 TypeScript 会根据 target 载入核心的类型库

target 为 es5 时: ["dom", "es5", "scripthost"]

target 为 es6 时: ["dom", "es6", "dom.iterable", "scripthost"]

如果代码中使用了这些默认载入库以外的代码,则可以通过 lib 选项来进行设置

www.typescriptlang.org/docs/handbo…

字面量类型

有的时候,我们希望标注的不是某个类型,而是一个固定的值,就可以使用字面量类型,配合联合类型会更好

function setPosition(ele: Element, direction: 'left' | 'top' | 'right' | 'bottom') { 
    // ... 
} 
// ok 
box && setDirection(box, 'bottom'); 
// error 
box && setDirection(box, 'hehe');

类型别名

又是类型标注比较复杂,这个时候我们可以给类型标注起一个相对简单的名字

type dir = 'left' | 'top' | 'right' | 'bottom'; 
function setPosition(ele: Element, direction: dir) { // ... }

使用类型别名定义函数类型

这里需要注意一下,如果是有type来定义函数类型,和接口有点不一样

type callback = (a:string)=>string
let fn:callback = function(a){};

//或者直接

let fn:(a:string) => string =function(a){}

interface与type的区别

interface

  • 只能描述Object/class/function的类型
  • 同名interface自动合并,利于扩展

type

  • 不能重名
  • 能描述所有数据

类型推导

每次都显示标注类型会比较麻烦,TypeScript提供了一种更加方便的特性:类型推导,TypeScript编译器会根据当前上下文自动的推导出对应的类型标注,这个过程发生在:

  • 初始化变量
  • 设置函数默认参数值
  • 返回函数值
// 自动腿短x为number
let x = 1;
// 不能将类型“a”分配给number
x = 'a';

// 函数参数类型,函数返回值会根据对应的默认值和返回值进行自行推断
function fn(a = 1){return a * a}

类型断言

有的时候,我们可能标注一个更加精确的类型(缩小类型标注的范围),例如:

let img = document.querSelector("#img")

我们可以看到img的类型为Element,而Element类型其实只是元素类型的通用类型,如果我们去访问src这个属性是有问题的,我们需要把它的类型标注的更加精准,HTMLImageElement类型,这个时候,我们就可以使用类型断言,它类似于一种类型转换

  let img - <HTMLImageElement>document.querySelector("#img")
  
  或者
  
  let img = document.querySelector('#img') as HTMLImageElement;

注意:断言只是一种预判,并不会对数据本身产生实际的作用,即:类似转换,但并非转换了