TypeScript

背景：

JS 的类型系统存在"先天缺陷"弱类型，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）开发的时候，定义的变量本应该就有类型这些经常出现的错误，导致了在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影响开发效率。

从编程语言的动静来区分，TypeScript 属于静态类型的编程语言 ，JavaScript 属于动态类型的编程语言 、

静态类型：编译期做类型检查
动态类型：执行期做类型检查

对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）

Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端项目的首选编程语言

目前，前端最新的开发技术栈：

React： TS + Hooks
Vue： TS + Vue3
注意： Vue2 对 TS 的支持不好~

安装编译 TS 的工具包

**目标：**能够安装ts的工具包来编译ts

内容：问题：为什么要安装编译 TS 的工具包?

回答：Node.js/浏览器，只认识 JS 代码，不认识 TS 代码。

需要先将 TS 代码转化为 JS 代码，然后才能运行安装命令：

npm i -g typescript 或者 yarn global add typescript typescript

用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化

注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限： sudo npm i -g typescript yarn

全局安装：

sudo yarn global add typescript

验证是否安装成功：tsc --v(查看 typescript 的版本)

创建基于TS的vue项目

目标：能够使用vite创建vue-ts模板的项目

内容：基于vite创建一个vue项目，使用typescript模板

yarn create vite vite-ts-demo --template vue-ts

TypeScript基础

TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统

所有的 JS 代码都是 TS 代码

JS 有类型（比如，number/string 等），但是JS 不会检查 变量的类型是否发生变化，而TS 会检查TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

javascript 复制代码

 let age = 18
 let age: number = 18

: number 就是类型注解
为变量添加类型约束。比如，上述代码中，约定变量 age 的类型为 number 类型
约定了类型之后，代码的提示就会非常的清晰
变量的初始值的类型就是该变量的类型

javascript 复制代码

// 错误代码：
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致
let age: number = '18'

TypeScript类型概述

JS 已有类型

原始类型，简单类型（ number/string/boolean/null/undefined ）
复杂数据类型（数组，对象，函数等）

TS 新增类型

联合类型
自定义类型（类型别名）
接口
元组
字面量类型
枚举
void ...

TypeScript原始数据类型

原始类型：number/string/boolean/null/undefined

特点：简单，这些类型，完全按照 JS 中类型的名称来书写

复制代码

let age: number = 18
let myName: string = '老师'
let isLoading: boolean = false
// 等等...

数组类型

数组类型的两种写法：推荐使用 number[] 写法

javascript 复制代码

// 写法一：
let numbers: number[] = [1, 3, 5]
// 写法二：
let strings: Array<string> = ['a', 'b', 'c']

    元组
let arr3 :[number , number,boolean]=[19,10,true]

联合类型

需求：数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写?

javascript 复制代码

let arr: (number | string)[] = [1, 'a', 3, 'b']

解释：| （竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
注意：这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（|| 或）混淆了

javascript 复制代码

let timer: number | null = null
timer = setInterval(() => {}, 1000)
// 定义一个数组，数组中可以有数字或者字符串, 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]

let obj:{a:1}|{b:'3'}; //表示 只能是a类型 值为1 或者b 类型 值为'3'   不能有其他属性

export{} ：可以防止在另一个文件的变量定义后，本文件不能用，加上export{} 本文件中的变量名和其他文件的一样也可以用。

非原始类型：

javascript 复制代码

object (常用) Object()

let num1 :object = {a:1};

let num2: object = [1];

联合类型：

往往一种类型不满足需求的时候我们会有混合的类型进行解决

javascript 复制代码

let arr :(number | string ) []  =[1,2.3,'abc']
//联合类型：|
//注意事项：|的优先级比较低，需要用（） 包裹，一旦使用联合类型
//那么他们只能用他们共有的类型

timer = setInterval(() => {}, 1000)
// 定义一个数组，数组中可以有数字或者字符串, 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]

类型别名

能够使用类型别名给类型起别

类型别名（自定义类型） ：为任意类型起别名

使用场景 ：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用

javascript 复制代码

//灵活度高，可以随意搭配使用
//形式一：
type CustomArray = (number | string)[]
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]
//形式二：
type custom =number | string 
let arr5:custom[]=[12,3,3,'abc']
//形式三：
type s = string
type n = number
let str :s = 'abc'
let str :n=23

解释:

使用 type 关键字来创建自定义类型
类型别名（比如，此处的 CustomArray ）可以是任意合法的变量名称
推荐使用大写字母开头
创建类型别名后，直接使用该类型别名作为变量的类型注解即可

函数类型

能够给函数指定类型

函数的类型实际上指的是： 函数参数 和 返回值的类型

为函数指定类型的两种方式： 1. 单独指定参数、返回值的类型

同时指定参数、返回值的类型
单独指定参数、返回值的类型：

javascript 复制代码

// 函数声明
function add(num1: number, num2: number): number {
return num1 + num2
}
// 箭头函数
const add = (num1: number, num2: number): number => {
return num1 + num2
}

同时指定参数、返回值的类型：

javascript 复制代码

type AddFn = (num1: number, num2: number) => number
const add: AddFn = (num1, num2) => {
return num1 + num2
}

解释：当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型
注意：这种形式只适用于函数表达式

安装编译 TS 的工具包

TypeScript基础

TypeScript类型概述

TypeScript原始数据类型

数组类型

联合类型

非原始类型 ：

联合类型 ：

类型别名

非原始类型：

联合类型：