TypeScript入门 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第7天什么是TypeScript

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

什么是TypeScript

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

Js和Ts区别

JS：动态类型的弱类型语言 TS：静态类型的弱类型语言

静态类型

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

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

JS的超集

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

TypeScript 基本语法

将 JavaScript 代码改造成 TypeScript ：

基础数据类型

字符串
数字
布尔值
null
undefined

在定义之后加‘：’通过明确数据类型来详细定义。对象也是同类根据接口定义新的类时不能缺少属性，但可以新加。

对象类型

接口可以理解为一种规范，一种契约。可以约束一个对象里应该有哪些成员，这些成员都是怎么样的。

通过interface定义一个bytedancer接口（定义时习惯在名称前加I），这个接口是一个对象，规则为有一个readonly jobID属性类型为number, name属性类型为string等等。

如果用readonly修饰成员，那么这个成员属性在初始化后便不可修改

非必须属性只需要在：前面加？

函数类型

在变量后面声明变量类型。

函数重载

数组类型

type A = number[]
type B = Array<string|number|Record<string, number>>
type C = [number,number,string,string]
interface D { [key: number ]: any; }

实例化

const a:A = [1,2,3,4,5,6];
const b:B = [1,2,'3','4',{a:1}];
const c:C = [1,2,'3','4'];
const d:D = ['string',() => null, {}, []];

TypeScript 补充类型

TypeScript 泛型

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

泛型就是在定义函数，接口或者类的时候没有指定具体类型，等到使用时才指定具体类型。极大程度的复用代码。

泛型也是一种类型，只不过不同于 string, number 等具体的类型，它是一种抽象的类型，我们不能直接定义一个变量类型为泛型

类型别名 & 类型断言

字符串 / 数字字面量

高级类型

联合 / 交叉类型

联合类型: IA | IB; 联合类型表示一个值可以是几种类型之一

交叉类型: IA & IB; 多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

类型保护与类型守卫

访问联合类型时，为了程序安全，仅可以访问联合类型中的交集部分，为了解决这个问题，引入了类型守卫和类型保护的问题。

类型守卫：定义一个函数，返回值为一个类型谓词，生效范围为子作用域
类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。换句话说，类型保护可以保证一个字符串是一个字符串，尽管它的值也可以是一个数值。类型保护与特性检测并不是完全不同，其主要思想是尝试检测属性、方法或原型，以确定如何处理值。

工程应用

Webpack

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

TypeScript入门 | 青训营笔记