The compiler encounters an issue when attempting to import a type from the global.d.ts

You can find the complete NPM package on GitHub here.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}

global.d.ts

interface Foo { }

index.ts

const x: Foo = {};

When we try to build, we encounter this error:

$ \node_modules\.bin\tsc .\index.ts
index.ts(1,10): error TS2304: Cannot find name 'Foo'.

The version we are using is:

$ .\node_modules\.bin\tsc --version
Version 2.3.4

These are the files listed by tsc:

$ .\node_modules\.bin\tsc --listFiles
C:/temp/node_modules/typescript/lib/lib.d.ts
C:/temp/global.d.ts                         
C:/temp/index.ts                           

In order to automatically load Foo into the index.ts file, how can we achieve this?

Research

The documentation on global.d.ts suggests that the above setup should work as intended.

Answer №1

To ensure proper compilation, include the global.d.ts file in the list of arguments for the tsc command:

$ \node_modules\.bin\tsc .\index.ts .\global.d.ts

Keep in mind that specifying files directly overrides the settings in your tsconfig.json file. If you prefer to use the configurations from tsconfig.json, simply run the tsc command without any additional parameters. It will then consider the files specified in the tsconfig.json when you execute tsc --listFiles.

According to the official documentation:

When specific input files are provided through the command line, settings from tsconfig.json files are disregarded.

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

Angular 6 Checkbox Selector - Filtering Made Easy

How can I filter a list of JSON objects (Products) by the 'category' variable using checkboxes? An example product object is shown below: { 'bikeId': 6, 'bikeName': 'Kids blue bike', 'bikeCode': ...

What is the best way to declare and initialize a global variable in a TypeScript Node application?

When using Webpack: const WebpackConfig = { // ... plugins: [ new Webpack.DefinePlugin({ __IS_DEVELOPMENT_BUILDING_MODE__: isDevelopmentBuildingMode, __IS_TESTING_BUILDING_MODE__: isTestingBuildingMode, __IS_PRODUCTION_BUILDING_MO ...

What causes the occurrence of [Object object] instead of a memo being displayed when the memo is included in the transaction building process in Stellar

Having trouble adding a memo to a wallet generated on the Stellar network, encountering an XDR write error in the SDK. Error stack trace: TypeError: XDR Write Error: [object Object] is not a Memo at Function.write (webpack://WalletSDK/node_modules/@st ...

Issues encountered when attempting to refresh page with react-router-dom

I successfully implemented a private route system in my React application using react-router-dom. However, I encountered an issue where upon reloading a page, it briefly redirects to /login before properly displaying the page. How can I resolve this unexpe ...

Setting up CORS for Azure Active Directory

My goal is to programmatically obtain an access token from Azure Active Directory in an Angular 6 application using the method below. let body1 = new FormData() body1.append("resource", environment.config.clientId) body1.append("grant_type", " ...

What is the best way to employ TypeScript for passing parameters to JavaScript functions that utilize the arguments object?

Using Angular 8 at the moment and attempting to implement a script from someone else. However, I am facing an issue due to my lack of knowledge in this area. The function in the javascript operates like this: window.X = function() { var e = argument.l ...

typescriptUsing redux: prevent parent component from accessing redux props

I'm currently using redux and typescript in my webapp project. What's the best approach for defining props in a component that receives redux-actions through @connect, as well as props from its parent? // mychild.tsx export namespace MyChildCom ...

Import and export classes in Typescript

I currently have two separate classes defined in two different files. //a.ts export class A{} //b.ts export class B{} My goal is to create a new file c.ts where I can import both classes seamlessly. import {A, B} from "c"; Instead of having to import ...

Transform **kerry James O'keeffe-martin** into **Kerry James O'Keeffe-Martin** using TypeScript and Java Script

Is there a way to capitalize names in both TypeScript and JavaScript? For example, changing kerry James O'keeffe-martin to Kerry James O'Keeffe-Martin. ...

Accepting PUT requests on a JavaScript web server

I'm facing an issue retrieving PUT requests from a service within my Angular application. The problem lies in the fact that I cannot access the data from the request's body as it returns undefined. Below is the code snippet for reference. ANGULA ...

My goal is to prevent users from using the Backspace key within the input field

Let's say we want to prevent users from using the backspace key on an input field in this scenario. In our template, we pass the $event like so: <input (input)="onInput($event)"> Meanwhile, in our app.component.ts file, the function ...

Stop the print dialog box from appearing when using the Ctrl + P shortcut

I'm working on an Angular app and I want to prevent the print dialog from opening when pressing "Ctrl + P". To address this issue, I have implemented the following code: window.onbeforeprint = (event) => { event.stopPropagation(); cons ...

Obtain the object literal string with additional decorative strings surrounding it

In my current Typescript code, I have an object literal structured like this: const MyNamesStrings = { a: { b: "hello", c: "bye" } d: { e: "qwerty" } } However, I am looking for a way to wrap these strings with add ...

angular 6 personalized material icons with ligature assistance

Can I create my own custom material icons with ligature support? Currently, I use svgIcon to get Custom Icons, Is there a way to make custom icons that support ligatures? Here is my current code snippet: app.component.ts import { Component } from &ap ...

The compatibility issue between Angular's ngModel and Value in input components

Encountering a challenge with the angular form. My objective is to create a form pre-filled with default values that can be edited. Upon validation, the form should submit the data to the MySQL database. Below is the component.html code: <form #adopt=& ...

Typescript's type mismatch does not result in a compile time error

Within my code, I have a function with the following definition: export async function removeUser(deleteUserId: Types.ObjectId) There was an instance where I mistakenly called this function and passed a Mongoose object's id parameter, which is a stri ...

What is the process for generating a new type that includes the optional keys of another type but makes them mandatory?

Imagine having a type like this: type Properties = { name: string age?: number city?: string } If you only want to create a type with age and city as required fields, you can do it like this: type RequiredFields = RequiredOptional<Propertie ...

The listener for @ok is not being activated when using jest-test-utils with b-modal in vue-bootstrap

I have implemented the vue-bootstrap b-modal feature with the @ok="save" hook Here is a snippet of mycomponent.vue: <template> <div> <b-button @click="add">open modal</b-button> <b-modal static lazy id="modal-detail" ...

Guide for inserting a new field into multipart/form-data before sending it to a different server?

Is there a way to upload a pdf to a NextJS endpoint, insert a userId field in the form-data, and then send it to another server for file storage? I have successfully forwarded the request as shown below, but I am struggling to figure out how to include an ...

Encountering a module resolve error when a tsx file is added to the project item group

After setting up an asp.net core project with a react template and configuring Typescript, I created a simple file named Test.tsx with the following code: import React from 'react'; class Test extends React.Component { render() { r ...