Typescript環境構築

Typescriptってなんなん

javascriptに型を加えた言語です。
typescriptをトランスパイルするとjavascriptになります。

環境

node.js v8.1.2

パッケージインストール

以下のパッケージをインストール、グローバルを汚染したくないので-gオプションは使用しません。

• Typescript
• gulp
• gulp-typescript

npm install --save-dev typescript gulp gulp-typescript

gulpタスク作成

gulpfile.jsを以下の様に記載します。

gulpfile.js

'use strict';

const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');

gulp.task('ts-build', () => {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest('dist'));
});

スクリプト追加

package.jsonにスクリプト追加する。

package.json

  - 省略 -
  "scripts": {
    "ts-build": "gulp ts-build"
  },
  - 省略 -

Typescriptの設定ファイル作成

tsconfig.jsonを作成し以下の様に記載する。

tsconfig.json

{
    "compilerOptions": {
        "target": "ES2017",
        "sourceMap": true
    },
    "include": [
        "src/**/*.ts"
    ]
}

お試し

srcディレクトリ以下にgreeter.tsを作成し以下を記載する。

greeter.ts

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

var user = new Student("Jane", "M.", "User");

console.log(greeter(user));

以下のコマンドを実行し、typescriptがjavascriptになることを確認する。

npm run ts-build

./dist/greeter.js

class Student {
    constructor(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
console.log(greeter(user));