Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

by tomoko523
1 / 13

※こちらは第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の読み込みを行っているので、動きが確認できます。以上!

参考URL

gunosy
情報キュレーションサービス「グノシー」や「ニュースパス」の開発・運営を通じて、情報を世界の人に最適に届けていきます。
http://gunosy.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away