如何使用 CRA 向 react-typescript 项目添加类型声明答案

【问题标题】：how to add type declaration to react-typescript project with CRA如何使用 CRA 向 react-typescript 项目添加类型声明
【发布时间】：2019-08-09 09:22:34
【问题描述】：

我使用命令 yarn create react-app my-app --typescript 创建了一个带有 CRA 的 react typescript 项目

现在我安装了一个模块foo，默认情况下没有任何类型，不在defentlytyped 存储库中。

即在一个组件中，我有

import {bar} from 'foo';

抛出错误Type error: Could not find a declaration file for module 'foo'. '/*/node_modules/foo/dist/entry.js' implicitly has an 'any' type.

我在项目根目录的 types 文件夹中创建了 foo.d.ts，例如

declare module 'foo'{ import * as React from 'react' }

只是将foo 设为any 类型，但仍然会出现相同的错误。似乎任何编译器（webpack，其他转译器）都没有在 types 文件夹中找到声明

如何在项目中添加自定义类型声明？

【问题讨论】：

您是否在 foo.d.ts 中尝试过以下格式？ '导出函数 foo() {...};'
那是什么意思？ foo 的实现？ @ChrisChen

标签： reactjs typescript create-react-app type-declaration react-tsx

【解决方案1】：

这是一个真实的用例示例。我设法将kendo-ui-core 集成到 CRA+Typescript 中。

问题在于 kendo-ui-core 没有分型，即分型有不同的名称：@types/kendo-ui

Typescript 抱怨没有类型定义

要解决此问题，请在您的 /src 目录中创建一个名为 kendo-ui-core.d.ts 的文件，其中包含以下内容：

// src/kendo-ui-core.d.ts
declare module 'kendo-ui-core' {
  import * as KendoTypings from '@types/kendo-ui';
  export = KendoTypings;
}

【讨论】：

我们是否需要将kendo-ui-core.d.ts 添加到src/@types 等特定文件夹中，然后将该文件夹添加到tsconfig？

【解决方案2】：

这行得通：

/* create src/CustomTypes.ts */

namespace MyCustomType {
  export type foo = number;
}

export default MyCustomType;

这样使用：

import MyCustomType from "src/CustomTypes";

const num: MyCustomType.foo = 123;

【讨论】：

希望看到那些对答案投反对票的人提出的一些论点
@idleberg 这不是 foo 库的 TS 定义。