TypeScriptを使う（本当に使ってみるだけの場合。）

TypeScriptとはなんぞや

大規模開発言語に近い仕様でソースコードを書くことができる
コンパイルするとJavaScriptになる

コンパイラをインストールする

$ npm install -g typescript

/Users/ホスト名/.nvm/versions/node/v8.11.1/bin/tsserver -> /Users/ホスト名/.nvm/versions/node/v8.11.1/lib/node_modules/typescript/bin/tsserver
/Users/ホスト名/.nvm/versions/node/v8.11.1/bin/tsc -> /Users/ホスト名/.nvm/versions/node/v8.11.1/lib/node_modules/typescript/bin/tsc
+ typescript@2.8.3
added 1 package in 2.891s

プロジェクトフォルダを作成

コマンド

$ cd htdocs/
$ mkdir typescript-test1
$ cd typescript-test1/
$ touch tscode.ts
$ touch show.html
$ touch tsconfig.json

構成

📁 htdocs
└ 📁 typescript-test1
    ├ 🗒 tscode.ts
    ├ 🗒 show.html
    └ 🗒 tsconfig.json

とりあえず出力して表示までやってみる

わーっと書いてみる

[show.html]

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
  body {
    width :500px;
    padding :10%;
  }
</style>
</head>
<body>
  <script type="text/javascript" src="tscode.js"></script>
</body>
</html>

[tscode.ts]

class Cat{

    name:string;

    sayHello(){
        return this.name + "だにゃん😺";
    }

    constructor(name:string){
        this.name = name;
    }
}

let aki = new Cat("あき");  //letはローカル変数を示す

document.body.innerHTML = aki.sayHello();

🙂💬　変数の宣言は汎用的な[var]よりローカル変数である[let]の使用が推奨されているそう.
🙂💭　classとかあるし本当にJavaとかC#とかに近い感じがする.

[tsconfig.json]

{"compileOprions": {
    "outFile": "jscode.js"
}}

🙂💬
・[tsconfig.json]が存在するディレクトリがTypeScriptプロジェクトのルート・フォルダであることを示すことになる.
・上記ではコンパイルした後に出力されるファイル名を指定している.

コンパイルする

環境：VSCode(version 1.23)

コマンドパレット（shift + ⌘ + P）で「tasks」と入力すると↓が出てくるので「configure task」を選択してください

f:id:azix:20180517182643p:plain

ビルドに[tsconfig.json]を選択し、実行（Enter）

f:id:azix:20180517182632p:plain

VSCodeのターミナルを表示しておくと以下のような結果が表示されます

f:id:azix:20180517182636p:plain

コンパイルが完了すると[tscode.js]が作成されます. 中身はこんな感じ↓

var Cat = /** @class */ (function () {
    function Cat(name) {
        this.name = name;
    }
    Cat.prototype.sayHello = function () {
        return this.name + "だにゃん😺";
    };
    return Cat;
}());
var aki = new Cat("あき"); //letはローカル変数を示す
document.body.innerHTML = aki.sayHello();

😕💭　若干めんどくさい感じのJSだーって印象...

f:id:azix:20180517182647p:plain

備考

React&WebPackで実行環境を作るならReact & Webpackがチュートリアルになっているのでさんこうにすると良いです.

Masakiさんコメントより、let, const, var の違いについてもう少し調べたいなと思いました。
以下のサイトがわかりやすかったので追記します。
変数の宣言 | TypeScript 日本語ハンドブック | js STUDIO

あじちゃんの備忘録。

〜ここはメモ帳です