TypeScript 入门 | 青训营笔记

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

什么是TypeScript

发展历史

2012-10：微软发布了TypeScript第一个版本(0.8)

2014-10：Angular 发布了基于TypeScript的2.0版本

2015-04：微软发布了Visual Studio Code

2016-05：react发布，TypeScript 可开发React

2020-09：Vue 发布了3.0 版本，官方支持TypeScript

2021-11：v4.5版本发布

动态类型在执行过程中进行类型的匹配，js的弱类型会在执行时进行隐式类型转换，而在静态类型中则不然

TypeScript则为静态类型：java、c/c++等

可读性增强：基于语法解析TSDoc，ide增强

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

多人合作的大型项目中，可以获得更好的稳定性和开发效率 TypeScript是JS的超集

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

支持渐进式引入与升级

基本数据类型

js ==> ts

对象类型

// 创建一个对象，包括以下属性，类型为IBytedancer
// I表示自定义的一个类型（一个命名约定），与类和对象进行区分
const bytedancer: IBytedancer = {
    jobId: 9303245,
    name: 'Lin',
    sex: 'man',
    age: 28,
    hobby: 'swimming',
}
// 定义一个类型为IBytedancer
interface IBytedancer {
	/* 只读属性readonly:约束属性不可在对象初始化外赋值 */
	readonly jobId: number;
    name: string;
    sex: 'man' | 'woman' | 'other';
    age: number;
    /* 可选属性:定义该属性可以不存在 */
    hobby?: string;
    /* 任意属性:约束所有对象属性都必须是该属性的子类型 */
    [key: string]: any; // any 任何类型
}
/* 报错:无法分配到"jobId"，因为它是只读属性 */
bytedancer. jobId = 12345;
/* 成功:任意属性标注下可以添加任意属性 */
bytedancer .plateform = 'data';
/* 报错:缺少属性"name", 而hobby可缺省 */
const bytedancer2: IBytedancer = {
    jobId: 89757,
    sex: " woman ',
    age: 18,
}

函数类型

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