2016年から始めるTypescript #TypeScript

動機

個人で書く分にはES6でも十分ですが、チームで開発したり、可読性を上げるにはやはり型システムは便利なのかなぁと思います。
最大の動機はReactのソースコードを読んでいてと思ったからです。。
そこでTypescriptの環境構築から実装まで試しました。

Editor

VSCことVisual Studio Codeを使います

Typescript

公式サイト

インストール

$ mkdir -p /path/to/develop
$ cd /path/to/develop
$ git init
$ echo -e 'node_modules/\nlib/\n*.log' > .gitignore
$ npm init
$ npm install typescript --save

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

targetはデフォルトがes3らしいのでes5にしました。

tslint

公式サイト
公式のtslint.jsonを丸パクリした

インストール

$ npm install tslint --save

tslint.json

{
  "rules": {
    ...,
    // セミコロンだけ変えた
    "semicolon": [false],
    ...,
  }
}

Webpack for Typescript

公式サイト

インストール

# typescript, scss, imageのloaderをインストール
$ npm install webpack ts-loader css-loader file-loader style-loader sass-loader url-loader node-sass cross-env rimraf --save-dev

webpack.config.js

'use strict'

var webpack = require('webpack');
var path = require('path');
var env = process.env.NODE_ENV;

var config = {
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader'
      },
    ]
  },
  entry: path.join(__dirname, 'src/app.ts'),
  output: {
    path: path.join(__dirname, 'lib'),
    filename: 'app.js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(env)
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
  ],
  resolve: {
    extensions: ['', '.json', '.ts', '.js'],
    modulesDirectories: ['node_modules', path.join(__dirname, 'src')]
  },
};

if (env === "production") {
  config.plugins.push(new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }));
}

module.exports = config;

npm runで実行するようにします。

package.json

{
  "name": "typescript-boilerplate",
  "version": "1.0.0",
  "description": "Typescript Boilerplate",
  "main": "lib/app.js",
  "scripts": {
    "clean": "rimraf lib",
    "build": "cross-env NODE_ENV=production webpack",
    "build:dev": "webpack  --display-error-detail",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "rglay",
  "license": "MIT",
  "dependencies": {
    "typescript": "^1.8.7"
  },
  "repository": {
    "git": ""
  },
  "devDependencies": {
    "cross-env": "^1.0.7",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.0",
    "ts-loader": "^0.8.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14"
  }
}

ビルドテスト

テストコードはこちらと同じ

src/app.ts

class Student {
  fullname: string
  constructor(public firstname: string, public middleinitial: string, public lastname: string) {
    this.fullname = firstname + ' ' + middleinitial + ' ' + lastname
  }  
}

interface Person {
  firstname: string,
  lastname: string
}

function greeter(person: Person) {
  return 'Hello, ' + person.firstname + ' ' + person.lastname
}

const user = new Student('r', 'G.', 'lay')

const div = document.createElement('div')
div.innerHTML = greeter(user)
document.body.appendChild(div)

ビルドしてみます。

ビルド

$ npm run build

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset='UTF8' />
  <title>Typescript boilerplate</title>
</head>

<body>
  <ol>
    <li>One</li>
    <li>Two</li>
  </ol>
</body>

<script src="lib/app.js"></script>
</html>

index.htmlを開くと表示されている。

scssも試してみる。

src/style.scss

@import 'base';

body {
  font: 100% $font-stack;
  color: $primary-color; 
}

src/_base.scss

$primary-color: #333;
$list-color: #00008B;
$font-stack:    Helvetica, sans-serif;

ol {
  margin: 0;
  padding: 0;
}

li {
  @extend ol;
  list-style: none;
  color: $list-color;
  font: 100% $font-stack;
}

app.ts

// 追加
import 'style.scss'

// あとは同じ

index.html

<!-- 同じ -->

ビルド・実行

$ npm run clean && npm run build

index.htmlを開けばちゃんとcssが適用されていることがわかる。

typings

公式サイト
Typescriptの型情報である.d.tsを管理するツールらしい

インストール

$ npm install typings --global

# ".*tape.*"の正規表現で検索する
$ typings search tage

# "react"の正規表現、つまり完全一致で検索する
$ typings search --name react

$ typings install

試しにmithrilをインストールしてみます。

mithrilのtypingsインストール

$ typings search --name mithril
Viewing 1 of 1

NAME    SOURCE HOMEPAGE                         DESCRIPTION UPDATED                  VERSIONS
mithril dt     http://lhorie.github.io/mithril/             2015-12-11T18:14:44.000Z 8

$ typings install mithril --ambient --save

app.ts

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

import * as mithril from "mithril"

このように定義すると、⌘で型定義に飛べるようになった。
しかしmithrilの場合はかなり古いバージョンなのでこれは使用しないでおきましょう。ハマります。
githubで専用の.d.tsが用意されている場合はそれを使うほうがいいのかな？
mithrilはここにある通り、ダウンロードして使ってね♪ということらしい・・！
便利だけど型情報の鮮度は気にしたほうが良さそうですね。

まとめ

型はある方が安心ですね。