ももの知恵の樹

TypeScript_環境設定

TypeScript公式サイト

https://www.typescriptlang.org/


環境準備

インストール

npmでインストールすると、下記コマンドで実行環境が用意完了します。 


$ npm install -g typescript

下記コマンドでバージョンを確認します。 


$ tsc -v

パス設定

tcsへのパスが設定されていない場合には、下記コマンドでnpmがグローバルで使用しているディレクトリを調べ、このパスを環境変数に設定します。 


$ npm bin -g

hello world(HTML表示)

tsファイルを作成する

「hello.ts」というソースコードを作成します。 


class HelloWorld
{
  constructor(public displayText : string) {}
  print() {
    return this.displayText;
  }
}

let helloWorld = new HelloWorld('HelloWorld');
document.body.innerHTML = helloWorld.print();

コンパイルする

ソースコードをコンパイルします。 


$ tsc hello.ts

この結果、hello.jsが生成されます。


HTMLに表示する

コンパイルしたjsファイルをHTMLから呼び出します。 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="hello.js"></script>
</body>
</html>

hello world(Node実行)

Node.jsから実行する場合は、Node.jsで扱える構文を使用します。


tsファイルを作成します。 


const message:string = 'Hello! TypeScript!';
console.log(message);

これをコンパイルして、Node.jsで実行します。 


$ tsc hello.ts
$ node hello.js

tslint

TypeScript向けのlintツールにtslintがあります。


インストール

npmでインストールできます。 


$ npm install -g tslint

tslint-config-airbnbは「Airbnb」が提唱するJavaScript スタイルガイドをチェックするtslintのルールセットです。

スタイルガイドを簡単に取り込むことができます。 


$ npm install -g tslint-config-airbnb
$ npm install -g tsutils

tslint.json

ルール定義として「tslint.json」を作成します。 


{
  "extends": "tslint-config-airbnb",
  "rules": {
    "max-line-length": [true, 120],
    "no-boolean-literal-compare": false
  }
}

lint実行


tslint hello.ts


関連ページ