学习Typescript (二): 类型推导和联合类型

2021-10-09 Typescript

类型推导

什么是类型推导

编程语言中能够自动推导出值的类型的能力，定义时未赋值就会将它推论为any类型， 如果定义的时候就赋值就能利用到类型推导。

let name = 'vincent'
name = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

let name = 'vincent'
name = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

等价于

let name: string = 'vincet';
name = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

let name: string = 'vincet';
name = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

因为TS会在没有指定类型的时候推测出一个类型，这就是类型推导。

如果在定义的时候没有赋值，不管之后有没有赋值，都会被推断成为any类型而不会被类型检查

let name;
name = 'vincent'
name = 7;

let name;
name = 'vincent'
name = 7;

联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

let name:string | number;
name = 'vincent'
name = 7

let name:string | number;
name = 'vincent'
name = 7

在声明变量的时候 指定变量的类型stringornumber, 在变量赋值的时候就可以赋值这两个类型的值。 但是不允许赋值其他类型的值，如

let name: string | number;
name= 'vincent'
name = 7

name = true;
// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
// Type 'boolean' is not assignable to type 'number'.

let name: string | number;
name= 'vincent'
name = 7

name = true;
// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
// Type 'boolean' is not assignable to type 'number'.

联合类型使用 |来分割类型 let name: string | number表示是 允许name的值的类型是number或者string，但是不能是其他类型。

访问联合类型的属性和方法

当typescript不确定一个联合类型的变量到底是哪个类型的时候，那么只能访问这些联合类型的所有类型里共有的属性或者方法。

function getLen (something: string| number):number {
  return something.length;
}
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.

function getLen (something: string| number):number {
  return something.length;
}
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.

length不是string和number共有的属性，所以会报错

访问string和number的共有属性是没有问题的

function getString(something: string| number): string{
  return something.toString();
}

function getString(something: string| number): string{
  return something.toString();
}

当联合类型的变量在赋值的时候，会根据类型推导的规则来推断出一个类型

let name:string|number;
name = 'vincent'
console.log(name.length) // 7
name = 7
console.log(name.length) // complier error
// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

let name:string|number;
name = 'vincent'
console.log(name.length) // 7
name = 7
console.log(name.length) // complier error
// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

在这里的name被推断成了string，访问它的length不会报错。 而在后面把name的值赋被推断成了number，所有在访问length的时候就会报错了。

参考

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# Typescript
···