Making @types compatible with TypeScript 2.1 in Visual Studio 2015 Update 3

The potential of TS 2.x @types is intriguing, but I'm struggling to make it work effectively!

  • I'm using Visual Studio 2015 - version 14.0.25431.01 Update 3
  • My TypeScript version for Visual Studio 2015 is 2.1.4, downloaded from this link
  • The VS Web project is configured for TypeScript 2.1 with 
    <TypeScriptToolsVersion>2.1</TypeScriptToolsVersion>

This snippet is from my packages.json file

  "dependencies": {
    "angular": "^1.5.9",
    "angular-messages": "^1.5.9",
    "angular-ui-bootstrap": "^2.3.0",
    "angular-ui-router": "^0.3.2",
    "moment": "^2.17.0",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "@types/angular": "^1.5.21",
    "@types/angular-ui-bootstrap": "^0.13.36",
    "@types/angular-ui-router": "^1.1.35",
    "@types/jquery": "^2.0.34",
    "@types/node": "^0.0.3",
    "@types/signalr": "^2.2.32",
    "@types/underscore": "^1.7.36"
 }

And here's my complete tsconfig.json content

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "ES5"
  },
  "typeAcquisition": {
    "enable": true
  }
}

I've experimented with different configurations including typeRoots and types specified in the compilerOptions, but without success!

    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "angular",
      "angular-ui-bootstrap",
      "angular-ui-router",
      "jquery",
      "moment",
      "signalr",
      "underscore"
    ]

Despite cleaning the build and restarting Visual Studio, I continue to encounter errors like:

some-file.ts(8,22): error TS2304: Build:Cannot find name 'angular'.
some-file.ts(12,41): error TS2694: Build:Namespace 'angular' has no exported member 'IScope'.
some-file.ts(12,67): error TS2694: Build:Namespace 'angular' has no exported member 'IRootElementService'.
another-file.ts(26,22): error TS2503: Build:Cannot find namespace 'moment'.
another-file.ts(47,37): error TS2304: Build:Cannot find name 'moment'.

All necessary typedefs exist either in node_modules/@types or within the corresponding package itself. I can't fathom why Visual Studio/TypeScript is unable to locate these files! Is there something obvious that I'm overlooking? Any guidance would be greatly appreciated!

visual-studiotypescripttypescript-typingstypescript2.0typescript-types

Answer №1

If you're still struggling with this, consider removing all versions of the typescript tools from your system and then reinstalling version 2.1.4 using the installation package you already have. Verify in visual studio that you are indeed using this version by checking the details in 'about microsoft visual studio' under the help menu.

For reference, here is my tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "typeAcquisition": {
    "enable": true
  },
  "exclude": [
    "jspm_packages"
  ]
}

This configuration should work for modules that export a module, but I've encountered issues when importing individual typings that aren't modules (such as interfaces). In general, I haven't had to use import * from x statements for libraries; instead, I can directly use the name of the exported module.

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

Status:0 was received as the response from URL:null during the REST call made from my iOS Ionic application

I am currently facing an issue with a rest call in my Ionic app. The call works fine on Android devices but encounters problems on iOS devices. Below is the implementation of the rest call in my Ionic service. import { Http } from '@angular/http&apos ...

iosangulartypescriptionic2ionic3

Exploring the power of Typescript functions within a traditional VueJS project

TL;DR: How can I import and use a typescript module into my plain js Vue-Components? I have a Vue 2 (not yet 3) project. In this specific project, I have made the decision to refactor some of the code logic into ES modules for improved testability and reu ...

javascripttypescriptvue.jsvuejs2

Organizing a React Navigation App with a Visible Tab Bar

I have a clear image that demonstrates the problem https://i.sstatic.net/M2Hl7.png This is a simplified overview of the app structure. There is a tab bar navigator with three screens labeled A B C. TabBar A consists of a stack navigator containing D and ...

typescriptreact-nativereact-navigationinstagram

Having trouble writing Jest test cases for a function that returns an Observable Axios response in Nest JS

I'm relatively new to the NestJS + Typescript + RxJs tech stack and I'm attempting to write a unit test case using Jest for one of my functions. However, I'm uncertain if I'm doing it correctly. component.service.ts public fetchCompon ...

node.jstypescriptrxjsjestjsnestjs

Issue with React not displaying JSX when onClick Button is triggered

I've recently started learning React and I'm facing a problem that I can't seem to figure out. I have a basic button, and when it's clicked, I want to add another text or HTML element. While the console log statement is working fine, th ...

javascriptreactjstypescripttsx

