読者です 読者をやめる 読者になる 読者になる

VS CodeでTypecript 2.0 + D3.js v4を補完できるようにする(暫定対処)

VS Code Typescript D3.js

初心者だけどTypescript 2.0 + D3.js v4の勉強をしたい。どっちもメジャーバージョンから時間が経っておらず、関連ツールが移行期間だったりします。VS Codeで補完できるようになるまでちょっと手間取ったのでメモ。

(初心者すぎるので、間違ったことを書いていたらツッコミをお願いします...)

準備:Typescriptとd3.jsをインストール

これはnpm installするだけです。

npm install -g typescript d3

VS CodeでTypescriptを補完するには

Typescriptには型定義ファイルがあって、それをIntellisense(VS Codeの補完エンジン)に渡すと補完できるようになります。

公式のドキュメントはこのあたり:

code.visualstudio.com

typings

型定義ファイルの管理をする方法は歴史上いくつかあって、かつてはtsdというコマンドでしたが、今はtypingsというコマンドを使うようです。まずはそれをインストールします。

npm install -g typings

typingsでインストールできる型定義ファイルはtypings searchで調べられます。

$ typings search d3
Viewing 20 of 24

NAME            SOURCE HOMEPAGE                                     DESCRIPTION VERSIONS UPDATED
d3              dt     http://d3js.org/                                         1        2016-09-07T00:57:44.000Z
d3              npm    https://www.npmjs.com/package/d3                         1        2016-07-23T03:37:00.000Z
d3-array        npm    https://www.npmjs.com/package/d3-array                   1        2016-07-01T01:10:35.000Z
d3-axis         npm    https://www.npmjs.com/package/d3-axis                    1        2016-07-01T01:10:35.000Z
d3-color        npm    https://www.npmjs.com/package/d3-color                   1        2016-07-01T01:10:35.000Z
d3-dsv          dt     https://www.npmjs.com/package/d3-dsv                     1        2016-03-16T15:55:26.000Z
d3-ease         npm    https://www.npmjs.com/package/d3-ease                    1        2016-06-22T19:39:01.000Z
d3-hierarchy    npm    https://www.npmjs.com/package/d3-hierarchy               1        2016-07-01T01:10:35.000Z
d3-interpolate  npm    https://www.npmjs.com/package/d3-interpolate             1        2016-07-01T01:10:35.000Z
d3-path         npm    https://www.npmjs.com/package/d3-path                    1        2016-06-22T19:39:01.000Z
d3-polygon      npm    https://www.npmjs.com/package/d3-polygon                 1        2016-06-22T19:39:01.000Z
d3-scale        npm    https://www.npmjs.com/package/d3-scale                   1        2016-07-07T08:22:08.000Z
d3-selection    npm    https://www.npmjs.com/package/d3-selection               1        2016-07-01T01:10:35.000Z
d3-shape        npm    https://www.npmjs.com/package/d3-shape                   1        2016-07-01T01:10:35.000Z
d3-tip          dt     https://github.com/Caged/d3-tip                          1        2016-09-23T12:26:57.000Z
d3-transition   npm    https://www.npmjs.com/package/d3-transition              1        2016-07-01T01:10:35.000Z
dagre-d3        dt     https://github.com/cpettitt/dagre-d3                     1        2016-06-20T23:13:11.000Z
d3.cloud.layout dt     https://github.com/jasondavies/d3-cloud                  1        2016-03-17T12:06:54.000Z
d3kit           dt     https://www.npmjs.com/package/d3kit                      1        2016-06-19T02:59:36.000Z
d3pie           dt     https://github.com/benkeen/d3pie                         1        2016-06-08T11:01:32.000Z

あれ、なんか少なくない...?

typingsはもう古いらしい

と思ってD3.js v4の型定義ファイルのレポジトリを見ると、こんなことが書かれています。

As DefinitelyTyped/types-2.0 feeds the npm @types organization, acquiring the definitions for a project is as easy as:

npm install @types/d3-selection --save

(https://github.com/tomwanzek/d3-v4-definitelytyped/tree/adb386355aa17eafc4d9fb9ac37616bda187ead2#update-09242016)

@typeってなに?と思ってググってみると、公式ブログの記事が見つかりました。

Getting type declarations in TypeScript 2.0 will require no tools apart from npm.
(The Future of Declaration Files | TypeScript)

ということで、Typescript 2.0の時代が来てしまった今、typingsを使うやり方はもう古いようです。

VS Code側でもこれは対応予定みたいですけど、October 2016のマイルストーンということで、たぶん来月?

github.com

それまでは自力で何とかする必要があります。やれやれだぜ。

npm install

ますはnpm initしましょう。パッケージ名とかバージョンとかいろいろ聞かれるので適当に答えます。

npm init

この状態で、npm installします。

npm install @types/d3-selection --save

すると、こんな感じのディレクトリ構成になるはずです。HelloWorld.tsがメインのTypescriptファイルです。

.
│  HelloWorld.ts
│  package.json
│  tsconfig.json
│
├─.vscode
│      ...
│
└─node_modules
    └─@types
        └─d3-selection
                index.d.ts
                ...

で、HelloWorld.tsの先頭に、型定義ファイルまでのパスを指定します。

///<reference path="node_modules/@types/d3-selection/index.d.ts" />

これで補完できるようになるはず。

f:id:yutannihilation:20161002224257p:plain

これをいちいち手でやるのはめんどくさいので、VS CodeのTypescript 2.0対応が終わるのが待ち遠しいところです。