using React component library without @types

Question

I'm developing React with TypeScript

What I want to do is to use React component library without @types definition.

I'd like to use this library
https://github.com/react-component/calendar

In my React code, I wrote as below

import * as React from "react";
import * as ReactDOM from "react-dom";
import Calendar from 'rc-calendar';

ReactDOM.render(<Calendar />, document.getElementById('content'));

but I get error:

ERROR in ./index.tsx
(4,22): error TS2307: Cannot find module 'rc-calendar'.

I'm guessing this is because there is no type definition but the library above seems not have type definition file for typescript.
How could I use such library with TypeScript?

Javascript in Typescript without definition is perfectly legal. Are you certain you have this library in your node_modules and it is included in webpack (if you use it)? — gretro
– gretro, Commented Oct 24, 2016 at 4:36

Daniel Rosenwasser · Accepted Answer · 2016-10-24 06:26:49Z

13

In TypeScript 2.1, unless you're using --noImplicitAny, you will be able to just use this library without declaration files (provided that it's installed).

But since TS 2.1 isn't out yet, what you can do is create a file called externals.d.ts with the following content:

declare module "rc-calendar";

That basically tells TypeScript "hey, this thing exists, stop bugging me, and I want to use it however I want."

You can also give it a slightly better shape.

declare module "rc-calendar" {
    declare var calendar: any;
    export default calendar;
}

Now this thing can only be imported as a default import.

You can continue fleshing this thing out until it is sufficiently detailed.

answered Oct 24, 2016 at 6:26

Daniel Rosenwasser

24.2k14 gold badges54 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2875308 Over a year ago

Thanks, I could successfully compiled it

Pat Over a year ago

I understand that is an old answer but this seems like a hack. As importing the component like this does not bring in its prop types. So the props need to be hand crafted for it, without type checking.

Collectives™ on Stack Overflow

using React component library without @types

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related