如何有条件地告诉 TypeScript 使用哪种数据类型？答案

【问题标题】：How can you conditionally tell TypeScript which data type to use?如何有条件地告诉 TypeScript 使用哪种数据类型？
【发布时间】：2021-12-12 02:47:18
【问题描述】：

我有一个值可以返回字符串或对象的情况。

接口是这样定义的：

interface RoutesType {
  projects: string | {
    all: string;
    favorite: string;
    critical: string;
  };

值来自这里：

const routes = {
  projects: include('/projects/', {
    all: '',
    favorite: 'favorite/',
    critical: 'critical/'
  }
};

当我尝试访问routes.projects.critical时，它显示以下错误：

Property 'critical' does not exist on type 'string | { all: string; favorite: string; critical: string;}'. 
  Property 'critical' does not exist on type 'string'.

是否有任何合理的方法可以有条件地告诉 TS 我正在尝试访问对象 routes.projects 而不是字符串？

【问题讨论】：

请提供minimal reproducible example，清楚地表明您面临的问题。理想情况下，有人可以将代码放入像The TypeScript Playground (link here!) 这样的独立 IDE 中，然后立即着手解决问题，而无需首先重新创建它。所以应该没有错别字、不相关的错误或未声明/未导入的类型或值。

标签： reactjs typescript tsx

【解决方案1】：

您应该在访问之前检查属性projects 的类型：

if (typeof routes.projects !== 'string') {
    // you can now access routes.projects.critical
}

【讨论】：