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

TypeScript

1TypeScript历史及定义解析

1.1定义

TypeScript是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集

1.2TypeScript发展历史

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版本发布

1.3 js vs ts

js为：动态类型、弱类型语言

ts为：静态类型、弱类型语言

1.4 静态vs动态

静态类型

可读性增强:基于语法解析TSDoc, ide增强

可维护性增强:在编译阶段暴露大部分错误

多人合作的大型项目中，获得更好的稳定性和开发效率

JS的超集

包含于兼容所有Js特性，支持共存

支持渐进式引入与升级

1.5编译器推荐

VS code

1.6TypeScript优势解读

1.7TypeScript练习工具

2数据类型

2.1基础数据类型

字符串
数字
布尔值
null
undefined


/*字符串*/

const q = 'string' ;

const q: string = string' ;


/*数字*/

const W = 1;

const w: number = 1;


/*布尔值*/

const e = true;

const e: boolean = true ;


/* null */

const r = null;

const r: null = null;


/* undefined */

const t = undef ined ;

const t: undefined = undef ined ;

2.2对象类型

const bytedancer: IBytedancer = {    
    jobId: 9303245 ,
    name: 'Lin',
    sex:' man'
    age: 28,
    hobby: " swimming' ,
}

interface IBytedancer {
    /*只读属性:约束属性不可在对象初始化外赋值*/
    readonly jobId: number;
    name: string;
    sex: 'man' | 'woman' | 'other';
    age: number;
    /*可选属性:定义该属性可以不存在*/
    hobby?: string;
    /*任意属性:约束所有对象属性都必须是该属性的子类型*/
    [key: string]: any;
}    
    

/*报错:无法分配到"jobId" ，因为它是只读属性*/
bytedancer.jobId = 12345;
/*成功:任意属性标注下可以添加任意属性*/
bytedancer.plateform = 'data';
/*报错:缺少属性"name", hobby可缺省*/
const bytedancer2: IBytedancer = {
    jobId: 89757 ,
    sex: ' woman',
    age: 18,
}

2.3函数类型

函数类型

function add(x,y) {
    return x + y;
}
const mult = (х,y) => x*y;


interface IMult {
    (x: number, y: number): number;
}
const mult: IMult = (х, у)=> х*y;

function add(x: number, y: number): number 
{
    return х + y;
}

const mult: (х: number, y: number) => number = (х, y)=>х *y;

2.4函数重载

2.5数组类型


/*「类型+方括号」表示*/

type IArr1 = number[];

/*泛型表示*/

type IArr2 = Array<string| number | Record<string, number>>;

/* 元祖表示 */

type IArr3 = [number, number, string, string];

/*接口表示*/

interface IArr4 {

[key: number]: any;

}

const arr1: IArr1 = [1, 2, 3, 4, 5, 6];

const arr2: IArr2 = [1, 2, '3', '4', { a: 1 }];

const arr3: IArr3 = [1, 2, '3'，'4'];

const arr4: IArr4 = ['string', () => null, {}, []];

2.6Typescript补充类型

/*空类型，表示无赋值*/

type IEmptyFunction = () => void;

/*任意类型，是所有类型的子类型*/

type IAnyType = any;

/*枚举类型:支持枚举值到枚举名的正、反向映射*/
enum EnumExample {
    add='+',
    mult='*',
}

EnumExample['add'l === '+';
EnumExample['+'] === 'add';

enum ECorlor { Mon, Tue, Wed, Thu, Fri, Sat, Sun };

ECorlor['Mon'] === 0;

ECorlor[0] === 'Mon';

/*泛型*/

type INumArr = Array<number>;

Typescript泛型

类型别名&类型断言

2.7高级类型

联合/交叉类型

类型保护与类型守卫

高级类型

函数返回值类型

TypeScript|青训营笔记