TypeScriptを最小構成ではじめてみる #JavaScript

※こちらは第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をビルドする機能がついているので初心者には使いやすいと思います。
型定義管理ツール
- typings
  - TSの型定義ファイルを検索したりローカルに取得したりできるツールです。自力で定義ファイルをとってくる方法もありますが、折角なのでツールを一つ覚えちゃいましょう

インストール

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の読み込みを行っているので、動きが確認できます。以上！

TypeScriptを最小構成ではじめてみる

はじめに

内容

やらないこと

TypeScript(TS)とは

KnockoutJS(KO)とは

準備

TypeScriptをはじめるには

開発環境

インストール

TypeScriptを使う準備

設定

Project設定

定義ファイル設定

参照設定

ビルド設定

参考URL