Typescript - Import vs "deklarieren var" mit Typdefinitionen

8

Ich baue eine Angular 2-App mit Typescript und versuche, die beliebte d3 -Bibliothek zu importieren.

Ich habe die Typdefinitionen mit TSD installiert und verweise korrekt auf die Datei tsd.d.ts :

/// <reference path="../../../tools/typings/tsd/tsd.d.ts" />

Nun möchte ich import my d3 node_module. Es wurde über NPM installiert:

%Vor%

Das funktioniert, aber ich bekomme keinen Nutzen aus meinen Typdefinitionen. Meine IDE bietet keine Info-Ahead-Informationen oder Syntax-Hervorhebung. Wenn ich es zu diesem ändern:

%Vor%

Ich bekomme jetzt alle Syntaxhervorhebungen / Typ-Ahead-Definitionen, die ich erwarte. Allerdings sucht meine App nach einer Datei in node_modules/d3.js , die nicht existiert, also funktioniert das offensichtlich nicht.

Wenn ich meine import-Anweisung in eine var -Deklaration ändere, wird meine App korrekt kompiliert und ich bekomme alle passenden Typoskript-Definitionen:

%Vor%

Also, meine Frage ist einfach, was ist der richtige Ansatz? Was ist der Unterschied in import vs declare var , und gibt es eine Möglichkeit, Typdefinitionen zu erhalten, wenn import verwendet wird, wenn sie nicht im npm-Modul selbst enthalten sind?

Ich habe bemerkt, dass Dinge wie import {Component} from 'angular2/core'; gut funktionieren, aber die Typdefinitionen sind im selben Verzeichnis enthalten wie die JavaScript-Datei, die ich importiere.

    
JMac 25.01.2016, 05:11
quelle

1 Antwort

11

import * as d3 from 'd3/d3'; sollte mit dem Typsystem funktionieren (ohne ///<reference .../> ), solange die Compileroptionen korrekt sind und die Ordnerstruktur im typings-Ordner korrekt ist.

declare var d3 ist, wie man eine Variable deklariert, die irgendwo in der JS existiert. Denken Sie daran wie "Yeah, yeah typescript, hören Sie auf sich zu beschweren, vertrauen Sie mir, dass es existiert".

import {Component} from 'angular2/core'; ist, wie man ein bestimmtes Stück aus einem Modul zieht. In Knoten ausgedrückt bedeutet dies var Component = require('angular2/core').Component;

Die wichtige Compiler-Option, die aktiviert werden soll, ist "moduleResolution": "node" , die für angular2 bereits funktionieren sollte.

Wenn also d3 als node_module installiert wurde, sollten Sie einfach folgendes verwenden können:

%Vor%

und es sollte einfach funktionieren.

Wenn Sie d3 mit bower installiert haben, müssen Sie stattdessen einen relativen Pfad zum Modul verwenden.

%Vor%

dann

%Vor%
  

HINWEIS: tsd wurde zugunsten von typings abgelehnt. Verwenden Sie stattdessen typings install d3 .

    
SnareChops 25.01.2016, 05:19
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Erstellen eines binären Sparkline-Plots in R mit ggplot2-Barplot