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

Question

I have created a react typescript project with CRA with the command yarn create react-app my-app --typescript

now I have a module foo installed that does not have any typing not by default, not in defentlytyped repository.

ie in a component, I have

import {bar} from 'foo';

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

I created foo.d.ts in types folder at the root of the project like

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

just to have the foo as type any but still, get the same error. it seems that whatever compiler (webpack,other transpiler) does not find the declaration at types folder

how can I add custom type declaration to the project?

Answer 1

Here is a real use-case example. I managed to integrate kendo-ui-core into CRA+Typescript.

The problem was that there are no typings for kendo-ui-core, namely the typings have a different name: @types/kendo-ui

Typescript was complaining about not having type definitions

To resolve the issue, create a file called kendo-ui-core.d.ts in your /src directory with the following contents:

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

Answer 2

This works:

/* create src/CustomTypes.ts */

namespace MyCustomType {
  export type foo = number;
}

export default MyCustomType;

use like this:

import MyCustomType from "src/CustomTypes";

const num: MyCustomType.foo = 123;