Tips on setting up tsconfig.json for type declarations not found in @types?

When setting up my app, I am using a tsconfig.json file to specify which typings should be used.

{
   "compilerOptions": {
       "types" : ["node", "lodash", "express"]
   }
}

This configuration allows me to import typings from ./node_modules/@types/node, ./node_modules/@types/lodash, and ./node_modules/@types/expres.

Now my concern is how to configure typings for self-contained modules?

For example, let's take the zone.js package that contains both the library code and type definitions.

  • ./node_modules/zone.js/dist/zone.js
  • ./node_modules/zone.js/dist/zone.min.js
  • ./node_modules/zone.js/dist/zone.js.d.ts

What should be added to the tsconfig.json file in order to include zone.js.d.ts?

typescripttypescript-typings

Answer №1

All you need to do is include zone.js in the types section of your tsconfig.json: 

{
   "compilerOptions": {
       "types" : ["node", "lodash", "express", "zone.js"]
   }
}

Keep in mind that it's not necessary to list all types individually like this. Type definitions from the @types/* packages are automatically added.

If you remove the types declaration in your tsconfig.json, all the @types/* packages will be referenced by default.

To use zone.js, you can either include it in a single file as shown below:

/// <reference types="zone.js" />

Alternatively, if you want it to be accessible throughout your project, you can create an index.d.ts file at the root of your project and reference it there.

Answer №2

The file can be stored in any location, but it must be specified to the compiler either by including it in the tsconfig.json file or using a ///<reference>. To add it to tsconfig, include it in the include field:

{
    "compileOnSave": false,
    "compilerOptions": {
        ..
    },
    "include": [
        "zone.d.ts",
    ]
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sorting by date and time in a data grid using MUI X is simple with these steps

In the MaterialUI X data grid, I am facing an issue with sorting a column of dates in the format of DD/MM/YYYY HH:mm:ss. Currently, the default sorting only considers the date and does not account for the time which is causing issues with the order. I was ...

reactjstypescriptmaterial-uimui-x-data-gridmui-x

Guide to seamlessly incorporate a HTML template into your Angular 7 project

I'm currently in the process of integrating an HTML template into my Angular 7 project, and unfortunately, it does not seem to be functioning as expected. To start off, I have placed the template files under assets/template/.. and included the necess ...

angulartypescripttemplates

Ways to extract the final digit from a format such as an IP address in JavaScript

Is there a way to retrieve the last digits 192.168.1.180 For instance: From the IP address 192.168.1.180, I would like to extract 180. Thank you in advance ...

javascripttypescriptangular6

Angular, Transforming JSON with RxJS Operators in TypeScript

Upon receiving the JSON object (Survey) from the server, it looked like this: { "id": 870, "title": "test survey", "questions": [ { "id": 871, "data": ...

jsonangulartypescriptrxjsoperators

Since integrating redux-persist, accessing the current state of the redux store has become a challenge

For the past two days, I've been searching for answers to my problem without any luck. It seems like no one else is experiencing the exact issue I'm having, so I must be missing something obvious. Ever since I added redux-persist, I can no longe ...

typescriptreduxredux-persist

eliminate the common elements between two arrays in typescript/javascript

I have two lists of objects, each containing two fields: let users1 = [{ name: 'barney', uuid: 'uuid3'}, { name: 'barney', uuid: 'uuid1'}, { name: 'barney', uuid: 'uuid2 ...

javascripttypescriptlodash

The functionality of GetStaticProps with Typescript is only operational when defined as an arrow function, rather than a function

The documentation for GetStaticProps in NextJs explains it as a function declaration. When trying to add types to it, the following code snippet results: export async function getStaticProps(): GetStaticProps { const db = await openDB(); const fa ...

typescriptnext.js

Is it true that TypeScript prohibits the presence of circular references under the condition of having generic parameters

I encountered an issue of type error in the given code snippet Type alias 'bar2' circularly references itself.ts(2456) type foo = { bars: bar[]; }; //works fine type bar = foo; type foo2<T extends Record<string, unknown> = Record< ...

typescript

Changing Image to Different File Type Using Angular

In my Angular Typescript project, I am currently working on modifying a method that uploads an image using the input element of type file. However, I no longer have an input element and instead have the image file stored in the assets folder of the project ...

javascripthtmlangulartypescript

Incorporate a fresh element into an object after its initial creation

Hello, I am looking to create an object in JavaScript that includes an array-object field called "Cities." Within each city entry, there should be information such as the city's name, ID, key, and a District array object containing town data for that ...

javascriptarraysreactjstypescriptobject

Is it possible for input properties of array type to change on multiple components in Angular 9?

Encountering an interesting issue that I need clarification on. Recently, I developed a compact Angular application to demonstrate the problem at hand. The puzzling situation arises when passing an Array (any[] or Object[]) as an @Input property to a chil ...

angulartypescript

Having trouble updating properties of child components in Angular

I have a data filtering functionality where I enter values in a filter popup and successfully retrieve results. I then store this data in local storage to retain it when navigating back from another page. However, upon returning to the filter component, I ...

angulartypescriptangular-materialpage-lifecycleangular-lifecycle-hooks

The type 'string | AddressInfo' does not include a 'port' property and does not have a string index signature

When running in { port }, I encountered the following error: Type 'string | AddressInfo' has no property 'port' and no string index signature. How can I resolve this issue? Code: import * as express from 'express' const app ...

typescript

How to implement a timeout feature in JavaScript/TypeScript for cloud functions

I'm currently facing an issue with trying to delay certain actions using Cloud Firestore. Despite my attempts, the setTimeout/setInterval functions don't seem to be working as expected in my code. export const onTimerCreate = functions.firestore ...

javascripttypescriptfirebasegoogle-cloud-functions

Guide on encoding base64 within an Azure DevOps Pipelines extension

I'm in the process of creating an Azure Pipelines extension using Typescript and referring to Microsoft's documentation During my development, I encountered an issue when trying to base64 encode a string using the btoa() function which resulted ...

typescriptazureazure-devopsazure-pipelinesazure-pipelines-tasks

Exploring the Worldwide Influence of TypeScript, React, and Material-UI

I am currently following an official tutorial on creating a global theme for my app. In my root component, I am setting up the global theme like this: const themeInstance = { backgroundColor: 'cadetblue' } render ( <ThemeProvider theme ...

javascriptreactjstypescriptmaterial-ui

Determine if an element in Angular 6 contains a particular style

Below is a div, and the first time you click on it, an opacity style is added. I am looking to determine within the same function if this div has an opacity style set to 1. @ViewChild('address') private address: ElementRef; public onClickAddres ...

angulartypescript

Exploring abstract classes for diverse implementation strategies?

Consider the following scenario: export abstract class Button { constructor(public config: IButton) {} abstract click(); } Now, we have a concrete class: class ButtonShowMap extends Button { private isShow = false; constructor(public config: IBu ...

typescript

Personalized context hook TypeScript

I have been experimenting with a custom hook and the context API, based on an interesting approach that I found in this repository. However, I encountered an error when trying to use it with a simple state for a number. Even though I wanted to create a mo ...

reactjstypescriptreact-context

angular 5 offers the ability to display and conceal elements with ease

<div class="m-t-sm"> <app-button [btnText]="'ADD USER'" (click)="!show" [btnType]="'text'" [btnColor]='"submit-btn-color"'></app-button> </div> Once the "add user" button is clicked, the following div ...

typescriptangular5