1

I'm new to Typescript and after reading some related articles it seems that by using Typescript in React, propTypes definitions are no longer needed.

But by checking some of the most populars React Component Libraries projects

like Material-IU:

or Semantic UI React

or React Toolbox

...it seems some big projects are using both. So, i'm a bit confused about this. And i don't really get the purpose of these *.d.ts files

Why are they using both? What is the purpose of the *.d.ts files? How does this fit in a react development workflow?

My actual idea about this this is that:

  • *.d.ts should contain the types for the component's props
  • typescript will launch compilation errors if some prop is receiving a wrong type of data
  • the React component definition can avoid defining the propTypes (as this is handled now by Typescript in a different file)

Is this correct? Can anyone shed some light on this? :)

Thanks in advance!!

Improve this question
1
  • *.d.ts is a definition file for typescript Commented May 22, 2018 at 8:27

1 Answer 1

Reset to default
3

The TypeScript definition (.d.ts) files define the type information used by the TypeScript compiler, and in many IDEs these files are also used to provide feedback during development. Aside from the definitions provided by vendors, you can use interfaces when writing your React components in TypeScript. A common use case is to define the type of the props object.

One benefit of using a interface, as opposed to defining propTypes, is that this code disappears at runtime, so if you pass the right props you don't need to run any type checks in the compiled version of your app.

That said, there are situations where it is still helpful to check the type of props passed to a component at runtime. For example, maybe you are using data from an external API and wanted to make sure that the format is what you expected. In this case, it would make sense to use propTypes.

Also, as rightly pointed out in the comments, the propTypes are useful when the library is consumed by code written in JavaScript, which would use a compiled version of the code that would otherwise lack the type information.

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

5 Comments

These libraries also have propTypes for consumers that aren't using typescript
@wgcrouch yes I failed to mention that, edited, thanks.
So, are developers writing props checkings (typescript → compiling time & propTypes → runtime) twice in some projects? Isn't there a way to automatically create one .d.ts from propTypes or the opposite? What would be a productive workflow for managing this?
Yes, library writers are doing both things like you say. I guess it might be possible in some simple cases to write one and have the other generated automatically but it wouldn't be possible to make a general solution for this, since different information is available at compile/run time. My personal "solution" is just to use TypeScript and skip the propTypes entirely.
Thanks for the explanations Tom!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.