TypeScript 基础语法——高级类型
联合类型
联合类型也叫多选类型，通常用于我们需要标注的变量为其中之一时
function(id:number,username:string,value:string|number):void{} 复制代码交叉类型
交叉类型也称合并类型
interface o1{x:number,y:string} interface o2{z:number} let o:o1&o2 = Object.assign({},{1,'hello world'},{2}) 复制代码字面量类型
有的时候，我们希望标注的不是某个类型，而是一个固定值，就可以使用字面量类型，配合联合类型会更有用
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
不能重名
能描述所有数据
类型断言
有的时候，我们可能标注一个更加精确的类型（缩小类型标注范围），比如：
let img = document.querySelector('#img'); 复制代码我们可以看到 img 的类型为 Element，而 Element 类型其实只是元素类型的通用类型，如果我们去访 问 src 这个属性是有问题的，我们需要把它的类型标注得更为精确：HTMLImageElement 类型，这个 时候，我们就可以使用类型断言，它类似于一种 类型转换：
let img = <HTMLImageElement>document.querySelector('#img'); 复制代码或者
let img = document.querySelector('#img') as HTMLImageElement;
作者：GW
链接：https://juejin.cn/post/7022794355534462989