这是我参与「第五届青训营」伴学笔记创作活动的第 7 天

一、TypesSript的高级类型

1、联合/交叉类型

联合类型： A | B，表示一个值可以是几种类型之一
let a1:'a' | 'b' | 'c';
let a2:1|2|3 ;

交叉类型： A & B，多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

interface Dog{ run():void } 
interface Cat{ jump():void } 
let pet:Dog & Cat={ run(){}, jump(){} }
复制代码

2、字面量类型

在typescript中，字面量不仅可以表示值，还可以表示类型，即字面量类型。
比如字符串字面量类型：

type Name = "TS";
const name1: Name = "js"; // 错误，不能将类型"js"分配给类型“"TS"”
const name2: Name = "TS"; 
复制代码

还有数字字面量类型：

type Age = 18;
interface Info {name: string;age: Age;}
const info: Info = {name: "TS",age: 38}; // 错误，不能将类型“38”分配给类型“18” 
复制代码

除此之外，还有布尔字面量类型与模板字面量类型

3、类型保护和类型守卫

类型保护： 类型保护是指缩小类型的范围，在一定的块级作用域内由编译器推导其类型，提示并规避不合法的操作，提高代码质量。实际上是一些表达式，它们会在运行时检查以确保在某个作用域里的类型。

一般有：typeof、instanceof、in、is

类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域（最好在俩个各个类型完全没有交集时使用）

interface IA {
    a: 1, 
    a1: 2
}

interface IB {
    b: 1, 
    b1: 2
}

// 类型守卫：定义一个函数，返回值是一个类型谓词
function getIsIA(arg: IA | IB): arg is IA {
    return !!(arg as IA).a;
}

function log(arg: IA | IB) {
    if (getIsIA(arg)) {
        console.log(arg.a1);
    } else {
        console.log(arg.b1);
    }
}
复制代码

二、工程应用

浏览器web：

webpack： webpack loader配置后，配置tsconfig.js文件，运行webpack可进行启动打包，然后loader在处理ts文件时会进行编译和类型检查。
babel： 除了webpack，在开发中还经常需要结合babel来对代码进行转换，使其能够兼容更多的浏览器。

node.js：

安装node与npm之后，配置tsconfig.js文件，然后使用npm安装TSC，最后使用TSC运行编译得到js文件

认识Typescript2|青训营笔记