VS Code fails to identify Typescript internal modules

I am currently facing issues with separating my TypeScript classes into distinct files using internal modules. Unfortunately, the main.ts file is not loading or recognizing the sub-modules.

main.ts

/// <reference path="Car.ts" />
module Vehicles {
    var c = new Vehicles.Car("red");
} 

car.ts

module Vehicles {
    export class Car {
        color: string;
        constructor(color: string) {
            this.color = color;
            console.log("created a new " + color + " car");
        }
    }
}

tsconfig.json

{
    "compilerOptions": {
        "sourceMap":  true, 
        "out": "everything.js main.ts car.ts"
    }
}

Update: I made an adjustment to the "out" flag in tsconfig in an attempt to compile main.ts and car.ts into everything.js - unfortunately, this last step is not functioning correctly as everything.js is not being created. Instead, VS Code generates a main.js and a car.js. It appears that the "out" flag is not being recognized. I also tried using "outFile" but encountered the same result.

Answer №1

Main Script

/// <reference path="car.ts" />
var c = new Car("red");

Car Class

class Car {
    color: string;
    constructor(color: string) {
        this.color = color;
        console.log("created a new " + color + " car");
    }
}

TypeScript Configuration

{
    "compilerOptions": {
        "sourceMap":  true, 
        "outFile": "main.js"
    },
    "files": [
        "main.ts",
        "car.ts"
    ]
}

Task Setup

Kokodoko: I finally found the solution! Omit the "args" option in "tasks.json" to make sure the arguments in tsconfig.json are used correctly. Refer to: github.com/Microsoft/typescript/wiki/tsconfig.json. It states that when input files are specified on the command line, tsconfig.json files are ignored.


For more details on Modules, be sure to visit the TypeScript Handbook

Answer №2

If you want to combine multiple .ts files into one large .js file using a VS Code task, the key is to make adjustments in both tasks.json and tsconfig.json files.

tasks.json

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

tsconfig.json

{
    "compilerOptions": {
        "sourceMap":  true,
        "out": "myapp.js"
    }
}

Keep in mind that if you provide input files through the command line, the settings in tsconfig.json will be 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

Ag-grid with Angular 2 allows users to easily edit entire columns with just a few

I need help modifying a column in my ag-grid. My ag-grid currently looks like this: grid image I want to update all values in the column Etat to be arrêté, but I'm struggling to make it work. This is the code I've been trying: private gridO ...

Having troubles with *ngFor in Angular 8? Learn how to use ng-template effectively

I need assistance creating a table with dynamically generated columns and using the PrimeNg library for the grid. Despite asking several questions, I have not received any responses. Can someone please help me achieve this? To generate table column heade ...

What is the best way to include an image link in a JSON file using Nuxt.js?

I am working with nuxtjs and I have a file named data.json in the root directory. I am trying to add an image link in this JSON file, but it is not recognizing it. Here is my code: { "id": 1, "cardImg": "./assets/images/ima ...

Implying generics at a later time, not during instantiation / altering the type of a generic

If we consider the example provided, is there a way to instruct the typescript compiler that the return type of baz must be string, since it can be inferred from foo.a('aString') that it's a string? const fn = <T,S>()=>{ let s: S ...

Enhancing JavaScript functions with type definitions

I have successfully implemented this TypeScript code: import ytdl from 'react-native-ytdl'; type DirectLink = { url: string; headers: any[]; }; type VideoFormat = { itag: number; url: string; width: number; height: number; }; type ...

Incorporate JSON information into HTML dropdown menu using Google API

I'm finding it difficult with this task. Below is a list that needs the name and address inserted into the dropdown menu from the JSON file. <div class="dropdown-list"> <div class="list-container"> <ul class="list" ...

Utilizing JMeter and Groovy to efficiently extract keys from a JSON object that are defined as variables

I recently learned that using vars.get("variable") is more efficient than using ${variable}. I used the latter in the past and encountered an error, but I found a workaround to fix it (although I won't go into details here). Here's a snippet of t ...

Utilizing Angular Services to Share Events and Reusing Components Multiple Times on a Page

My unique custom table is made up of multiple components, each emitting events using a shared service called TableEvent. These events are subscribed to by a class named TableTemplate, which facilitates communication among the different components of the ta ...

Convert stylish row into JSON

Querying Dapper Results I am facing an issue with storing a Dapper Row as a JSON string in our database. Despite several attempts, I have not been successful in achieving this. Let me provide some context on the matter. Project Details In our current pr ...

Navigate to a different webpage while employing sweetalert2 and extracting data using the GET method

Is there a way to use sweetalert2 for redirecting to deleting.php with a specific ID parameter? How can I include this dynamic data in the code snippet below, which is used to display options for editing and purging data from an SQL database? echo' &l ...

React's setState is not reflecting the changes made to the reduced array

I am currently working on a custom component that consists of two select lists with buttons to move options from the available list to the selected list. The issue I am facing is that even though the elements are successfully added to the target list, they ...

PHP Array Element Output

After making a call to the Twitter API, I have received an Array of data containing the "Top 10 Trending" items. However, I am facing difficulty in printing out the individual elements such as names. Below is the code snippet that I have been using to disp ...

Angular 2 repeatedly pushes elements into an array during ngDoCheck

I need assistance with updating my 'filelistArray' array. It is currently being populated with duplicate items whenever content is available in the 'this.uploadCopy.queue' array, which happens multiple times. However, I want to update ...

Utilizing d3.csv to load CSV data into an nvd3 multiBar Chart demonstration (in JSON format)

I am attempting to recreate a nvd3.js multiBar Chart using my own .csv data. While I have come across similar questions in the past, none of them have provided a solution specific to my current issue. Some suggestions involve utilizing d3.entries, d3.nest, ...

Merging JSON and jQuery's $.post function with Django resulted in a parsererror, specifically a SyntaxError due to an invalid label

When attempting to retrieve JSON data from a django function, I'm encountering the error "SyntaxError: invalid label". Can anyone offer any advice? { "id": "325", "from_date": "09-19-2011", "to_date": "09-20-2011" } The jQuery code currently in use ...

Using TypeScript, let's take a closer look at an example of Angular

I am trying to replicate the chips example found at this link (https://material.angularjs.org/latest/#/demo/material.components.chips) using TypeScript. I have just started learning TypeScript this week and I am having some difficulties translating this co ...

Typescript UniqueForProp tool not working as expected

I've created a utility function called UniqueForProp that takes an array of objects and a specified property within the object. It then generates a union type containing all possible values for that property across the array: type Get<T, K> = K ...

What is the reason for TypeScript not providing warnings for unrealistic conditions involving 'typeof' and 'in'?

The recent updates in version 4.9 highlighted the enhanced narrowing with 'in'. Intrigued by this, I decided to experiment with their example in a coding playground. Surprisingly, I discovered that seemingly impossible conditions involving typeof ...

What could be causing the ERROR TypeError in an Angular form where "_co.service.formData" is undefined?

My attempt to create a form in Angular 7 has resulted in an error message: ERROR TypeError: "_co.service.formData is undefined" Here is the HTML code for the component: <form (sumbit)="signUp(form)" autocomplete="off" #form="ngForm"> <div clas ...

Display HTML content from a JSON array with the help of ng-bind-html

I am looking to display HTML tags stored in a JSON object property within a modal window. Below is an example of the JSON object: { "fileUploadCategories": [ { "id": "Bread", "title": "GrandmaBread", "info": "Some info text.", "restService": "emp ...