javascript - TypeScript type definition best practices - Stack Overflow

admin管理员组

文章数量:1357716

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 a types 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 a types 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.

• javascript
• typescript
• typescript-typings

Share Improve this question Follow edited Jun 8, 2018 at 1:53 klugjo asked Nov 10, 2017 at 6:58 klugjoklugjo 20.9k1010 gold badges6464 silver badges8181 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Since 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

本文标签： javascriptTypeScript type definition best practicesStack Overflow