[ TypeScript | 青训营笔记]

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

首先我们先来讨论一下TypeScript有什么用，以及它跟JavaScript有什么区别。

ts是js的超集，它增加了一些js没有的功能以及类型（void/never/any/元组/枚举/以及一些高级类型）。

那么它有什么优点呢？

• 可读性强： 基于语法解析TSDoc， ide 增强
• 可维护性强：在编译阶段就暴露大部分错误
• 多人合作的大型项目中，获得更好的稳定性和开发效率

基础语法我们就不做过多的讨论了

TS中的泛型

ts中的泛型跟any很相似，但是any默认会丢失类型，但是泛型是不会丢失的，而是在函数调用的时候存储传入的参数类型，然后让返回时的类型为存储的参数类型

例如：

function demo<T> (v: T):T{
    return v
}

上述例子demo函数调用时 会自动去判断传入的参数是什么类型的 从而定义返回值的类型

泛型约束

有时候我们传入的值可能没有值或者属性，那么在使用泛型的时候就会报错。 比如：

function demo<T> (v: T):T{
    console.log(v.length)
    return v
}

如果上述例子的v上没有length属性 那么就会报错

所以我们这时候就需要使用到泛型的约束或者给泛型设置默认类型：

联合和交叉类型

简单理解就是： 联合类型是并集，交叉类型是交集

联合类型

const bookList = [{
        anthor: 'xiaoming',
        type : 'history',
        range: '2001-2021'
    },
    {
        anthor: 'xiaoli',
        type : 'store',
        theme: 'love'
    }
]

inferface IHistoryBook {
    anthor : String;
    tyoe: String;
    range: String
}
inferface IStoreBook {
    anthor : String;
    tyoe: String;
    range: String
}

type IBookList = Array<IHistoryBook | IStoreBook>;

交叉类型

const bookList = [{
        anthor: 'xiaoming',
        type : 'history',
        range: '2001-2021'
    },
    {
        anthor: 'xiaoli',
        type : 'store',
        theme: 'love'
    }
]

type IBookList = Array<{
    anthor : String;
} & ({
    type: 'history';
    range: String;
} | {
    type: 'store';
    range: String;
})>

上述例子我们可以很直观看出两者的区别
当我们使用联合类型赋值的时候，数据结构只能选择满足形如IHistoryBook或者形如IStoreBook
当我们使用交叉类型读取属性，可以获取所有类型的所有属性名，赋值的时候需要满足所有类型的结构

总结：今天在网上看了一些大佬写的文章，简单的梳理了一下，TypeScript有许多高级的用法，希望这篇总结可以帮助到有需要的人。