TypeScriptとはなんぞや

  1. 大規模開発言語に近い仕様でソースコードを書くことができる
  2. コンパイルすると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 の違いについてもう少し調べたいなと思いました。
以下のサイトがわかりやすかったので追記します。
[http://js.studio-kingdom.com/typescript/handbook/variable_declarations:title]