React+TypeScript项目重构组件时InvoiceDataType未定义如何解决

报错原因 #

TypeScript 的类型声明默认只在当前定义文件内生效，你将 InvoiceDataType 定义在 InvoiceList.tsx 中且未做导出处理，只有该文件内部可以访问该类型。而 App.tsx 中声明 data 变量时指定了 InvoiceDataType 类型，自然无法识别到这个未引入的类型，因此抛出报错。
组件未拆分时所有代码都在同一个文件内，类型声明和使用位置作用域一致，所以不会报错。

修复方案 #

提供两种常用的修复方式，可根据实际场景选择：

方案1：从组件文件导出并导入类型（适合仅两处使用该类型的简单场景） #

1. 修改 InvoiceList.tsx，给需要对外使用的类型添加 export 关键字：

// InvoiceList.tsx 调整部分代码
export type InvoiceDataType = {
  customerName: string;
  invoices: InvoiceType[];
};

// 关联的子类型如果后续有复用需求也可以同步导出
export type PaymentStatusType = "paid" | "pending" | "late";
export type InvoiceType = {
  id: number;
  name: string;
  total: string;
  paymentStatus: PaymentStatusType;
};

interface IInvoiceListProps {
  invoiceData: InvoiceDataType;
  logo?: string;
}

2. 在 App.tsx 中导入该类型即可：

// App.tsx 调整导入语句，使用type前缀标识导入的是TS类型，打包时会自动剔除无冗余
import { InvoiceList, type InvoiceDataType } from "./components/InvoiceList";

方案2：抽离公共类型到单独文件（适合类型多处复用的中大型项目） #

1. 新建公共类型存放文件，例如 src/types/invoice.ts，把所有发票相关的类型统一放到该文件导出：

// src/types/invoice.ts
export type PaymentStatusType = "paid" | "pending" | "late";
export type InvoiceType = {
  id: number;
  name: string;
  total: string;
  paymentStatus: PaymentStatusType;
};
export type InvoiceDataType = {
  customerName: string;
  invoices: InvoiceType[];
};

2. 分别在两个文件中导入需要的类型：

// App.tsx
import { InvoiceList } from "./components/InvoiceList";
import type { InvoiceDataType } from "./types/invoice";

// InvoiceList.tsx
import type { InvoiceDataType, InvoiceType, PaymentStatusType } from "../types/invoice";

interface IInvoiceListProps {
  invoiceData: InvoiceDataType;
  logo?: string;
}

额外注意事项 #

你的组件文件中包含JSX语法，建议使用 .tsx 作为后缀名，不要用 .ts，避免触发TS的语法校验报错。

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