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

什么是TypeScript

TypeScript发展历程

TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。

• 2012-10：微软发布了TypeScript第一个版本(0.8)
• 2014-10：Angular发布了基于TypeScript的2.0版本
• 2015-04：微软发布了Visual Studio Code
• 2016-05：@types/react发布，TypeScript可发开React
• 2020-09：Vue发布了3.0版本，官方支持TypeScript
• 2021-11：v4.5版本发布

什么是TypeScript

静态类型

• 可阅读性增强：基于语法解析TSDoc，ide增强
• 可维护性增强：在编译阶段暴露大部分的错误

JS的超集

• 包含兼容所有JS特性，支持共存
• 支持渐进式引入与升级

图解：

实战

基本语法

准备工作

1.下载全局包，cmd下输入
npm i -g typescript
2.输入检查是否安全成功
tsc -v
3.打开编辑器创建后缀为.ts的文件

基础数据类型

• number
• string
• boolean
• null
• undefined
• symbol

声明数据类型方式
let 变量名 : 数据类型 = 值;
let num : number = 18;

//类型别名 :  常用于类型比较长的情况意思是两种类型都可以
type sn =  string | number;
let sty : sn = 'asasd';

对象类型

//interface接口属性 只能为对象指定类型。它可以继承。
interface OBj {
    // 只读属性： 约束属性不可在对象初始化外赋值
    readonly age : number,
    name: string,
    //只能定义值为 man 或者 wj
    sex: 'man' | 'wj',
    // 可选属性：定义该属性可以不存在
    hobby?: string,
    // 任意属性：约束所有对象属性都必须是该属性的子类型
    [key:string] : any,
    //当类型设置为any时，就取消了类型限制，一般不推荐
}

const bytedancer:OBj = {
    name : 'Lin',
    age : 18,
    sex : 'wj',
}

对象类型知识点

1.interface(接口)：只能为对象指定类型，它可以继承。继承使用extends关键字。

interface fn extends fs{
   // fn 继承了 fs 拥有 fs的所有方法
}  

2.readonly关键字：只读属性不可修改。
3.any数据类型：任意数据类型。

函数类型

函数类型：分别需要设置传入的值和返回的值数据类型。

//1.提前接口声明
interface method{
    //传入x，y，以及返回值都必须是number
    (x:number,y:number) : number
}
const mult : method = (x,y) => x * y
//2.声明式实际写法:
function add(x:number,y:number) : number {
    return x + y;
}
//3.箭头函数
const mults : (x:number,y:number) => number =(x,y) => x+y

如果一个函数没有返回值，应该使用 void 类型

数组类型

//数组
// 类型+[] 表示全部
type Arr1 = number[];
// 泛型表示
type Arr2 = Array<String | number | Record<string,number>>
//元组表示
type Arr3 = [string,number,number]
//接口表示
interface Arr4{
    [key:number] : any; 
}

let arr : Arr2 = [1,'ds',{asd:121}]

数组知识点

1. 泛型：泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制一种特性。
2. 元组：是一种特殊的数组，限定其长度，以及索引类型。
3. void类型：空类型。表示无赋值。
4. 枚举类型：支持枚举值到枚举名的正，反向映射。

泛类

泛用接口 & 多泛型

interface IX<T,U>{
    key:T;
    val:U;
}
let ix : IX<string,number>= {
    key:'asd',
    val:124
}

泛型类：在new类的时候，传入两个数据类型然后输入值。

class IMan<T,U>{
    instance:T;
    // private instance : T;
    ss:U;
    constructor(instance:T,ss:U) {
        this.instance = instance;
        this.ss = ss;
    }
}
let im = new IMan<string,number>('12',12);

泛用别名：

type IY<T> = Array<T>;
let sy : IY<number> = [12,14]