Typescript - 类型有2种情况怎么办？

1，问题描述

现在有个需求：

接口返回的数据如下，data类型会随着 code 的值变化，并只有这2种情况

• code === null时，data是对象
• code !== null 时，data是字符串

{
	code: null,
	data: {
		status: 'success',
		order_no: 'a-b-c'
	}
}

{
	code: '006',
	data: 'xxxxxx'
}

定义的返回参数的类型：

type ResponseOrder = {
	code: string | null
	data: string | {
		status: string
		order_no: string
	}
}

在使用时会报错，虽然此时确定 data 是一个对象。

function getResult(): Promise<ResponseOrder> {}

const payResult = await getResult()
if (payResult.code === null) {
  // 报错：类型“string | { order_no: string; status: string; }”上不存在属性“status”ts. (ts2339)
  const status = payResult.data.status
}

2，问题解决

2.1，typeof 类型保护

typeof 是 JavaScript 中的运算符，表示操作数的类型。

在 Typescript 中使用方法类似。在一个条件块中使用时，会推导出操作数的类型，相当于类型断言。

举例：

function doSome(x: number | string) {
  // 在 if 条件块中，明确告诉 TypeScript，x 的类型是 string
  if (typeof x === 'string') {
    console.log(x.abc(1)); // 报错: 'abc' 方法并没有存在于 string 上
    console.log(x.substring(1)); // ok
  }

  x.substring(1); // 报错：Error: 无法保证 x 是 string 类型
}

所以，上面的问题可以这样写

const status = typeof payResult.data === 'object' && payResult.data.status

2.2，联合类型

2种情况分开写

type ResponseOrder = {
  code: null;
  data:{
    status: string;
    order_no: string;
  }
} | {
  code: string
  data: string
};

2.3，断言为 any

没有办法的办法

const status = (payResult.data as any).status

以上。