安装与配置

安装 Node.js

nodeJS

全局安装

1
npm i typescript -g

局部安装

1
yarn add -D typescript

VS Code 中的配置

首次使用vsc编写ts时,vsc会自动进行相关配置

如果要关闭对于js文件的校验:在vsc的设置中搜索 validate ,禁用 JavaScript 验证即可

image-20220628163924348

编译 TypeScript

使用 tsc 命令进行编译

1
tsc test.ts

添加 -w 参数启动监听

1
tsc test.ts -w

配置文件

执行 tsc --init 创建配置文件

执行 终端 -> 运行任务 -> typescript -> 监视tsc -w 启动

类型

类型校验

1
2
3
function sum(a: number, b: number) {
return a + b
}

类型推断

image-20220628165045446

数组的类型推断:

image-20220628165947254

对象的类型推断:

image-20220628170610867

any类型

1
2
3
4
5
6
7
let mo: any = 'morales.com.cn'
mo = []
mo = {}
mo = 123
mo = true
mo = null
mo = undefined

unknownany 的区别:unknown 是未知类型,进行类型检测;any 是任何类型,不进行类型检测

string 等类型赋值给 any 不会报错,但赋值给 unknown 会报错

解决办法:使用 as 断言

1
2
3
4
5
6
let hh: unknown = 'as'
let b: string = hh as string

let str: string = '99'
let c: number = str as unknown as number
console.log(c)

void 与 never 类型

void 类型只能赋值为undefined,never为什么都没有

1
2
3
4
5
6
let m: void = undefined
console.log(m)

function th():never {
throw new Error('OhNo')
}

函数

函数的声明

1
2
let mno = () => 'morales.com.cn'
let func: Function

函数参数的声明

1
2
3
4
5
6
7
8
9
10
function add(a: number, b: number, ratio?: number) { // ?表示参数可选
console.log(ratio)
ratio = ratio || 0.6
return a + b
}
function add(a: number, b: number, ratio: number = 0.6) { // 设置默认值后不需要使用?
console.log(ratio)
ratio = ratio || 0.6
return a + b
}

函数返回值类型的修饰

1
2
3
4
5
6
7
8
9
10
function sum(a: number, b: number): string {
return `sum=${a + b}`
}
function msg(): void { // 没有返回类型时默认是void
console.log('first')
}
const sum2 = (a: number, b: number): string => {
return `sum=${a + b}`
}
const msg2 = (): void => console.log('first')

使用type对函数参数进行声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 原始写法
const add = (user: { name: string, age: number }): void => {
console.log('add')
}
const update = (user: { name: string, age: number }): void => {
console.log('update')
}

// 使用type
type userType = { name: string, age: number }
const addUser = (user: userType): void => {
console.log('add')
}
const updateUser = (user: userType): void => {
console.log('update')
}

函数的结构定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let func1: Function
let func2: () => number

func1 = () => { }
func2 = () => {
return 2
}

let func3: (a: number, b: number) => number
func3 = (x: number, y: number): number => {
return x + y
}

type userType = { name: string, age: number }
let addUser: (user: userType) => boolean
addUser = (u: userType): boolean => {
return true
}

type userAddFunc = (user: userType) => boolean
let addUser2: userAddFunc = (user: userType): boolean => {
return true
}

剩余参数

1
2
3
4
5
6
7
8
9
10
11
function sum(...args: number[]): number {
return args.reduce((prev, curr) => prev + curr, 0)
}
console.log(sum(1, 2, 3, 4))

function push(arr: any[], ...args: any[]): any[] {
arr.push(...args)
return arr
}
const mo = ['morales.com.cn']
console.log(push(mo, '1', 123))

元组

1
2
3
4
5
6
let arr: (string | number | boolean)[] = ['morales', false, 10209]
arr[0] = true
console.log(arr)

let tuple: [string, number, boolean] = ['morales', 12145, true]
console.log(tuple)

image-20220630223435043