JS 中的类型

Array 类型

明确的指定<数组>的类型注解: 两种写法

1. 类型[]: 表示数组中包含什么类型
2. Array<类型>: 表示数组中包含什么类型

如下所示:

1. string[]: 数组类型,并且数组中存放字符串类型
2. Array<number>: 数组类型,并且数组中存放数值类型

// 注意: 在真实开发中,数组一般存放相同类型,不要存放不同类型
// let names = ['abc', 'cba', 'nba', 123, {}]
// 1.string[]:
let names: string[] = ['abc', 'cba', 'nba']

// 2.Array<number>:
let nums: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9]

Object 类型

type infoType = {
	name: string
	age: number
}

let info: infoType = {
	name: '三九',
	age: 19,
}

null or undefined 类型

let n: null = null
let u: undefined = undefined

number 类型

数字类型是我们开发中经常使用的类型，TypeScript 和 JavaScript 一样，不区分整数类型（int）和浮点型（double），统一为 number 类型。

let num: number = 123

string 类型

字符串类型，可以使用单引号或者双引号表示：

let message: string = 'Hello World'
message = 'Hello TypeScript'

同时也支持 ES6 的模板字符串来拼接变量和字符串

const name: string = '三九'
const age: number = 18

const info = `my name is ${name}, age is ${age}.`

boolean 类型

布尔类型只有两个取值：true 和 false，非常简单

let flag: boolean = true
flag = false
flag = 20 > 30

函数的类型

参数 or 返回值

// 在我们定义一个 TypeScript 中的函数时, 都需要指定参数类型
// 返回值类型可以明确指定, 也可以自动进行推导
function sum(num1: number, num2: number): number {
	return num1 + num2
}
let res = sum(123, 321)

函数类型案例

// 定义一个对象类型
type lyricType = {
	time: number
	text: string
}

function parseLyric(lyric: string): lyricType {
	const lyrics: lyricType[] = []
	lyrics.push({ time: 123, text: '不忘初心,方得始终!' })
	return lyrics
}
const lyricInfo = parseLyric('hahahahahaha')
for (const item of lyricInfo) {
	console.log(item.time, item.text)
}
console.log(lyricInfo)

匿名函数参数类型

匿名函数与函数声明的不同：

• 当函数出现在 TypeScript 可以确定该函数如何被调用的地方时。
• 该函数的参数会自动指定类型。

我们并没有指定 item 的类型，但是 item 是一个 string 类型

• 这是因为 TypeScript 会根据 forEach 函数的类型以及数组的类型推断出 item 的类型；
• 这个过程称之为上下文类型（contextual typing），因为函数执行的上下文可以帮助确定参数和返回值的类型；

const names: string[] = ['abc', 'cba', 'nba']

// 匿名函数不添加类型注解
names.forEach(function (item, index, arr) {
	console.log(item, index, arr)
	// abc 0 [ 'abc', 'cba', 'nba' ]
	// cba 1 [ 'abc', 'cba', 'nba' ]
	// nba 2 [ 'abc', 'cba', 'nba' ]
})

对象类型和函数的结合

type pointType = {
	x: number
	y: number
	z?: number // 可选类型
}

function printCoordinate(point: pointType) {
	console.log('x坐标', point.x)
	console.log('y坐标', point.y)
	return point
}
const option = printCoordinate({ x: 20, y: 30, z: 99 })
console.log(option)
// x坐标 20
// y坐标 30
// { x: 20, y: 30, z: 99 }

Ts 类型

any 类型

如果对于某些情况的处理过于繁琐不希望添加规定的类型注解，或者在引入一些第三方库时，缺失了类型注解，这个时候我们可以使用 any

any 类型的用法:

• 我们可以对 any 类型的变量进行任何的操作，包括获取不存在的属性、方法；
• 我们给一个 any 类型的变量赋值任何的值，比如数字、字符串的值

// any 类型不限制任何标识符类型,可以在标识符上进行操作
let a: any = 'sj'
a = 123
a = true
console.log(a.length) // 无需校验可以直接进行对应的操作
const arrays: any[] = ['sj', 18, {}]

unknown 类型

unknown 是 TypeScript 中比较特殊的一种类型，它用于描述类型不确定的变量.

和 any 类型有点类似，但是 unknown 类型的值上做任何事情都是不合法的.

let foo: unknown = 'aaa'

foo = '123'

// unknown 类型默认情况下载上面进行任何操作都是非法的,
// 要求必须进行类型校验(类型缩小),之后才能进行对应的操作
if (typeof foo === 'string') {
	console.log(foo.length)
}

void 类型

void 通常用来指定一个函数是没有返回值的，那么它的返回值就是 void 类型

// 1.在 TS 中函数没有返回值那么就是 void 类型
// 2.如果返回值是 void 类型,那么我们返回 undefined(TS允许而已,不会这么做)
function sum(num1: number, num2: number): void {
	console.log(num1 + num2) // 444
	// return 没有返回值
	return undefined
}
sum(123, 321)
// 应用场景:用来指定函数 函数/对象
type FooType = () => viod
const fooL: FooType = () => {}

// 例子
// 1.定义要求传入的函数类型
type ExecFnType = (...args: any[]) => void
// 2.定义一个函数,并且接受的参数也是一个函数,而且这个函数的类型必须是 ExecFnType
function delayExecFn(fn: ExecFnType) {
	setTimeout(() => {
		fn('sj', 19)
	}, 1000)
}
// 3.执行上面的函数并且传入一个匿名函数
delayExecFn((name, age) => {
	console.log(name, age)
})

export {}

never 类型(了解)

1. 开发中很少实际去定义 never 类型,在某些情况下会自动推导出 never 类型
2. 开发框架(工具)的时候会使用到 never 3.封装一些工具的时候,可以使 never 类型

// 1.有些函数从不返回值：
function fail(msg: string): never {
	throw new Error(msg)
}
// 2.返回空数组
function arrays() {
	return []
}
// 3.never 类型表示从未观察到的值。
function foo(msg: string | number) {
	switch (typeof msg) {
		case 'string':
			console.log(msg.length)
			break
		case 'number':
			console.log(msg)
			break
		default:
			const check: never = msg
	}
}

tuple 元组类型

[元组类型]元组类型是另一种 Array 类型，它确切地知道它包含多少个元素，以及它在特定位置包含哪些类型。

// 元组类型存信息
const infos: [srting, number] = ['sj', 19]

// 函数
function useState(initialState: number): [number, (newValue: number) => void] {
	let stateValue = initialState
	function setValue(newValue: number) {
		stateValue = newValue
	}
	return [stateValue, setValue]
}

const [count, setCount] = useState(10)
console.log(count, setCount)