TypeScript入门 | 青训营笔记

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

一、重点内容介绍：

1、TypeScript的发展
2、TypeScript的基本语法
3、TypeScript的高级数据结构

二、详细知识点：

1、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？
JS（动态类型）VS TS（静态类型）

• 可读性增强，基于语法解析TSDoc，ide增强
• 可维护性增强，在编译阶段暴露大部分错误----多人合作的大型项目中，获得更好的稳定性和开发效率
• 包含于兼容所有Js特性，支持共存
• 支持渐进式引入与升级

2、TypeScript的基本语法

基本数据类型：
字符串

• 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=undefined;
• const t:undefined=undefined;

对象类型

interface Class{
    readonly name:string; // 只读
    hobby? : string; //可选
}

函数类型：

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

函数重载：

数组类型：

type array =number[]
type array2 =[number,string,string]

其他还有泛型，类型别名等等。

3、TypeScript的高级数据结构

联合/交叉类型：

• Ta|Tb表示可以是这两种类型中的任意一种
• Ta&Tb多种类型叠加到一起成为一种类型，包含了两种类型的所有特性。

类型保护与守卫

• 类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域
• 联合类型＋类型保护=自动类型推断

高级类型与函数返回值类型：

4、工程应用

Web
配置webapack loader相关配置
配置tsconfig.js文件
运行webapack启动/打包
loader处理ts文件时，会进行编译与类型检查

Node
安装Node与npm
配置tsconfig.js文件
使用npm安装tsc
使用tsc运行编译得到js文件

5、小结

通过本节课的学习，我了解了什么是TypeScript，知道了TypeScript的基本语法并且进行了简单上手，探索了TypeScript在工程应用相关方面的知识。