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

Question

我已经用CRA和yarn create react-app my-app --typescript命令创建了一个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文件夹中找到声明

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

Answer 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;
}

Answer 2

这是可行的：

/* create src/CustomTypes.ts */

namespace MyCustomType {
  export type foo = number;
}

export default MyCustomType;

像这样使用：

import MyCustomType from "src/CustomTypes";

const num: MyCustomType.foo = 123;