The Importance of TypeScript Type Declaration Files

type declaration file in TS

The core part of TypeScript is to provide type support to JavaScript features, But how does TypeScript know these types, how does it knows the methods that are available on a particular class or an object?

Let’s consider the below code snippet:

const arr = [1,2,3];
arr.pus(4);
//Property 'pus' does not exist on type 'number[]'. Did you mean 'push'?
const str = 'hello';
str.indexOf(8);
// Argument of type 'number' is not assignable to parameter of type 'string'.
  • how does typescript know that Array object doesn’t have a method called pus and there is a method called push?
  • similarly, how does it know thatindexOf method of string object will take the number as a parameter?

The answer lies in the type declaration files.

What are type declaration files?

Type declaration files are the files with d.ts extension, where types were declared via interface or type.

These declaration files have no implementations. They only contain type information and have a .d.ts file extension.

How to create these type declaration files

TypeScript itself comes with a bunch of type declaration files to support all JavaScript features.

After installing TypeScript, navigate to the node_modules/typescript folder, here we can see a folder called lib with many files with the d.ts extension, these are the files that contain types related to JavaScript modules.

Let’s open the file called lib.es5.d.ts and explore it a bit, here we can see so many interfaces related to Array, String, Date, and a lot is declared.

So this is the place from where TypeScript will know about the types of native JavaScript features.

Type definitions for external libraries

What if we are installing some third-party libraries (npm packages), how will typescript know the types of the methods/modules or whatever in that library?

There are certain ways that help typescript in this case,

Bundled types

Most of the libraries are bundled with a type declaration file of their own in their package distribution, which means once we install a package, we will get all type declaration files inside node_modules/<package-name>/lib.

TypeScript uses this and does its magic.

Example: axios library, once we install this library means, we can see a file called index.d.ts under the folder node_modules/axios/index.d.ts which contains all the type information about the methods that are available in it.

DefinitelyTyped / @types

What if there is no type declaration file bundled with the library?

One good example is the lodash library, it doesn’t have a type declaration, so TypeScript will not know what are the methods available in it, what are the parameters and types each method will take,

So in this case we can manually install the types from a public repository called DefinitelyTyped

DefinitelyTyped is a centralized repository that contains type declaration files for almost all javascript libraries

We might have seen packages like @types/<package-name> in the package.json file, these packages are coming from DefinitelyTyped repo only

For example, to install types for lodash, we can do

npm install --save-dev @types/lodash

This will add a type declaration file for the loadash library under node_modules/@types/loadash folder.

All the type declarations that is added via DefinitelyTyped / @types will be saved under node_modules/@types/<package-name> folder.

TypeScript will automatically detect these declaration files and infer the type from it.

Custom declaration file

What if both of the above ways are not feasible, neither the type declaration is bundled with the library nor the same is not available in the DefinitelyTyped repository?

In this case, TypeScript will complain about missing type declaration file:

Could not find a declaration file for module '<module-name>'.

Note: above issue will arise only if we enabled the strict property in the tsconfig file.

To avoid the above issue, we can write our own type declaration file with the following content:

declare module "<module-name>";

Doing this will declare the module with any type, hence TypeScript will infer this module as any and won’t complain regarding type declaration.

We won’t get any type support for that module, we just silenced the TypeScript warning about missing type declaration.

‘Declaring a module as any is not an ideal solution, it completely removes the purpose of using TypeScript here, hence it is always good to choose a package with complete type support available.’

I believe this article gives you a basic understanding of the purpose of type declaration files in ts.

Connect with me on Linkedin & Github for more content

Go composable: Build apps faster like Lego

Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

Micro-Frontends

Design Systems

Code-Sharing and reuse

Monorepos

Learn more


The Importance of TypeScript Type Declaration Files was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

type declaration file in TS

The core part of TypeScript is to provide type support to JavaScript features, But how does TypeScript know these types, how does it knows the methods that are available on a particular class or an object?

Let’s consider the below code snippet:

const arr = [1,2,3];
arr.pus(4);
//Property 'pus' does not exist on type 'number[]'. Did you mean 'push'?
const str = 'hello';
str.indexOf(8);
// Argument of type 'number' is not assignable to parameter of type 'string'.
  • how does typescript know that Array object doesn’t have a method called pus and there is a method called push?
  • similarly, how does it know thatindexOf method of string object will take the number as a parameter?

The answer lies in the type declaration files.

What are type declaration files?

Type declaration files are the files with d.ts extension, where types were declared via interface or type.

These declaration files have no implementations. They only contain type information and have a .d.ts file extension.

How to create these type declaration files

TypeScript itself comes with a bunch of type declaration files to support all JavaScript features.

