本篇博客用于补充在商城后台管理系统中出现的 TypeScript
知识点。
TypeScript
解决了JavaScript
存在的很多设计缺陷,尤其是关于类型检测的。从开发者长远的角度来看,学习TypeScript
有助于前端程序员培养 类型思维,这种思维方式对于完成大型项目尤为重要。个人用起来感觉很像Java
。
babel
编译器的使用)在TypeScript中定义变量需要指定 标识符 的类型。声明了类型后TypeScript就会进行类型检测 ,声明的类型可以称之为类型注解; 比如我们声明一个message,完整的写法如下:
let message: string = "Hello World"
如果我们在使用时赋值给message
其他的类型,就会报错。
message1 = 123 // Type 'message' is not assignable to type 'string'
在开发中,有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型,我们更希望可以通过TypeScript本身的特性帮助我们推断出对应的变量类型:
let message = "Hello World"
// 在一个变量第一次赋值时,ts会根据后面的赋值内容的类型,来推断出变量的类型
message = 123 // // Type 'message' is not assignable to type 'string'
TypeScript
在JavaScript
的基础上新增了一些数据类型。
any类型
在某些情况下,我们确实无法确定一个变量的类型,并且可能它会发生一些变化,这个时候我们可以使用any类型(类似于Dart语言中的dynamic类型);
any类型有点像一种讨巧的TypeScript手段:我们可以对any类型的变量进行任何的操作,包括获取不存在的属性、方法;赋值任何的值,比如数字、字符串的值。偷懒时可以这么干qvq
unknown类型
unknown是TypeScript中比较特殊的一种类型,它用于描述类型不确定的变量。
function foo(): string {
return 'foo'
}
function bar(): number {
return 123
}
// unknown类型只能赋值给any和unknown类型
// any类型可以赋值给任意类型
const flag = true
let result: unknown
if (flag) {
result = foo()
} else {
result = bar()
}
if (typeof result === 'string') {
console.log(result.length)
}
export {}
void类型
void通常用来指定一个没有返回值的函数; 如果一个函数我们没有写任何类型,那么它默认返回值的类型就是void,我们也可以显示的来指定返回值是void:
function sum(num1: number, num2: number): void {
console.log(num1 + num2)
}
function sum(num1: number, num2: number) {
console.log(num1 + num2)
}
never类型
never 表示永远不会发生值的类型,以一个函数为例:
function foo(): never {
// 死循环
while(true) {
console.log("123")
}
}
function bar(): never {
// 抛出异常
throw new Error()
}
tuple类型
tuple是元组类型,很多语言中也有这种数据类型,比如Python、Swift等。
const info: [string, number, number] = ["why", 18, 1.88]
const name = info[0]
const age = info[1]
tuple和数组有什么区别呢?
首先,数组中通常建议存放相同类型的元素,不同类型的元素是不推荐放在数组中。(可以放在对象或者元组中)其次,元组中每个元素都有自己特性的类型,根据索引值获取到的值可以确定对应的类型;
const info: (string | number)[] = ["why", 18, 1.88]
const item1 = info[0] // 不能确定类型
const tinfo: [string, number, number] = ["why", 18, 1.88]
const item2 = tinfo[0] // 一定是string类型