前言

本篇博客用于补充在商城后台管理系统中出现的 TypeScript 知识点。

知识整理

TypeScript解决了JavaScript存在的很多设计缺陷，尤其是关于类型检测的。从开发者长远的角度来看，学习TypeScript有助于前端程序员培养 类型思维，这种思维方式对于完成大型项目尤为重要。个人用起来感觉很像Java。

TypeScript的特点

  • 始于JavaScript，归于JavaScript
  • TypeScript是一个强大的工具，用于构建大型项目
    • 类型允许JavaScript开发者在开发JavaScript应用程序时，使用高效的开发工具和常用操作，比如静态检查 和代码重构
    • 类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口 和洞察现有JavaScript库的行为；
  • 拥有先进的 JavaScript
    • TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和Decorators，以帮助建立健壮的组件 ；
    • 这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的ECMAScript3（或更新版本）的JavaScript；(babel编译器的使用)

变量声明

在TypeScript中定义变量需要指定 标识符 的类型。声明了类型后TypeScript就会进行类型检测 ，声明的类型可以称之为类型注解； 比如我们声明一个message，完整的写法如下：

1
let message: string = "Hello World"

如果我们在使用时赋值给message其他的类型，就会报错。

1
message1 = 123 // Type 'message' is not assignable to type 'string'

在开发中，有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型，我们更希望可以通过TypeScript本身的特性帮助我们推断出对应的变量类型：

1
2
3
let message = "Hello World"
// 在一个变量第一次赋值时，ts会根据后面的赋值内容的类型，来推断出变量的类型
message = 123 // // Type 'message' is not assignable to type 'string'

ts与js的关系

数据类型

TypeScript在JavaScript的基础上新增了一些数据类型。

any类型

在某些情况下，我们确实无法确定一个变量的类型，并且可能它会发生一些变化，这个时候我们可以使用any类型（类似于Dart语言中的dynamic类型）；

any类型有点像一种讨巧的TypeScript手段：我们可以对any类型的变量进行任何的操作，包括获取不存在的属性、方法；赋值任何的值，比如数字、字符串的值。偷懒时可以这么干qvq

unknown类型

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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：

1
2
3
4
5
6
7
function sum(num1: number, num2: number): void {
  console.log(num1 + num2)
}

function sum(num1: number, num2: number) {
  console.log(num1 + num2)
}

never类型

never 表示永远不会发生值的类型，以一个函数为例：

  • 如果一个函数中是一个死循环或者抛出一个异常，那么这个函数会返回东西吗？
  • 不会，那么写void类型或者其他类型作为返回值类型都不合适，我们就可以使用never类型；
1
2
3
4
5
6
7
8
9
10
11
function foo(): never {
  // 死循环
  while(true) {
		console.log("123")
  }
}

function bar(): never {
  // 抛出异常
  throw new Error()
}

tuple类型

tuple是元组类型，很多语言中也有这种数据类型，比如Python、Swift等。

1
2
3
const info: [string, number, number] = ["why", 18, 1.88]
const name = info[0]
const age = info[1]

tuple和数组有什么区别呢？

首先，数组中通常建议存放相同类型的元素，不同类型的元素是不推荐放在数组中。（可以放在对象或者元组中）其次，元组中每个元素都有自己特性的类型，根据索引值获取到的值可以确定对应的类型；

1
2
3
4
5
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类型