在Angular2下的typescript中使用jQuery的＄變數 (順便設定D3)。

參考了保哥的這篇文章之後發現typescript 2.0不像以前要讓typescript 認得 jQuery的$ 變數是一件很麻煩的事情。

由於我是半路出家，我也不知道以前typescript是怎麼加入jQuery的lib並且可以認得$變數，但是稍微google一下好像都要在tsconfig.json寫一堆，後來看到保哥的文章介紹發現
typescript 2.0以後的tsconfig.json多了一個叫做"types"的keyword，並且typescript 的definition也都改由npm來管理，就不用去裝tsd或是typing這種安裝、搜尋definition的軟體。



在Angular2 下先安裝jQuery:

npm install --save jquery

然後安裝typescript的定義檔：

npm install --save-dev @types/jquery

接著修改tsconfig.json(在src/下)加入"types": ["jquery"]

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
        "jquery"
    ]
  }
}

然後在每個要用到jqeury的.ts檔前面我們import jQuery進來就可以了：

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
......
......
......
}

這樣你就可以在typescript中使用jQuery的$變數。

然後d3 lib也是大同小異。
先安裝d3 ：

npm install --save d3

然後安裝typescript 定義檔：

npm install @types/d3 --save-dev

接著在你會用到d3的ts檔內import * as d3 from  'd3' 就可以了。


ref : 

保哥 ：關於 TypeScript 2.0 之後的模組定義檔 ( Declaration Files ) ( *.d.ts )

Stackoverflow: proper way to configure d3 to work with angular2 and typescript