※こちらは第15回HTML5ビギナーズ TypeScript入門で発表した内容に追記したものです。
はじめに
内容
- VSCode+typingsを使ったTypeScript開発環境作り
- とりあえずTypeScript使える環境を整えたい！という人向け
- jsライブラリの例としてKnockoutJSを使用しますが、お好きなものでOKです。
やらないこと
- typeScriptとは…の詳細
- Knockoutとは…の詳細
- モジュール化、その他便利開発ツールの説明
TypeScript(TS)とは
- Microsoft社が開発したAltJS
- 公式HP
KnockoutJS(KO)とは
- 双方向バインドが特徴の軽量フレームワーク
- 覚えるの簡単ですがかっちりした枠組みがない（自由度が高い)
- 3.2からComponentも使えるようになります
- 公式HP
準備
TypeScriptをはじめるには
TSの環境構築方法を調べると様々な周辺開発ツールが出てきますが、
最低限以下のものがあれば動きます。
tsファイルを定義ファイルをもとにビルドしてjsファイルにしているだけです。
あとは普通のjsファイルの扱いと変わりません。
- 必要なもの
- TSを書くときに必要な型定義ファイル（TS本体＋jsライブラリ用の定義ファイル)
- TSをJSにビルドするもの
開発環境
- 開発環境
- VisualStudioCode
- VSCodeはデフォルトでtsをビルドする機能がついているので初心者には使いやすいと思います。
- VisualStudioCode
- 型定義管理ツール
- typings
- TSの型定義ファイルを検索したりローカルに取得したりできるツールです。自力で定義ファイルをとってくる方法もありますが、折角なのでツールを一つ覚えちゃいましょう
- typings
インストール
-
VSCode本体 をインストール
- （ここは飛ばしても大丈夫です）インストール後、拡張機能を追加する
- TSLint
- beautify
- Knockoutjs Snippets for VSCodo
- emmetは内蔵されています、やったね！
- （ここは飛ばしても大丈夫です）インストール後、拡張機能を追加する
-
node.jsをインストール
- これでTSやtypingsをインストールすることができます
TypeScriptを使う準備
TSとtypingsをインストールして使用できるようにします。
前項でnode.jsをインストールしているのでnpmコマンドが使えるようになっています。
-
$ npm install -g typescript- typeScriptをインストール
-
$ npm install -g typings- typingsをインストール
設定
Project設定
作業用フォルダを作成してtsファイルと設定ファイルを作成します。
※CUIで生成していますが、慣れなければ手動でファイル作っても大丈夫です。
-
$ mkdir sampleApp && cd $_- 作業用フォルダを生成
-
$ tsc --init- tsconfig.jsonを生成
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false
},
"exclude": [
"node_modules"
]
}
-
$ typings init- typings.json 生成
tsconfig.json
{
"name": "sampleApp"
}
定義ファイル設定
typingsを使って必要な定義ファイルを取得します。
ex)Knockoutjs
-
$ typings search knockout- 定義ファイルがあるかどうかは「search」で確認できます。
-
$ typings install --SDG dt~knockout-
-S:-saveと同じ typings.jsonに追加してくれます。 -
-G:-globalと同じ -
~:~の前の部分が取得元(source) -
-D:--save-devと同じ 依存関係あるものも一緒にインストールしてくれます※knockoutjsはありません
-
- インストール後はtypings.jsonに追記されていることが確認できます。
json.tsconfig.json
{
"name": "sampleApp",
"globalDependencies": {
"knockout": "registry:dt/knockout#0.0.0+20160512130947"
}
}
参照設定
-
$ touch hello.ts- tsファイルを生成します。
- typingsフォルダ直下のindex.d.tsの参照を追加します。（
/// <reference path=…) - (※)ビルド時はtsconfig.jsonのFilesに書いていれば参照パスは不要なのですが、初回コーディング時はそもそもtsファイルからの参照がないので書かないとコード補完が使えない＆エラーになります。（ビルドはできる）なので一応書いておきます。どうするのがベストなんでしょう…
hello.ts
/// <reference path="./typings/index.d.ts" />
class HelloViewModel {
language: KnockoutObservable<string>
framework: KnockoutObservable<string>
constructor(language: string, framework: string) {
this.language = ko.observable(language);
this.framework = ko.observable(framework);
}
}
ko.applyBindings(new HelloViewModel("TypeScript", "Knockout"));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
Hello from
<strong data-bind="text: language">todo</strong> and
<strong data-bind="text: framework">todo</strong>!
</p>
<p>Language: <input data-bind="value: language" /></p>
<p>Framework: <input data-bind="value: framework" /></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="hello.js"></script>
</body>
</html>
- tsconfig.jsonの最後にビルド対象のファイルを追記します。
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false
},
"exclude": [
"node_modules"
],
"files":[
"./typings/index.d.ts",
"hello.ts"
]
}
ビルド設定
-
F1(コマンドパレット） + "configure task runner"入力 → タスクランナーの選択で"TypeScript-tsconfig.json"を選択します
- tasks.jsonが生成されます。
-
これでtsファイルをjsファイルにビルドする環境が整いました。現時点ではファイル構成は下記のようになっているかと思います。
sampleApp
|-.vscode
| tasks.json
|-typings
| globals
| index.d.ts
|-index.html
|-hello.ts
|-tsconfig.json
|-typings.json
- Ctrl+ Shift + B でビルド実行
- task.jsonが実行されます。
- 実行後はhello.jsが増えています。これがビルド後のファイルです。
hello.js
/// <reference path="./typings/index.d.ts" />
var HelloViewModel = (function () {
function HelloViewModel(language, framework) {
this.language = ko.observable(language);
this.framework = ko.observable(framework);
}
return HelloViewModel;
}());
ko.applyBindings(new HelloViewModel("TypeScript", "Knockout"));
- index.htmlでhello.jsの読み込みを行っているので、動きが確認できます。以上！