什么是typeScript ?
概念 : TypeScript是具有类型语法的javascript,是一门强类型的编程语言。
typeScript 带来的好处 ?
- 静态类型检查,提前发现代码错误, 当我们定义一个变量并设置类型后,重新赋值为不为定义的类型时,会静态报错
2 .良好的代码提示,提升开发效率 , 当我们使用v-for 渲染一个数据时,会提示数据中的元素,减少代码中单词写错的问题
如何安装编译TS的工具包 ?
搭建手动编译环境
- 安装typeScript包 ( 编译引擎 ) ->注册tsc 命令 npm install -g typescript
- 需要新增 hello.ts 文件 , 执行 tsc hello.ts 命令 生成hello.js文件
- 执行node hello.js 运行js文件查看效果
搭建自动编译环境
基于工程化的TS开发模式(webpack / vite),TS的编译环境已经内置了,无需手动安装配置,通过以下命令即可创建一个最基础的自动化的TS编译环境
npm create vite@latest ts-pro -- --template vanilla-ts
什么是类型注解 ?
类型注解值的是给变量添加类型约束 :
1. 添加类型注解能是变量只能被赋值为约束好的类型
2. 在编码过程中能够有相关的提示
给变量定义类型注解方法 => let 变量 : 类型 = 值
简单类型注解示例 :
let name: string = '小明'
let age: number = 18
let isOk: boolean = true
let u: undefined = undefined
let n: null = null
let s: symbol = Symbol()
let big: bigint = BigInt(123)
什么是类型推论 ?
类型推论是TS的机制,简单来说某些没有明确指出类型的地方,TS类型推论机制就会帮助提供类型, 使得有些场合下的类型注解是可以省略不写的
常见场景 :
- 声明变量并初始化时
2. 决定函数返回值时
使用类型推论小技巧 :
1 . 能省略的地方就省略
2 . 如果不知道类型 , 可以通过鼠标放在变量名称上,利用VSCode的提示来查看类型
ts中常见用类型注解
数组类型注解
给数组添加类型约束
语法1 :
let arr: number[] = [1,2,3]
// 代码表示: 变量arr只能用来保存数组类型,并且数组的元素必须是number类型
语法2 : 泛型函数
let arr : Array<number> = [1,2,3]
// Array 表示数组
// <> 表示泛型
// number 表示number型
联合类型
概念 : 将多个类型合并成一个类型对变量进行注解
| 竖线在TS中叫做 联合类型 , 即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种
需求: 当数组中既有number,又有string类型时,我们就要用到联合类型
示例代码:
let arr: (number | string) = [1, 2, '3']
函数类型
1- 基本使用
概念:函数类型是指给函数添加类型注解,本质上就是给函数的参数和返回值添加类型约束
const fn = (num1: number,num2: number): number => {
return num1 + num2
}
说明:
- 函数参数注解类型之后不但限制了参数的类型还限制了参数为必填
- 函数返回值注解类型之后限制了该函数内部return出去的值必须满足类型要求
好处:
- 避免因为参数不对导致的函数内部逻辑错误
- 对函数起到说明的作用
2- 函数表达式
函数表达式的类型注解有两种方式:
- 参数和返回值分开注解
- 函数整体注解
参数和返回值分开注解
const add1 = (a: number ,b: number): number => {
return a + b
}
函数整体注解(只针对于函数表达式)
type AddFn = (a: number ,b: number) => number
// 函数返回值 是number : 类型注解
const add1: AddFn = (a, b) => {
return a + b
}
函数可选参数
概念:可选参数表示当前参数可传可不传,一旦传递实参必须保证参数类型正确
说明:lastName参数表示可选参数,可传可不传,一旦传递实参必须保证类型为string类型
函数无返回值 - void
概念:JS中的有些函数只有功能没有返回值,此时使用void进行返回值注解,明确表示函数没有函数值
function eachaArr(arr: number[]): void {
arr.forEach(item => {
console.log(item)
})
}
注意事项:
- 在JS中如果没有返回值,默认返回的是undefined
- 在TS中 void和undefined不是一回事:
- undefined在TS中是一种明确的简单类型,如果指定返回值为undefined,那返回值必须是undefined类型
- void表示没有返回值
字面量类型
可以理解为 : 限制变量的取值范围 单个字面量就是一个类型
使用场景 :
- 性别只能是 ’男‘ 和 ’女‘,就可以采用联合类型配合字面量的类型定义方案
示例 : 当我们定义字面量类型后,在使用时代码会给我们提示可选类型
2 . ElementUI中的el-button组件按钮的type属性
type Props = {
type: 'primary' | 'success' | 'danger' | 'warning'
}
any 类型
当值的类型为 any 时,可以对该值进行任意操作,并且不会有代码提示
示例代码
let obj: any = { x: 0 } // any 就是任意类型
obj.bar = 100
obj()
const n: number = obj
解释:
- 以上操作都不会有任何类型错误提示,即使可能存在错误
两种隐式的 any 类型的情况
- 声明的变量不提供类型也不提供默认值
- 函数参数不加类型
原则:
- 不推荐使用 any! 这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
- 除非临时使用 any 来“避免”书写很长、很复杂的类型
类型断言
有时候你会比 TS 更加明确一个值的类型,此时,可以使用类型断言(as)来指定更具体的类型
应用场景:把一个大类型 缩小 为更加具体的类型
格式:类型 as 具体类型
问题 获取页面中的id为link的a元素,尝试通过点语法访问href属性
发现代码报错了
原因是:getElementById方法返回值的类型是 HTMLElement,而这个类型只包含所有标签公共的属性或方法,这个类型太宽泛(不具体),不包含 a 标签特有的 href 等属性。
解决方法 : 使用类型断言
解释:
- 使用
as
关键字实现类型断言 - 关键字 as 后面的类型是一个更加具体的类型(HTMLAnchorElement 是 HTMLElement 的子类型)
- 通过类型断言,aLink 的类型变得更加具体,这样就可以访问 a 标签特有的属性或方法了
类型别名--type
定义 : type 自定义名字 = 类型 ( type 定义 类型的方法 )
注意 : 自定义名字可以是任意合法字符串,一般 首字母大写
作用 : 将存在重复类型注解优化为一个变量存起来
示例代码 :
const arr1:(number | string)[] = [1, '1']
const arr2:(number | string)[] = ['a', 'b', 3]
// 改造上述代码
type ArrType = (number | string)[]
const arr1: ArrType = [1, '1']
const arr2: ArrType = ['a', 'b', 3]