Typescript - การนำเข้า vs "ประกาศตัวแปร" พร้อมการกำหนดประเภท

การสร้างแอป Angular 2 โดยใช้ Typescript ฉันกำลังพยายามนำเข้าห้องสมุดที่เป็นที่นิยม d3

ฉันได้ติดตั้งการกำหนดประเภทโดยใช้ TSD และฉันกำลังอ้างอิงไฟล์ tsd.d.ts อย่างถูกต้อง:

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

ตอนนี้ ฉันต้องการ import โมดูลโหนด d3 ของฉัน ซึ่งติดตั้งผ่าน NPM:

/// <reference path="../../../tools/typings/tsd/tsd.d.ts" />
import * as d3 from 'd3/d3';

นี่ใช้ได้ แต่ฉันไม่ได้รับประโยชน์ใด ๆ จากการนิยามชนิดของฉัน IDE ของฉันไม่ได้ให้ข้อมูลอัตโนมัติเกี่ยวกับชนิดหรือการเน้นไวยากรณ์ ถ้าฉันเปลี่ยนเป็นแบบนี้:

/// <reference path="../../../tools/typings/tsd/tsd.d.ts" />
import * as d3 from 'd3/d3';

ตอนนี้ฉันได้รับไฮไลต์ไวยากรณ์และคำจำกัดความเติมข้อความอัตโนมัติต่าง ๆ ที่ฉันคาดไว้แล้ว อย่างไรก็ตาม แอปของฉันกำลังมองหาไฟล์ที่ node_modules/d3.js ซึ่งไม่มีอยู่ ดังนั้นสิ่งนี้จึงแน่นอนว่าใช้งานไม่ได้

เมื่อฉันเปลี่ยนคำสั่งนำเข้าเป็นการประกาศ var แอปของฉันก็คอมไพล์ได้อย่างถูกต้องและฉันได้รับคำนิยาม typescript ทั้งหมดที่เหมาะสม:

/// <reference path="../../../tools/typings/tsd/tsd.d.ts" />
declare var d3 = require('d3/d3');

ดังนั้น คำถามของผมคือ แนวทางที่ถูกต้องคืออะไร? ความแตกต่างระหว่าง import กับ declare var คืออะไร และมีวิธีใดบ้างในการรับคำจำกัดความประเภทเมื่อใช้ import หากไม่ได้รวมอยู่ในโมดูล npm เอง?

ฉันสังเกตว่าบางสิ่งเช่น import {Component} from 'angular2/core'; ทำงานได้ดี แต่การกำหนดประเภทจะรวมอยู่ในไดเรกทอรีเดียวกันกับไฟล์จาวาสคริปต์ที่ฉันกำลังนำเข้า

คำตอบ #1

import * as d3 from 'd3/d3'; ควรทำงานได้ดีในระบบประเภท (โดยไม่ต้องใช้ ///<reference .../>) ตราบใดที่ตัวเลือกคอมไพเลอร์ถูกต้อง และโครงสร้างโฟลเดอร์ในโฟลเดอร์ typings ถูกต้อง

declare var d3 คือวิธีการประกาศตัวแปรที่มีอยู่ที่ใดที่หนึ่งใน JS คิดมันเหมือนกับว่า "ใช่ๆ ไทป์สคริปต์ เลิกบ่นได้แล้ว เชื่อฉัน มันมีอยู่จริง"

import {Component} from 'angular/core'; คือวิธีการดึงส่วนเฉพาะจากโมดูล ในคำศัพท์ของ Node จะเทียบได้กับ var Component=require('angular/core').Component;

ตัวเลือกคอมไพเลอร์ที่สำคัญที่ต้องเปิดคือ "moduleResolution": "node" ซึ่งควรเปิดอยู่แล้วเพื่อให้ Angular ทำงานได้

ดังนั้นถ้า d3 ถูกติดตั้งเป็น node_module คุณก็สามารถใช้งานได้อย่างง่ายดายโดย:

npm install d3
npm install --save-dev @types/d3
tsc

แล้ว

import * as d3 from 'd3';