Error Message: The Reference.update operation in Angular Firebase failed due to the presence of undefined value in the 'users.UID.email' property

Having recently started to use the Firebase database, I encountered an issue while trying to update the UID to the Realtime Database during signup. The error message displayed was: Error: Reference.update failed: First argument contains undefined in prop ...

angulartypescriptfirebasefirebase-realtime-database

Why do callbacks in Typescript fail to compile when their arguments don't match?

In my current project, I encountered a scenario where a React callback led to a contrived example. interface A { a: string b: string } interface B { a: string b: string c: string } function foo(fn: (a: A) => void, a: A) { fn( ...

typescript

Parse the local JSON file and convert it into an array that conforms to an

My goal is to extract data from a local JSON file and store it in an array of InputData type objects. The JSON contains multiple entries, each following the structure of InputData. I attempted to achieve this with the code snippet below. The issue arises ...

jsonangulartypescript

What steps can I take to make my animation work in the opposite direction as well?

I'm currently working with an angular slider that is set to TRUE/OPEN by default. The issue I am facing is that while I am able to slide it using angular animations in one direction, I am unable to see the transition when sliding it back. Any assistan ...

javascripthtmlangulartypescript

Executing an HTTP POST request without properly encoding a specific parameter

I am attempting to communicate with an unauthorized third-party API using Node and the request module. Below is the code that generates the request: request.post( { url: url, headers: MY_HEADERS_HERE, followAllR ...

javascriptnode.jstypescriptnode-request

How can I get rid of the table borders and set colors for every other row in the

How can I remove the border lines from a table and assign colors to alternate rows in the table? Follow this link for the code: https://stackblitz.com/angular/kooxxyvddeqb?file=app%2Ftable-sticky-columns-example.css Thank you in advance ...

htmlcssangulartypescript

Combine Immer and NgRx reducer for improved state management

Upon analyzing redux and ngrx, it appears that immer is the preferred library for creating a copy of the state before storing it. In following the example provided by immer, I implemented the following code in my reducer: on(exampleActions.updateExample ...

javascriptangulartypescriptngrximmer.js

Add an asterisk before each line of comment when working in a TypeScript file using the VS Code IDE

Within my VS Code workspace, I am using the Typescript language and would like to format my comments across multiple lines with a specific style (look out for the star character) /** *@desc any text * any text */ However, when I attempt to write a comm ...

javascripttypescriptvisual-studio-code

Troubleshooting issue: matTooltip malfunctioning in *ngFor loop after invoking Angular's change

The matTooltip in the component below is rendering correctly. The overlay and small bubble for the tooltip are rendered, but the text is missing (even though it's present in the HTML when inspecting in the browser) and it isn't positioned correct ...

angulartypescriptangular-materialangular-material-8

RXJS: Introducing a functionality in Observable for deferred execution of a function upon subscription

Implementing a Custom Function in Observable for Subscribers (defer) I have created an Observable using event streams, specifically Bluetooth notifications. My goal is to execute a function (startNotifictions) only when the Observable has a subscriber. ...

typescriptbluetoothrxjsobservableionic3

What is the best way to ensure an observable has been updated before proceeding with additional code execution?

Is an observable the best choice for providing live updates of a variable's value to another class? I have a loop in my service class that looks like this: elements.forEach(element => { doStuff(); this.numberSubject.next(valueFromDoStuff); }) ...

javascriptangulartypescriptangular2-observables

Differences between TypeScript `[string]` and `string[]`

When using TypeScript, which option is the correct syntax? [string] vs string[] public searchOption: [string] = ['date']; public searchOption: string[] = ['date']; ...

typescripttypes

How Can I Build a Dynamic Field Form Builder in Angular 4?

While working with dynamic JSON data, I needed to create fields dynamically. For instance, if my JSON array contains 3 values, I would generate 3 input checkboxes dynamically as shown below: <ng-template ngFor let-numberOfRow [ngForOf]="numberOfRows"&g ...

angulartypescript

When attempting to access Firebase Storage with Angular, you may encounter the error message: "TypeError: app.storage

Having trouble connecting my Angular app to FireBase. The component appears blank and the Chrome console is showing a 'TypeError: app.storage is not a function'. Any ideas on what I might be doing wrong? Thanks in advance. ng --version Angular C ...

angulartypescriptfirebasefirebase-storage

What should be the proper service parameter type in the constructor and where should it be sourced from?

Currently, I am faced with a situation where I have two Angular 1 services in separate files and need to use the first service within the second one. How can I properly type the first service in the constructor to satisfy TypeScript requirements and ensure ...

angularjstypescript