typescriptの定義ファイルとimportの使い分け

#typescriptのimportと定義ファイルを使う時の違い

今回はgulpでwebpackを利用してtypescriptをコンパイルしています。

typescript 1.4 -> 1.8に変えたり、tsdがオワコンになっていたので、typings変更した内容です。

サイトにはjqueryや、jqueryプラグイン、createjs、lodashなど、色々読み込んでます。
最近の書き方はjqueryとか使わないって感じだと思いますが、
いかんせん、jquery使えないと何もできない人ばかりの環境なので
読みこまなければいけません。

とりあえず、動かすようにした方法です。

今回のディレクトリ構造

index.html
js
css
node_modules
libs
package.json
gulpfile.js
tsconfig.json
typings.json
webpack.config.js

typings
 ∟main
 ∟browser

src
 ∟ts
 ∟scss

version1.0以降改訂版

index.html
js
css
node_modules
libs
package.json
gulpfile.js
tsconfig.json
typings.json
webpack.config.js

typings
 ∟globals
 ∟index.d.ts

src
 ∟ts
 ∟scss

##typingsへの移行（version 1.0以降改訂版を含む）

このURLですでにあるd.tsファイルを簡単に移行できます。

http://qiita.com/literalice/items/d83249a5646abcb0bec6
http://qiita.com/ueokande/items/19bb6a22b1285622d2c7

※moment.jsはこの方法で移行したファイルには中身がなぜか中身が
空なので、もともと使っていたファイルの必要部分を利用してください。

tsconfig.jsonの設定

tsconfig.json（browser.d.tsなどを読ませる場合）

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "typings/main.d.ts",
    "typings/main",
    "main"
  ]
}

※追記 typings version 1.0以降から仕様が変わりました。

tsconfig.json（version1.0以降）

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5"
  },
  "files": [
    "typings/index.d.ts"
  ],
  "exclude": [
  ]
}

htmlに外部ファイルを読む場合には

ts内で、lodashを読む場合

/// <reference path="../../typings/browser/ambient/lodash/index.d.ts" />

色々サイトをみて、管理ファイルみたいなものを読んでも、なぜか動かなかったので、今回は最初に書いた方を採用しました。

エラーが出てちゃんとコンパイルできなかった

/// <reference path="../../typings/browser.d.ts" />

※追記 typings version 1.0以降から、バグがなくなりましたが、
そもそもこの記述自体もなく動くようです。

version1.0以降はでちゃんと動きます。

/// <reference path="../../typings/index.d.ts" />

定義ファイルのインストールの仕方

ここのURLを見ればわかるんですが、
https://github.com/typings/typings/issues/533

version1.0以前

typings install require --ambient --save

typings自体のディレクトリ構造も変わった通り読み込み方法も変わりました。
今後は定義ファイルのnameとsourceは必要です。
以下のようの~で繋ぎます。

version1.0以降

typings install dt~require --global --save

このようにインストールしてください。
sourceでなんぞよって方はtypings search requireとしてみると

画像のsourceって書いてる項目を入れればインストールできます。

##importの使い方
今までは自分で作ったクラスも///でファイル指定していましたが、それらかなくとも、読み込むことが可能になっています。

クラスを呼びたいファイルで頭の方で下の記述で呼び出してください。

app.ts

import Background from "./Background";

クラスは以下のような書き方です。

Background.ts（クラスが1つの場合）

class Background {
　constructor() {
　　....
　}
　....
}
export default Background;

これで、クラスを外部から呼ぶように使えます。
このimportの呼び方はjqueryやlodashなどnpm installすることで
同じようにimportすることができます。

外部ファイルで読むか、コンパイル時に一緒にして生成するか
の違いなので、作るサイトに合わせて使うようにしてください。