Sign upSign InSign upSign InIrene SmolchenkoFollowITNEXT--ListenShareWelcome! In this article, we’ll explore TypeScript’s Declaration Files and learn how to effectively utilize them in your code. 🤩 By the end, you’ll have a solid understanding of writing declaration files, emitting them during compilation, augmenting modules, and discovering the benefits of DefinitelyTyped and @types. Let’s dive right in!Declaration files in TypeScript are used to provide type information about JavaScript libraries or modules that don’t have built-in TypeScript support. They allow you to use external JavaScript code in a TypeScript project while still benefiting from TypeScript’s static type checking.These files usually have the .d.ts extension and include type declarations for variables, functions, classes, interfaces, and other elements found in a JavaScript code.Suppose you have a JavaScript library called math-library.js that contains the following code:To use it in TypeScript and have type checking, you can create a declaration file called math-library.d.ts with the following contents (we will demonstrate methods to create such files in the upcoming sections):By using the declare keyword we define the type information for the variables and functions exported from the JavaScript code.By importing the functions and variables from the declaration file, you can use them in your TypeScript code with type checking and IntelliSense support.Both DefinitelyTyped and @types play crucial roles in providing TypeScript declaration files for existing JavaScript libraries/code.A community-driven project that aims to provide high-quality TypeScript declaration files for popular JavaScript libraries. It serves as a repository of declaration files maintained by the TypeScript community.The @types scope is a convention used in the npm ecosystem to publish TypeScript declaration files for JS libraries. It is closely related to the DefinitelyTyped project.With @types, developers can install declaration files for a specific JS library using npm. (We will provide an example in the upcoming section)You can manually create declaration files for JS libraries that don’t provide their own declaration files. This allows you to write type definitions and use the library in your TypeScript code with type safety.In addition to manual creation, when using the TypeScript Compiler, you have the option to automatically generate declaration files by either —By doing so, tsc will generate a declaration file (app.d.ts) along with the compiled JS file (app.js). The declaration file will contain the necessary type information for the entities defined in your TypeScript code.Many popular JavaScript libraries, such as React, jQuery, and lodash, have official or community-contributed declaration files available. These declaration files provide type information for the library’s API, allowing seamless integration with TypeScript.For example, if you’re using npm as your package manager, you can search for declaration files using @types. These are packages specifically created to provide TypeScript declaration files for popular JS libraries. To illustrate, the command below installs the TypeScript declaration files for React:npm install @types/reactOnce the declaration files are installed, you can start using the JS library in your TypeScript code.It’s important to note that not all JavaScript libraries have corresponding @types packages. In such cases, you might need to manually create declaration files or search for external sources like DefinitelyTyped to find the necessary type definitions.Writing declaration files can be a bit challenging, especially when dealing with complex JavaScript codebases. It requires a good understanding of TypeScript’s type system, and a deep understanding of the code you’re targeting.However, despite the challenges, the effort is worthwhile as it brings significant benefits. With that in mind, here’s an overview of the process for writing declaration files:Examples:7. When referencing types from other declaration files or libraries, you can utilize import or /// directives to access the required types. In the upcoming section, we’ll provide examples to illustrate this concept.8. Test your declaration file by using it in your TS code. Ensure that the type checking and autocompletion work as expected. Make necessary refinements based on feedback or changes in the JS code.9. Add comments and documentation to your declaration file to explain the usage and purpose of the types.10. If relevant, share your declaration files with the community by publishing them or contributing them to existing repositories like DefinitelyTyped.Once the declaration files are generated, they can be used by consumers of your code. Consumers can reference the declaration files in their own projects to gain access to the type information provided by your TS code.Let’s explore how to reference types from other declaration files or libraries using import and /// directives.Assuming you have a declaration file for a module named “myModule” that relies on types from an external library called “externalLibrary”. Here’s how you can reference the types:In this example, the directive /// informs the TS compiler to include the type definitions from the ‘externalLibrary’ for use within the ‘myModule’ module.Below we’ll examine the use of DefinitelyTyped. When using DefinitelyTyped, you can access a specific type from a JS library by following these steps:Augmenting modules with declarations provides a way to extend existing modules without modifying their source code directly. This allows to provide additional type information, add new functions or variables, or enhance the existing module declarations.When augmenting an external module, you need to use the declare module syntax to extend the module’s declaration:Inside the module block, we can add new types, functions, or variables that extend the original module’s declaration. In this case, we add a new additionalFunction() to the externalModule.This augmentation file should be placed in a location where it will be included in the TS compilation. To do this, follow these steps:You can also augment local modules defined in your own codebase. For local module augmentations, the augmentation file should be included or imported in a TS file where the original module is used. This ensures that the augmentations take effect during the compilation.Here’s how you can ensure the augmentations take effect:In this example, we use the declare module syntax to augment the ‘./myLocalModule’ module with an additional property address in the MyInterface interface and a new function myExtendedFunction().We import the original module members MyInterface and myFunction from ‘./myLocalModule’. We also import the ‘myLocalModule-augmentations.ts’ file. By including the augmentation file in the TS file where the original module is used, the augmentations are applied, and the additional types and functions become available.And that concludes our discussion on declaration files in TypeScript! We’ve explored their definition and demonstrated how to use them effectively.I hope you found this article informative and enjoyable. 🧩Stay tuned for more articles on advanced TypeScript features in the future, as there’s plenty more to discover! In the meantime, feel free to check out my other articles for additional helpful content.----ITNEXT🍴🛌🏻 👩🏻‍💻 🔁 Front End Web Developer | Troubleshooter | In-depth Tech Writer | Financial market trader | Duolingo Streak Master (4+ Years) 🦉📚HelpStatusWritersBlogCareersPrivacyTermsAboutText to speechTeams