I have read through dozens of pages trying to figure out the best way to setup my type definitions in TypeScript.
- I used to have a
typings.ts
file somewhere in my project and would then import the types in each and every file they are needed, by doing something like
import {IMyCustomType} from './typings';
and inside my typings file I would declare my types like:
export interface IMyCustomType {...}
- After doing some work with this boilerplate: , I have realized that they use a
models.d.ts
in atypes
folder at the root of the project.
Instead of using export interface IMyCustomType {..}
they use declare interface IMyCustomType {..}
This setup has one big advantage for me: I don't need to explicitly import the types in each file and the interfaces are available within the entire project directly.
Questions:
1) Is it correct that all **/*.d.ts
files will be automatically imported during the pilation ?
2) Is it a good practice to use declare
and make all types available to the entire project ?
3) Is there a standard directory path and name where I should put my type definitions ?
Basically I am trying to make my global interfaces automatically available everywhere in my project without having to import them explicitely. Is this something I should do and how do I setup my project to achieve this ?
UPDATE
After raising this with my team, most were against having ambient types, so we decided to import types whenever needed. To make this easier we are relying on our IDEs to automatically import said types.
I have read through dozens of pages trying to figure out the best way to setup my type definitions in TypeScript.
- I used to have a
typings.ts
file somewhere in my project and would then import the types in each and every file they are needed, by doing something like
import {IMyCustomType} from './typings';
and inside my typings file I would declare my types like:
export interface IMyCustomType {...}
- After doing some work with this boilerplate: https://github./rokoroku/react-redux-typescript-boilerplate/tree/master/types, I have realized that they use a
models.d.ts
in atypes
folder at the root of the project.
Instead of using export interface IMyCustomType {..}
they use declare interface IMyCustomType {..}
This setup has one big advantage for me: I don't need to explicitly import the types in each file and the interfaces are available within the entire project directly.
Questions:
1) Is it correct that all **/*.d.ts
files will be automatically imported during the pilation ?
2) Is it a good practice to use declare
and make all types available to the entire project ?
3) Is there a standard directory path and name where I should put my type definitions ?
Basically I am trying to make my global interfaces automatically available everywhere in my project without having to import them explicitely. Is this something I should do and how do I setup my project to achieve this ?
UPDATE
After raising this with my team, most were against having ambient types, so we decided to import types whenever needed. To make this easier we are relying on our IDEs to automatically import said types.
Share Improve this question edited Jun 8, 2018 at 1:53 klugjo asked Nov 10, 2017 at 6:58 klugjoklugjo 20.9k10 gold badges64 silver badges81 bronze badges 2- Could you elaborate the reasons behind your team's decision against having ambient types? – manjunatha_d Commented Jul 2, 2020 at 15:40
- 1 I don't remember exactly as this was a while ago, but 4 years later I don't see any issue with declaring and importing types directly. using ambient types would pollute the global space and create potential collisions. Only use ambient types to declare types for modules or globals declared outside of your app – klugjo Commented Jul 2, 2020 at 20:56
2 Answers
Reset to default 1Since Typescript 2, you should be using d.ts
files. With this approach you reduce a lot of your config files.
You can find more about it in:
- typings vs @types NPM scope
- https://georgedyrra./2017/06/04/migrating-from-typings-to-npm-types/
You should use the @types NPM scope. You can find a more detailed guide in the Typescript Handbook, but basically all you need to do is run an NPM mand:
npm install --save @types/lodash
About your questions, basically by using this method you don't need to worry about type definition files at all, their existence for third party libraries is transparent to you (you don't care where they are placed or how to import them, you only need to import the modules themselves).
About using declare
, I think that's a separate topic, but you can check out this question: What's the difference between "declare class" and "interface" in TypeScript