TypeScriptフロントエンド開発環境 #JavaScript

node.jsインストール

下記よりv5.10.1をダウンロード、インストール。
https://nodejs.org/

ディレクトリ構造

下記構造を用意。

┌ dist
|  └ index.html
├ src
|   ├ ts
|   |  ├ Main.ts
|   |  └ Test.ts
|   └ js
|      ├ jquery.js
|      └ require.js
├ gulpfile.js
├ package.json
└ typings.json

package.json

必要なモジュールを記載。
ターミナルからプロジェクトフォルダへ移動し、「npm install」でモジュールをインストール。

package.json

{
  "name": "typescriptBuild",
  "version": "1.0.0",
  "description": "",
  "author": "a12345",
  "url": "http://qiita.com/a12345",
  "license": "MIT License",
  "keywords": "gulp",
  "devDependencies": {
    "del": "*",
    "gulp": "*",
    "gulp-plumber": "*",
    "gulp-rename": "*",
    "run-sequence": "*",
    "gulp-typescript": "*",
    "gulp-typings": "*",
    "gulp-uglify": "*",
    "gulp-util": "*"
  }
}

typings.json

必要な型定義を記載。

typings.json

{
  "name": "lib typings",
  "version": "1.0.0",
  "dependencies": {},
  "url": "http://qiita.com/a12345",
  "author": "a12345",
  "ambientDependencies": {
    "jquery": "registry:dt/jquery#1.10.0+20160316155526"
  }
}

gulpfile.js

gulpタスクを記載。
開発 [gulp]
本番 [gulp --production]
※typescriptはブラウザで使うためamd方式でコンパイル。

gulpfile.js

//"url": "http://qiita.com/a12345"
//"author": "a12345"
"use strict"
let gulp = require('gulp');
let plumber = require('gulp-plumber');
let runSequence = require('run-sequence');
let del = require('del');
let ts = require('gulp-typescript');
let typings = require('gulp-typings');
let uglify = require('gulp-uglify');
let util = require('gulp-util');

// 削除
gulp.task('clean', ()=> {
  del(['./dist/**/*.js']);
});

// typescriptのコンパイル
gulp.task('ts', ()=> {
  gulp.src(['./src/ts/**/*.ts'])
  .pipe(plumber({
    handleError: (err)=> {
      console.log(err);
      this.emit('end');
    }
  }))
  .pipe(ts({
    target: 'ES5',
    module: 'amd'
  }))
  .pipe(gulp.dest('./dist/js'));
});

// javascript生成
gulp.task('js', ()=> {
  gulp.src(['./src/js/**/*.js'])
  .pipe(plumber({
    handleError: (err)=> {
      console.log(err);
      this.emit('end');
    }
  }))
  .pipe(gulp.dest('./dist/js'));
});

//typings生成
gulp.task('typings' ,()=>{
  gulp.src("./typings.json")
  .pipe(typings());
});

//圧縮
gulp.task('min', ()=> {
  gulp.src('./dist/js/**/*.js')
  .pipe(plumber({
    handleError: (err)=> {
      console.log(err);
      this.emit('end');
    }
  }))
  .pipe(uglify())
  .pipe(gulp.dest('./dist/js'));
});

// 監視
gulp.task('watch', ()=> {
  gulp.watch('./src/ts/**/*.ts', ['ts']);
});

// デフォルトタスク
gulp.task('default', ()=> {
  if (util.env.production) {
    runSequence('clean', 'typings', 'js', 'ts', 'min');
  } else {
    runSequence('clean', 'typings', 'js', 'ts', 'watch');
  }
});

TypeScript

メインスクリプト記載。
クラスごとにファイルを分ける場合、import/exportを使う。

main.ts

/// <reference path="../../typings/main.d.ts"/>
import Test = require('./Test');

let test = new Test();
test.getName();

必要なクラス記載。

Test.ts

/// <reference path="../../typings/main.d.ts"/>
class Test {
  private name: string;
  constructor() {
    this.name = 'name';
  }
  public getName(): string {
    return this.name;
  }
}

export = Test;

HTML

※ブラウザで「require」が使えないのでrequire.jsを読み込む。
http://requirejs.org

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width" />
<link type="text/css" href="/css/style.css" rel="stylesheet" />
<script src="/js/jquery.js"></script>
<script data-main="/js/main.js" src="/js/require.js"></script>
</head>
<body>
</body>
</html>