Typescript的介绍
typescript是微软公司开发的开源编程语言,Type + JavaScript(type是类型 => 在 JS 基础之上,为 JS 添加了类型支持)
简称:TS,是 JavaScript 的超集
安装编译 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 代码
- 创建 hello.ts 文件(注意:TS 文件的后缀名为 .ts)
- 将 TS 编译为 JS:在终端中输入命令,tsc hello.ts(此时,在同级目录中会出现一个同名的 JS 文件)
- 执行 JS 代码:
a. 在终端中输入命令,node hello.js
b. 把hello.js引入某个html文件来运行
1 创建 ts 文件 ===> 2 编译 TS ===> 3 执行 JS
● 说明:所有合法的 JS 代码都是 TS 代码,有 JS 基础只需要学习 TS 的类型即可
● 注意:由 TS 编译生成的 JS 文件,代码中就没有类型信息了
注意:
真正在开发过程中,其实不需要自己手动的通过tsc把ts文件转成js文件,这些工作应该交给webpack或者vite来完成
类型注解
● TypeScript 是 JS 的超集,TS 提供了 JS 的所有功能,并且额外的增加了:类型系统
○ 所有的 JS 代码都是 TS 代码
○ JS 有类型(比如,number/string 等),但是 JS 不会检查变量的类型是否发生变化,而 TS 会检查
● TypeScript 类型系统的主要优势:可以显示标记出代码中的意外行为,从而降低了发生错误的可能性
let age1 = 18
let age2: number = 18
● 说明:代码中的 : number 就是类型注解
● 作用:为变量添加类型约束。比如,上述代码中,约定变量 age 的类型为 number 类型
● 解释:约定了什么类型,就只能给变量赋值该类型的值,否则,就会报错
● 约定了类型之后,代码的提示就会非常的清晰
TypeScript类型概述
可以将 TS 中的常用基础类型细分为两类:
● 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
// 等等...
类型推论
在 TS 中,某些没有明确指出类型的地方,TS 的类型推论机制会帮助提供类型 换句话说:由于类型推论的存在,有些场合下的类型注解可以省略不写
发生类型推论的 2 种常见场景:
- 声明变量并初始化时
- 决定函数返回值时
// 变量 age 的类型被自动推断为:number
let age = 18
// 函数返回值的类型被自动推断为:number
function add(num1: number, num2: number): number {
return num1 + num2
}
小结
推荐:能省略类型注解的地方就省略(偷懒,充分利用TS类型推论的能力,提升开发效率)
技巧:如果不知道类型,可以通过鼠标放在变量名称上,利用 VSCode 的提示来查看类型
数组类型
数组类型的两种写法:
// 写法一: 类型[]
let arr1: number[] = [1, 3, 5]
// 写法二:Array<类型>
let arr2: Array<string> = ['a', 'b', 'c']
推荐使用 number[] 写法
联合类型
需求:数组中既有 number 类型,又有 string 类型,这个数组的类型应该如何写?
let arr: (number | string)[] = [1, 'a', 3, 'b']
解释:|(竖线)在 TS 中叫做联合类型,即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种
注意:这是 TS 中联合类型的语法,只有一根竖线,不要与 JS 中的或(|| 或)混淆了
应用场景
// 定义一个变量,类型是number 或者 null
let timer: number | null = null
timer = setInterval(() => {}, 1000)
// 定义一个数组,数组中可以有数字或者字符串
// 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]
类型别名-type(重要)
格式
定义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']
别名可以是任意的合法字符串,一般首字母大写
函数-单个定义
函数的类型实际上指的是:函数形参和返回值的类型
格式
// 普通函数
function 函数名(形参1: 类型=默认值, 形参2:类型=默认值): 返回值类型 { }
// 箭头函数
const 函数名(形参1: 类型=默认值, 形参2:类型=默认值):返回值类型 => { }
函数-统一定义函数格式
定义多个具有相同参数类型和返回值类型的函数时,代码比较累赘
const add = (a:number,b:number):number =>{ return a + b }
const sub = (a:number,b:number):number =>{ return a - b }
分析
把拥有相同形参和实参的函数当做一个整体,来定义
const add1 : (n1:number,n2:number)=>number = (a,b)=>{return a+b }
提炼自定义类型
type Fn = (n1:number,n2:number)=>number
const add1 : Fn = (a,b)=>{return a+b }
函数返回值是void
void 类型
如果函数没有返回值,那么,函数返回值类型为:void
function greet(name: string): void { console.log('Hello', name) // }
如果一个函数没有返回值,此时,在 TS 的类型中,应该使用 void 类型,有如下三种情况会满足
● 不写return
● 写return ,但是后面不接内容
● 写return undefined
// 如果什么都不写,此时,add 函数的返回值类型为: void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void,与上面不指定返回值类型相同
const add = (): void => {}
// 但,如果指定 返回值类型为 undefined,此时,函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
// 此处,返回的 undefined 是 JS 中的一个值
return undefined
}
void和undefined的区别
- 如果函数没有指定返回值,调用结束之后,值是undefined的
- 当不能直接声明返回值是undefined
function add(a:number, b:number): undefined { // 这里的会报错
console.log(a,b)
}
函数-可选参数
场景
使用函数实现某个功能时,参数可以传也可以不传。
例如:数组的 slice 方法,可以 slice() 也可以 slice(1) 还可以 slice(1, 3)]
这种情况下,在给函数参数指定类型时,就用到可选参数了
格式
可选参数:在可选参数名的后面添加 ?(问号)
function mySlice(start?: number, end?: number): void {
console.log('起始索引:', start, '结束索引:', end)
}
注意:可选参数只能出现在参数列表的最后,也就是说可选参数后面不能再出现必选参数
对象类型
对象类型的写法:
// 空对象
let person: {} = {}
// 有属性的对象
let person: { name: string } = {
name: '同学'
}
// 既有属性又有方法的对象
// 在一行代码中指定对象的多个属性类型时,使用 `;`(分号)来分隔
let person: { name: string; sayHi(): void } = {
name: 'jack',
sayHi() {}
}
// 对象中如果有多个类型,可以换行写:
// 通过换行来分隔多个属性类型,可以去掉 `;`
let person: {
name: string
sayHi(): void
} = {
name: 'jack',
sayHi() {}
}
● 解释:
a. 使用 {} 来描述对象结构
b. 属性采用属性名: 类型的形式
c. 方法采用方法名(): 返回值类型的形式
使用类型别名
● 注意:直接使用 {} 形式为对象添加类型,会降低代码的可读性(不好辨识类型和值)
● 推荐:使用类型别名为对象添加类型
// 创建类型别名
type Person = {
name: string
sayHi(): void
}
// 使用类型别名作为对象的类型:
let person: Person = {
name: 'jack',
sayHi() {}
}
箭头函数形式的方法类型
方法的类型也可以使用箭头函数形式
{
greet(name: string):string,
greet: (name: string) => string
}
type Person = {
greet: (name: string) => void
greet(name: string):void
}
let person: Person = {
greet(name) {
console.log(name)
}
}
对象可选属性
对象的属性或方法,也可以是可选的,此时就用到可选属性了
比如,我们在使用 axios({ … }) 时,如果发送 GET 请求,method 属性就可以省略
可选属性的语法与函数可选参数的语法一致,都使用 ? 来表示
type Config = {
url: string
method?: string
}
function myAxios(config: Config) {
console.log(config)
}
练习:
type Gender = '男'| '女'
type Student = {
name: string,
gender: Gender,
achievement?: number //加个?好变成可选属性
height: number
study: () => void
games: () => string
}
let xue1: Student = {
name: '千玺',
gender: '男',
achievement: 100,
height: 198,
// study:function(){},
study: () => { },
games: function () {
return '王者'
}
}
接口类型
基本使用
当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到复用的目的
● 解释:
a. 使用 interface 关键字来声明接口
b. 接口名称(比如,此处的 IPerson),可以是任意合法的变量名称,推荐以 I 开头
c. 声明接口后,直接使用接口名称作为变量的类型
d. 因为每一行只有一个属性类型,因此,属性类型后没有 ;(分号)
interface IPerson {
name: string
age: number
sayHi(): void
}
let person: IPerson = {
name: 'jack',
age: 19,
sayHi() {}
}
interface vs type
● nterface(接口)和 type(类型别名)的对比:
● 相同点:都可以给对象指定类型
● 不同点:
○ 接口,只能为对象指定类型
○ 类型别名,不仅可以为对象指定类型,实际上可以为任意类型指定别名
● 推荐:能使用 type 就是用 type
interface IPerson {
name: string
age: number
sayHi(): void
}
// 为对象类型创建类型别名
type IPerson = {
name: string
age: number
sayHi(): void
}
// 为联合类型创建类型别名
type NumStr = number | string
接口继承
● 如果两个接口之间有相同的属性或方法,可以将公共的属性或方法抽离出来,通过继承来实现复用
● 比如,这两个接口都有 x、y 两个属性,重复写两次,可以,但很繁琐
interface IPoint2D { x: number; y: number }
interface IPoint3D { x: number; y: number; z: number }
更好的方式
interface IPoint2D { x: number; y: number }
// 继承 Point2D
interface IPoint3D extends IPoint2D {
z: number
}
● 解释:
a. 使用 extends(继承)关键字实现了接口 IPoint3D 继承 IPoint2D
b. 继承后,IPoint3D 就有了 IPoint2D 的所有属性和方法(此时,IPoint3D 同时有 x、y、z 三个属性)
元组类型
● 使用 number[] 的缺点:不严谨,因为该类型的数组中可以出现任意多个数字
● 更好的方式:元组 Tuple
● 元组类型是另一种类型的数组,它确切地知道包含多少个元素,以及特定索引对应的类型
let position: [number, number] = [39.5427, 116.2317]
● 解释:
a. 元组类型可以确切地标记出有多少个元素,以及每个元素的类型
b. 该示例中,元素有两个元素,每个元素的类型都是 number
字面量类型
思考以下代码,两个变量的类型分别是什么?
let str1 = 'Hello TS'
const str2 = 'Hello TS'
● 通过 TS 类型推论机制,可以得到答案:
a. 变量 str1 的类型为:string
b. 变量 str2 的类型为:‘Hello TS’
● 解释:
- str1 是一个变量(let),它的值可以是任意字符串,所以类型为:string
- str2 是一个常量(const),它的值不能变化只能是 ‘Hello TS’,所以,它的类型为:‘Hello TS’
● 注意:此处的 ‘Hello TS’,就是一个字面量类型,也就是说某个特定的字符串也可以作为 TS 中的类型
● 任意的 JS 字面量(比如,对象、数字等)都可以作为类型使用
○ 字面量:{ name: ‘jack’ } [] 18 20 ‘abc’ false function() {}
使用模式和场景
● 使用模式:字面量类型配合联合类型一起使用
● 使用场景:用来表示一组明确的可选值列表
● 比如,在贪吃蛇游戏中,游戏的方向的可选值只能是上、下、左、右中的任意一个
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时,会有类型提示:
changeDirection('up')
● 解释:参数 direction 的值只能是 up/down/left/right 中的任意一个
● 优势:相比于 string 类型,使用字面量类型更加精确、严谨
枚举类型
基本使用
● 枚举的功能类似于字面量类型+联合类型组合的功能,也可以表示一组明确的可选值
● 枚举:定义一组命名常量。它描述一个值,该值可以是这些命名常量中的一个
// 创建枚举
enum Direction { Up, Down, Left, Right }
// 使用枚举类型
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时,需要应该传入:枚举 Direction 成员的任意一个
// 类似于 JS 中的对象,直接通过 点(.)语法 访问枚举的成员
changeDirection(Direction.Up)
● 解释:
a. 使用 enum 关键字定义枚举
b. 约定枚举名称以大写字母开头
c. 枚举中的多个值之间通过 ,(逗号)分隔
d. 定义好枚举后,直接使用枚举名称作为类型注解
数字枚举
● 问题:我们把枚举成员作为了函数的实参,它的值是什么呢?
● 解释:通过将鼠标移入 Direction.Up,可以看到枚举成员 Up 的值为 0
● 注意:枚举成员是有值的,默认为:从 0 开始自增的数值
● 我们把,枚举成员的值为数字的枚举,称为:数字枚举
● 当然,也可以给枚举中的成员初始化值
// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }
enum Direction { Up = 2, Down = 4, Left = 8, Right = 16 }
字符串枚举
● 字符串枚举:枚举成员的值是字符串
● 注意:字符串枚举没有自增长行为,因此,字符串枚举的每个成员必须有初始值
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
枚举实现原理
● 枚举是 TS 为数不多的非 JavaScript 类型级扩展(不仅仅是类型)的特性之一
● 因为:其他类型仅仅被当做类型,而枚举不仅用作类型,还提供值(枚举成员都是有值的)
● 也就是说,其他的类型会在编译为 JS 代码时自动移除。但是,枚举类型会被编译为 JS 代码
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
// 会被编译为以下 JS 代码:
var Direction;
(function (Direction) {
Direction['Up'] = 'UP'
Direction['Down'] = 'DOWN'
Direction['Left'] = 'LEFT'
Direction['Right'] = 'RIGHT'
})(Direction || Direction = {})
● 说明:枚举与前面讲到的字面量类型+联合类型组合的功能类似,都用来表示一组明确的可选值列表
● 一般情况下,推荐使用字面量类型+联合类型组合的方式,因为相比枚举,这种方式更加直观、简洁、高效
二级标题
● 原则:不推荐使用 any!这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
● 因为当值的类型为 any 时,可以对该值进行任意操作,并且不会有代码提示
let obj: any = { x: 0 }
obj.bar = 100
obj()
const n: number = obj
解释:
● 以上操作都不会有任何类型错误提示,即使可能存在错误
● 尽可能的避免使用 any 类型,除非临时使用 any 来“避免”书写很长、很复杂的类型
● 其他隐式具有 any 类型的情况
a. 声明变量不提供类型也不提供默认值
b. 函数参数不加类型
● 注意:因为不推荐使用 any,所以,这两种情况下都应该提供类型
类型断言
有时候你会比 TS 更加明确一个值的类型,此时,可以使用类型断言来指定更具体的类型。 比如,
const aLink = document.getElementById('link')
● 注意:该方法返回值的类型是 HTMLElement,该类型只包含所有标签公共的属性或方法,不包含 a 标签特有的 href 等属性
● 因此,这个类型太宽泛(不具体),无法操作 href 等 a 标签特有的属性或方法
● 解决方式:这种情况下就需要使用类型断言指定更加具体的类型
● 使用类型断言:
const aLink = document.getElementById('link') as HTMLAnchorElement
● 解释:
a. 使用 as 关键字实现类型断言
b. 关键字 as 后面的类型是一个更加具体的类型(HTMLAnchorElement 是 HTMLElement 的子类型)
c. 通过类型断言,aLink 的类型变得更加具体,这样就可以访问 a 标签特有的属性或方法了
另一种语法,使用 <> 语法,这种语法形式不常用,知道即可:
// 该语法,知道即可:
const aLink = <HTMLAnchorElement>document.getElementById('link')