2016年から始めるTypescript

  • 32
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

動機

個人で書く分にはES6でも十分ですが、チームで開発したり、可読性を上げるにはやはり型システムは便利なのかなぁと思います。
最大の動機はReactのソースコードを読んでいて :astonished: と思ったからです。。
そこで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

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

インストール
$ 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はここにある通り、ダウンロードして使ってね♪ということらしい・・!
便利だけど型情報の鮮度は気にしたほうが良さそうですね。

まとめ

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