After installing TypeScript, navigate to the node_modules/typescript folder, here we can see a folder called lib with many files with the d.ts extension, these are the files that contain types related to JavaScript modules.

Let’s open the file called lib.es5.d.ts and explore it a bit, here we can see so many interfaces related to Array, String, Date, and a lot is declared.

So this is the place from where TypeScript will know about the types of native JavaScript features.

Type definitions for external libraries

What if we are installing some third-party libraries (npm packages), how will typescript know the types of the methods/modules or whatever in that library?

There are certain ways that help typescript in this case,

Bundled types

Most of the libraries are bundled with a type declaration file of their own in their package distribution, which means once we install a package, we will get all type declaration files inside node_modules/<package-name>/lib.

TypeScript uses this and does its magic.

Example: axios library, once we install this library means, we can see a file called index.d.ts under the folder node_modules/axios/index.d.ts which contains all the type information about the methods that are available in it.

DefinitelyTyped / @types

What if there is no type declaration file bundled with the library?

One good example is the lodash library, it doesn’t have a type declaration, so TypeScript will not know what are the methods available in it, what are the parameters and types each method will take,

So in this case we can manually install the types from a public repository called DefinitelyTyped

DefinitelyTyped is a centralized repository that contains type declaration files for almost all javascript libraries

We might have seen packages like @types/<package-name> in the package.json file, these packages are coming from DefinitelyTyped repo only

For example, to install types for lodash, we can do

npm install --save-dev @types/lodash

This will add a type declaration file for the loadash library under node_modules/@types/loadash folder.

All the type declarations that is added via DefinitelyTyped / @types will be saved under node_modules/@types/<package-name> folder.

TypeScript will automatically detect these declaration files and infer the type from it.

Custom declaration file

What if both of the above ways are not feasible, neither the type declaration is bundled with the library nor the same is not available in the DefinitelyTyped repository?

In this case, TypeScript will complain about missing type declaration file:

Could not find a declaration file for module '<module-name>'.

Note: above issue will arise only if we enabled the strict property in the tsconfig file.

To avoid the above issue, we can write our own type declaration file with the following content:

declare module "<module-name>";

Doing this will declare the module with any type, hence TypeScript will infer this module as any and won’t complain regarding type declaration.

We won’t get any type support for that module, we just silenced the TypeScript warning about missing type declaration.

‘Declaring a module as any is not an ideal solution, it completely removes the purpose of using TypeScript here, hence it is always good to choose a package with complete type support available.’

I believe this article gives you a basic understanding of the purpose of type declaration files in ts.

Connect with me on Linkedin & Github for more content

Go composable: Build apps faster like Lego

Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

Micro-Frontends

Design Systems

Code-Sharing and reuse

Monorepos

Learn more


The Importance of TypeScript Type Declaration Files was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
Makesh Kumar | Sciencx (2024-03-29T10:44:52+00:00) » The Importance of TypeScript Type Declaration Files. Retrieved from https://www.scien.cx/2022/09/09/the-importance-of-typescript-type-declaration-files/.
MLA
" » The Importance of TypeScript Type Declaration Files." Makesh Kumar | Sciencx - Friday September 9, 2022, https://www.scien.cx/2022/09/09/the-importance-of-typescript-type-declaration-files/
HARVARD
Makesh Kumar | Sciencx Friday September 9, 2022 » The Importance of TypeScript Type Declaration Files., viewed 2024-03-29T10:44:52+00:00,<https://www.scien.cx/2022/09/09/the-importance-of-typescript-type-declaration-files/>
VANCOUVER
Makesh Kumar | Sciencx - » The Importance of TypeScript Type Declaration Files. [Internet]. [Accessed 2024-03-29T10:44:52+00:00]. Available from: https://www.scien.cx/2022/09/09/the-importance-of-typescript-type-declaration-files/
CHICAGO
" » The Importance of TypeScript Type Declaration Files." Makesh Kumar | Sciencx - Accessed 2024-03-29T10:44:52+00:00. https://www.scien.cx/2022/09/09/the-importance-of-typescript-type-declaration-files/
IEEE
" » The Importance of TypeScript Type Declaration Files." Makesh Kumar | Sciencx [Online]. Available: https://www.scien.cx/2022/09/09/the-importance-of-typescript-type-declaration-files/. [Accessed: 2024-03-29T10:44:52+00:00]
rf:citation
» The Importance of TypeScript Type Declaration Files | Makesh Kumar | Sciencx | https://www.scien.cx/2022/09/09/the-importance-of-typescript-type-declaration-files/ | 2024-03-29T10:44:52+00:00
https://github.com/addpipe/simple-recorderjs-demo