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

什么是 TypeScript

TS 发展历史

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

为什么要用 TS

TS源于JS

JS：动态类型，弱类型语言
TS：静态类型，弱类型语言。TS核心特性：类型

对“类型语言”的理解——动态，静态，弱类型，强类型

动态类型：在执行阶段才能进行类型检验、确定类型的匹配
JavaScript 是一门解释型语言，没有编译阶段，所以它是动态类型
静态类型：编译阶段就确定每个变量的类型，如 Python 和 Java，先走编译流程，编译完了再执行
TS如果有错误，在编译阶段就会报错
弱类型语言：允许隐式类型转换，如 string 和 number 可以相加
console.log(1 + '1');
// 打印出字符串 '11'
强类型语言：无法进行类型转换，如Python
print(1 + '1')
# TypeError: unsupported operand type(s) for +: 'int' and 'str'
必须进行强制类型转换：
print(str(1) + '1')
# 打印出字符串 '11'

TypeScript的优势：

可读性增强
可维护性增强
包含JS特性，支持共存
支持JS渐进式引入与升级

基本语法

基础数据类型/原始数据类型 Primitive data types

字符串string，数字number，布尔值boolean，null，undefined 等
定义方法：变量名 = 赋值 👈 变量关键字变量名:类型名称 = 赋值
如 let myName: string = 'Tom'; let myAge: number = 25;

对象类型 Objective types

对象 { 变量名:数据 }
对象 { 变量名:数据类型 }
自定义类型使用关键字interface，类型名以大写I开头以表区分

只读属性关键readonly：约束属性不可在对象初始化外赋值
可选属性变量名?:赋值...：定义该属性可以存在，可以不存在
任意属性 [ 变量名:值 ]: 属性限制（如any）：约束所有对象属性必须是该属性的子类

函数类型

声明方式

为函数声明类型的方式：

直接在函数上进行类型补充：补充参数类型、返回值类型
给函数变量赋上类型声明
也支持用interface定义类型，简化代码

联合类型和交叉类型

联合类型：IA | IB；联合类型表示一个值可以是几种类型之一
交叉类型：IA & IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

TypeScript 入门 | 青训营笔记