TypeScript可空类型需逐层传递？是否存在更优处理方案？

你遇到的这个“可选属性逐层传递”的问题确实很常见，但TypeScript提供了不少方法来避免这种繁琐的代码，核心思路是把数据的可选性在顶层组件或状态层处理掉，不让子组件感知到这种不确定性。下面结合你的代码给出几种可行方案：

1. 利用加载状态做类型守卫（最推荐） #

你的reducer里已经定义了companiesReceived、featuredCompaniesReceived这类加载状态标记，这其实是绝佳的类型守卫依据。我们可以在顶层组件（比如HomePage）里先判断数据是否加载完成，只有当数据确定存在时再渲染子组件，这样子组件就能接收非可选的属性：

修改HomePage的渲染逻辑 #

export default class HomePage extends Component<{
  featuredCompanies?: Array<Company>,
  companies?: Array<Company>,
  countries?: Array<Country>,
  companiesReceived: boolean, // 把加载状态也传入props
  featuredCompaniesReceived: boolean,
  className: string
}, any> {
  render() {
    const { companies, countries, companiesReceived, featuredCompaniesReceived, className } = this.props;

    // 数据未加载完成时，显示加载状态
    if (!companiesReceived || !featuredCompaniesReceived || !countries) {
      return <div>Loading...</div>;
    }

    // 这里TypeScript会自动推断companies、countries为非空值
    return (
      <Main>
        <CompanyList className="ft-company-list" companies={companies} countries={countries} />
      </Main>
    )
  }
}

优化CompanyList的Props类型 #

此时CompanyList就不需要再定义可选属性了，直接用必填类型：

interface CompanyListProps {
  className: string;
  companies: Array<Company>; // 去掉?
  countries: Array<Country>; // 去掉?
}

export default class CompanyList extends Component<CompanyListProps, any> {
  // ... 组件逻辑
}

这种方式既保证了类型安全，又让子组件的职责更纯粹——只需要处理确定存在的数据，不用关心加载状态。

2. 给可选属性设置默认值（简单直接） #

如果不想依赖加载状态，也可以在接收可选属性的组件里，用**空值合并运算符??**给属性设置默认值，把可选值转换成非可选值后再传给子组件：

// HomePage里处理默认值
render() {
  const safeCompanies = this.props.companies ?? [];
  const safeCountries = this.props.countries ?? [];

  return (
    <Main>
      <CompanyList className="ft-company-list" companies={safeCompanies} countries={safeCountries} />
    </Main>
  )
}

这样CompanyList同样可以接收必填的数组类型，因为safeCompanies和safeCountries永远是一个数组（空数组或数据数组）。

3. 非空断言（谨慎使用） #

如果你能100%确定在渲染子组件时，可选属性一定存在（比如已经在父组件做过判断），可以用非空断言!来告诉TypeScript“这个值肯定不是undefined/null”：

// 前提：已经确保this.props.companies和countries存在
<CompanyList 
  className="ft-company-list" 
  companies={this.props.companies!} 
  countries={this.props.countries!} 
/>

⚠️ 注意：这种方式有风险，如果实际运行时属性为undefined，会导致运行时错误，所以只在你能完全把控数据存在性的场景下使用。

4. 重构状态类型（进阶方案） #

如果想从根源上优化类型定义，可以把状态拆分成联合类型，区分“加载中”和“已加载”两种状态，让TypeScript自动推断数据的存在性：

修改CompanyState的类型定义 #

// 定义不同状态的类型
type LoadingCompanyState = {
  status: 'loading';
  company: undefined;
  companies: undefined;
  featuredCompanies: undefined;
};

type LoadedCompanyState = {
  status: 'loaded';
  company: Company;
  companies: Array<Company>;
  featuredCompanies: Array<Company>;
};

// 联合类型
export type CompanyState = LoadingCompanyState | LoadedCompanyState;

重构reducer #

在reducer里根据动作返回不同状态：

const initialState: LoadingCompanyState = {
  status: 'loading',
  company: undefined,
  companies: undefined,
  featuredCompanies: undefined,
};

export function companies(state: CompanyState = initialState, action: CompaniesActionType): CompanyState {
  switch (action.type) {
    case ActionTypes.COMPANIES_RECEIVED:
      return { 
        status: 'loaded',
        company: state.company,
        companies: action.companies,
        featuredCompanies: state.featuredCompanies
      };
    // ... 其他case
    default:
      return state;
  }
}

这种方式下，组件里通过state.status就能精确判断数据是否存在，TypeScript会自动缩小类型范围，彻底避免可选属性的传递问题。

总结下来，最推荐的是第一种方案——利用加载状态做类型守卫，既符合组件职责分离的原则，又能保证类型安全，避免了可选属性逐层传递的繁琐。

内容的提问来源于stack exchange，提问作者PositiveGuy