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

重点内容：

• TypeScript 的概念以及优势
• TypeScript的基本语法
• TypeScript的高级类型
• TypeScript的工程应用

1.js和TypeScript的不同之处，以及TypeScript的优势

<1>TypeScript的概念

TypeScript相当于js的扩展，但还是有些不同之处。

<2>js和TypeScript

• js
  • 动态类型
  • 弱类型语言
• TypeScript
  • 静态类型
  • 弱类型语言

<3>TypeScript的优势

TypeScript是静态类型，优势如下

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

2.TypeScript的基本语法

<1>基础数据类型

let isDone:boolean = false
let decLiteral: number = 6 
let myName: string = 'Jane' 
let a: unknown = 10
let anyThing: any = 'hello'
function add(): void {
console.log('没有返回值')
}

<2>联合类型

let myFavoriteNumber: string | number

<3>元组

let data: [number, string, boolean] = [2, '3', true]

<4>数组类型

let numberArray: number[] = [1, 2, 3] 
let numberArray1: Array<number> = [4, 5, 6]
let arr: (string | number)[] = [1, 'a']
let arr: {name: string, age: number}[] = [
{name: 'Jane', age: 17},
{name: 'Jian', age: 20}
]

<5>TypeScript补充类型

<6>TypeScript泛型

3.高级类型

<1>联合/交叉类型

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

<2>类型保护与类型守卫

类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。

<3>数据返回值类型

4.工程应用

<1>Web

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

<2>Node

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