TypeScript-起步——TypeScript类型（二）

站长

2022年12月05日 01:42 · 阅读数 23

③ TypeScript类型

Ⅰ. any类型

any尽量少用！！

在某些情况下，我们确实无法确定一个变量的类型，并且可能它会发生一些变化，这个时候我们可以使用any类型（类似于Dart语言中的dynamic类型）。
any类型有点像一种讨巧的TypeScript手段：
- 我们可以对any类型的变量进行任何的操作，包括获取不存在的属性、方法；
- 我们给一个any类型的变量赋值任何的值，比如数字、字符串的值；
```
let message: any = 'Hello TypeScript!'

message = 123
message = true
message = {}

const arr: any[] = [1, 'a', {}]
```
如果对于某些情况的处理过于繁琐不希望添加规定的类型注解，或者在引入一些第三方库时，缺失了类型注解，这个时候我们可以使用any：
- 包括在Vue源码中，也会使用到any来进行某些类型的适配；

Ⅱ. unknown类型

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

什么意思呢？我们来看下面的场景：

function bar(): string {
  return 'bar'
}

function foo(): number {
  return 123
}

let flag = true
let result: unknown

if(flag) {
  result = foo()
} else {
  result = bar()
}

可以看到，当不确定要获取的值是什么类型的时候，就可以给变量设置unknown类型注解

Ⅲ. void类型

void通常用来指定一个函数是没有返回值的，那么它的返回值就是void类型：
- 我们可以将null和undefined赋值给void类型，也就是函数可以返回null或者undefined
```
function sum(num1: number, num2: number) {
  console.log(num1 + num2);
}
```
这个函数我们没有写任何类型，那么它默认返回值的类型就是void的，当函数没有返回值的话，可以显示的来指定返回值是void：
```
function sum(num1: number, num2: number): void{
  console.log(num1 + num2);
}
```
- 注意： 一般情况下函数没有返回值的话，void类型一般不写

Ⅳ. never类型

never 表示永远不会发生值的类型， 比如一个函数：
- 如果一个函数中是一个死循环或者抛出一个异常，那么这个函数会返回东西吗？
- 不会，那么写void类型或者其他类型作为返回值类型都不合适，我们就可以使用never类型；
```
function loopFn(): never {
  while (true) {
    console.log(123);
  }
}

function loopErr(): never {
  throw new Error()
}
```

never有什么样的应用场景呢？这里我们举一个官网的例子，但是它用到了联合类型，后面我们会讲到：

function handleMessage(message: string | number) {
  switch (typeof message) {
    case 'string':
      console.log('string');
      break;
    case 'number':
      console.log('number');
      break;
    default:
      const check: never = message
  }
}

Ⅴ. tuple（元祖）类型

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

const arr: [string, number, boolean] = ['a', 1, true];
const item1 = arr[0];
const item2 = arr[1];
const item3 = arr[2];

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

（1）Tuples的应用场景

那么tuple在什么地方使用的是最多的呢？

tuple通常可以作为返回的值，在使用的时候会非常的方便；

function useState<T>(state: T): [T, (newState: T) => void] {
  let currentState = state;

  const changeState = (newState: T) => {
    currentState = newState;

    return currentState
  }

  return [currentState, changeState]
}

const [counter, setCounter] = useState('Hello')

console.log(counter); // Hello
console.log(setCounter('TypeScript!')); // TypeScript!