TypeScript 介绍
- TypeScript 是什么
- TypeScript 为什么要为 JS 添加类型支持?
- TypeScript 相比 JS 的优势
TypeScript 是什么
TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。
在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript
TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行
// TypeScript 代码有明确的数据类型 let age1: number = 18 // JavaScript 代码没有明确的类型 let age2 = 18
为什么要为 JS 添加类型支持?
JS的缺陷
- JS 的类型系统是弱类型的，没有类型的概念
let ar = 11 // 这里是数值 ar = [] // 偷偷的改成了数组类型 ar.toFixed(2) // 这里会报类型错误
- 没有类型校验，导致了在使用 JS 进行项目开发时，会经常遇到类型错误的问题，增加了找 Bug、改 Bug 的时间，严重影响开发效率
- JavaScript 属于动态类型的编程语言
边解释边执行，错误只能在运行阶段才能发现。
TS属于静态类型的编程语言
- 它要先编译，再执行。不能直接执行，需要编译成js才能执行
- 它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误，减少找 Bug、改 Bug 时间
对比：
- 使用 JS：
- 在 VSCode 里面写代码
- 在浏览器中运行代码 --> 运行时，才会发现错误【晚】
- 使用 TS：
- 在 VSCode 里面写代码 --> 写代码的同时，就会发现错误【早】
- 在浏览器中运行代码
小结
- TS是______ + Script的简写，它是___开发的开源编程语言。
- TS是JS的____超集，它在js的基础上增加了____支持。
TypeScript和JS的对比
目标
javascript和Typescript的区别
- ts完全兼容javascript，它可以编译成javascript
- 使用TS会有强大的代码类型提示
- 提升了代码的可维护性，使得重构代码更容易
支持最新的 ECMAScript 语法。.ts-----编译---> .js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w7wb5y8S-1652532070519)(asset/TS编译.png)]
生态
Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端 项目的首选编程语言
目前，前端最新的开发技术栈：
React： TS + Hooks
Vue： TS + Vue3
注意： Vue2 对 TS 的支持不好~
TypeScript 初体验
目标
安装可以把TS编译成JS的工具，搭建一个可以运行TS的环境
全局安装编译 TS 的工具包
安装包：npm i -g typescript
- typescript 包：用来编译 TS 代码的包，提供了
tsc命令，实现了 TS -> JS 的转化 - 验证是否安装成功：
tsc –v(查看 typescript 的版本) - 注意：Mac 电脑安装全局包时，需要添加
sudo获取权限：sudo npm i -g typescript
编译并运行 TS 代码
步骤
- 创建ts文件。例如 hello.ts 文件（注意：TS 文件的后缀名为
.ts） - 编译。将 TS 编译为 JS
在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件） - 执行 JS 代码。
- 在node中运行。在终端中输入命令，
node hello.js - 在浏览器中运行。
拓展：在线运行
https://www.typescriptlang.org/play
小结
- 要运行.ts文件，先要全局安装____包，它的提供___命令，将.ts转成.js文件。
ts-node 简化运行 TS 的步骤
目标
了解ts-node命令的基本使用；
问题描述
每次修改代码后，都要重复执行两个命令，才能运行 TS 代码，太繁琐。
tsc 你的代码.ts node 你的代码.js
简化方式
使用 ts-node 包，直接在 Node.js 中执行 TS 代码。它提供了 ts-node 命令，可以简化执行命令。
安装命令
npm i -g ts-node
使用方式：ts-node hello.ts
相当于：1 tsc 命令 2 node（注意：ts-node 不会生成 js 文件）
解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码
小结
在初始学习阶段，我们会使用ts-node来运行代码，在项目阶段就不会再这样使用了。
ts-node报错问题
console.log报错问题
Cannot find name 'console'. Do you need to change your target library? Try changing thelib compiler option to include 'dom'.
解决
tsc --init生成配置文件 tsconfig.json- 写代码时，用{ }包起来
TS类型注解
目标
了解类型注解的概念； 能掌握类型注解的使用方式
背景
TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统
- TS中定义变量(常量)可以指定类型了。
- A类型的变量不能保存B类型的数据
可以显示标记出代码中的意外行为，从而降低了发生错误的可能性
类型注解
格式
let 变量名: 类型 = 初始值
示例代码:
let age: number = 18 • 1
说明：代码中的 : number 就是类型注解
作用：为变量添加类型约束
上述代码中，约定变量 age 的类型为 number 类型，就只能给变量赋值该类型的值，否则，就会报错
// 错误代码： // 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致 let age: number = '18'
错误提示-拓展
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjmE0rTC-1652532070522)(asset/image-20211123151718680.png)]
类型推论
目标
了解类型推论的场景
类型推论
在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写
发生类型推论的 2 种常见场景
- 声明变量并初始化时
- 决定函数返回值时
// 变量 age 的类型被自动推断为：number let age = 18 // 函数返回值的类型被自动推断为：number function add(num1: number, num2: number) { return num1 + num2 }
VSCode中的编码技巧
- 如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型
- 写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cU1KJiKh-1652532070523)(asset/image-20211025144309989.png)]
console.log() document.createElement()
TS的类型
目标
了解ts中的数据类型
常用基础类型
将 TS 中的常用基础类型分为两类
- JS 已有类型
- 原始类型：
number/string/boolean/null/undefined/symbol - 对象类型：
object（包括，数组、对象、函数等对象）
- TS 新增类型
- 联合类型
- 自定义类型(类型别名)
- 接口
- 元组
- 字面量类型
- 枚举
- void
- any 等
- 注意：
- 原始类型在 TS 和 JS 中写法一致
- 对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法
原始类型
- 原始类型：number/string/boolean/null/undefined/symbol
- 特点：简单，这些类型，完全按照 JS 中类型的名称来书写
// 数值类型 let age: number = 18 // 字符串类型 let myName: string = '小花' // 布尔类型 let isLoading: boolean = false // undefined let un: undefined = undefined // null let timer:null = null
联合类型
需求
如何定义一个变量可以是null也可以是 number 类型?
目标
掌握联合类型的用法
let arr: (number | string)[] = [1, 'a', 3, 'b']
联合类型的格式
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
应用场景
- 定时器id
// | 联合类型 // 联合类型1： 变量可以是两种类型之一 let timer:number|null = null timer = 2 // 联合类型2： 数组元素可以是两种类型之一 let arr: (number|string|boolean)[] = [1,2,3] arr[0] = '1' arr[2] = true
注意：这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（|| 或）混淆了
数组类型
目标
掌握在ts中使用数组的方法。
两种写法
格式
let 变量: 类型[] = [值1，...] let 变量: Array<类型> = [值1，...]
基本示例
// 写法一： let numbers: number[] = [1, 3, 5] // numbers必须是数组，每个元素都必须是数字 // 写法二： let strings: Array<string> = ['a', 'b', 'c'] // strings必须是数组，每个元素都必须是字符串
拓展示例
如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型。
分析，结合联合类型来使用
let arr: (number | string) [] = ['1', 1]
这里有个有优先级的问题
小结
推荐使用 number[] 写法
类型别名
目标
掌握类型别名的用法，能给类型起别名。
格式
定义
type 别名 = 类型
使用
type s = string // 定义 const str1:s = 'abc' const str2:string = 'abc'
作用
- 给类型起别名
- 定义了新类型
场景
给复杂类型起别名
// type NewType = string | number // let a: NewType = 1 // let b: NewType = '1' // let arr: NewType[] = [1, '1'] type MyArr = (number | string) [] const arr:MyArr = [1, '1']
别名可以是任意的合法字符串，一般首字母大写
小结
- 类型别名的关键字是___
- 类型别名的作用是
