ts类型断言(一) ts的类型

类型断言(Type Assertion)可以用来手动指定一个值的类型。

语法

值 as 类型
//或者
<类型>值

注意??：在tsx语法(React的jsx语法的ts版)中必须使用前者，即值 as 类型。

所以：大家在使用类型断言时，建议使用 值 as 类型 这样的语法。

类型断言用途

1、将一个联合类型断言为其中一个类型

当TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型共有的属性或方法:

interface people {
  name: string; 
  run(): void;
}
interface fish {
  name: string; 
  swim(): void;
}

而有时候，我们确实需要在还不确定类型的时候就访问其中一个类型特有的属性或方法， 比如:

interface people {
  name: string; 
  run(): void;
}
interface fish { 
  name: string; 
  swim(): void;
}
function isPeople(animal: people | fish) {
  if (typeof animal.swim === ' function') {
    return true;
  }
    return false;
}
// error: Property ' swim' does not exist on type 'people| fish'./
//Property' swim' does not exist on type' people ' .

上面的例子中，获取 animal.swim 的时候会报错。

这时我们可以使用类型断言，将 animal 断言成 fish

interface people { 
  name: string;
  run(): void;
}
interface fish { 
  name: string; 
  swim(): void;
}
function isPeople(animal: people | fish) { 
  if (typeof (animal as fish) .swim ===' function') {
    return true;
  }
  return false;
}

这样就可以解决访问 animal.swim 时报错的问题了。

需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时的错误:

interface people{
  name: string; 
  run(): void;
}

interface fish {
  name: string; 
  swim(): void;
}
function swim(animal: people| fish) { 
  (animal as fish).swim();
}
const mySelf: people = {
  name:'胖奶奶与胖小伙',
  run:() => { 
    console.1og( 'run') 
  }
};
swim(mySelf);

上面的例子编译时不会报错，但在运行时会报错:

//Uncaught TypeError: animal.swim is not a function^

原因是(animal as fish).swim()这段代码隐藏了animal

可能为people 的情况，将animal 直接断言为fish，而TypeScript编译器信任了我们的断言，故在调用swim() 时间没有编译错误。

可是swim 函数接受的参数是people | fish ，但是传入的参数是people类型的变量，由于people上没有 swim 方法，就会导致运行时出现错误了。总之，使用类型断言时一定要格外小心，尽量避免断言后调用方法或引用深层属性，以减少不必要的运行时错误。

2、将一个父类断言为更加具体的子类。当类之间有继承关系时，类型断言也是很常见

class ApiError extends Error { 
  code: number = 0 ;
}
class AxisoError extends Error { 
  statusCode: number = 200;
}
const isApiError = (error: Error) => {
	if (typeof (error as ApiError).code === ' number ' ) {
    return true;
  }
	return false;
}

我们声明了函数 isApiError, 它用来判断传入的参数是不是ApiError类型，为了实现这样一 个函数，它的参数的类型肯定是比较抽象的父类 Error,这样的话这个函数就能接受Error 或它的子类作为参数了。

但是由于父类Error中没有code属性，故直接获取error.code会报错，需要使用类型断言获取(error as ApiError).code。在这个例子中有一个更合适的方式来判断是不是 ApiError,那就是使用instanceof

const isApiError = (error: Error) => {
  if (typeof (error instanceof ApiError).code === ' number ' ) {
  	return true;
  }
	return false;
}

上面的例子中，确实使用 instanceof 更加合适，因为 ApiError是一个 JavaScript 的类，能够通过 instanceof 来判断error是否是它的实例。

但是有的情况下 ApiError 和 HttpError 不是一个真正的类， 而只是一个TypeScript 的接口(interface) ，接口是一个类型，不是一个真正的值，它在编译结果中会 被删除，当然就无法使用instanceof 来做运行时的判断了:

interface ApiError extends Error {
  code: number;
}
interface AxisoError extends Error {
  statusCode: number;
}
const isApiError = (error: Error) => {
  if (error instanceof ApiError) {
    return true;
	}
	return false;
}
//error:' ApiError' only refers to a type, but is being used as a value here .

此时就只能用类型断言，通过判断是否存在code 属性，来判断传入的参数是不是ApiError 了。正确做法：

interface ApiError extends Error { 
  code: number;
}
interface HttpError extends Error { 
  statusCode: number;
}
const isApiError = (error: Error) => {
	if (typeof (error as ApiError).code === ' number') {
		return true;
	}
	return false;
}