how to add type declaration to react-typescript project with CRA

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.

i.e. 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.

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?

have you try the following format in your foo.d.ts? 'export function foo() {...};' — Chris Chen, Mar 18 '19 at 23:07
and what do you mean by that? an implementation for foo? @ChrisChen — Amir-Mousavi, Mar 19 '19 at 21:15

score 1 · Answer 1 · answered Nov 09 '19 at 11:41

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

do we need to add the `kendo-ui-core.d.ts` in a specific folder like `src/@types` and then add that folder to `tsconfig`? — Amir-Mousavi, Mar 19 '20 at 18:18

score -2 · Answer 2 · answered Mar 18 '19 at 22:49

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

answered Mar 18 '19 at 22:49

Tyro Hunter

755
1
8
20

Would love to see some arguments by those who downvoted the answer – idleberg Jan 18 '21 at 13:22
@idleberg It's not the TS definition for the `foo` library. – Gynekolog Aug 13 '21 at 13:41

how to add type declaration to react-typescript project with CRA

2 Answers2