TypeScriptの習得はJS知ってたらラク

こんにちは。少々、記事タイトルの表現がうざったいですね。ごめんなさい。

そもそも

TypeScriptは、JavaScriptにﾁｮｯﾄ機能を追加したものと考えて大丈夫です。
コンパイルすると、JavaScriptが生成できます。

Q.なぜわざわざTypeScriptに

A. コード補完がたくさん出てくる！

VSCode等エディタでは、コード補完機能として、インテリセンスが使用できます。
が、JavaScriptにおいてはWindow、document等などは補完してくれますが、それら以外は結構出てこないです。

TypeScriptは変数に型がほぼ必ず(例外あり)ついているので、十分に補完できるわけですね。

他にもあるんですが私は主にこういうメリットで使用しているのでこれしか解説できません...

こちらの記事はより詳しい事を書いてくださっているので是非

使い方は？

パッケージを初期化してtypescriptをインストールします。私はpnpmを使います。

> mkdir typescript_test
> cd typescript_test
> pnpm init
> pnpm i -D typescript

次にtsconfigを生成しましょう。オプションがずらりと並んでいて怖いですが、重要なところだけ書いておけば大丈夫です。興味があったらこちらの記事が分かりやすいと思います。

> pnpm tsc --init

開けてみると非常に多くのオプションがコメントアウトされていますね。
コメントを除去して見てみましょう。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

es2016、commonjsという単語、見覚えがありますね(無かったら申し訳ないです)
compilerOptionsでは名前の通りコンパイラの設定を書きます。

"target"はes2016(ES7)になっていますね、多くのブラウザでサポートされているためTypeScript公式サイトではes2015(ES6)が推奨されています。お好みで(コンパイルの変化が見たいので私はこの記事ではes5を使いますね。)
"module"は出力するときにどういうモジュールシステムでコンパイルするかという事ですね。
他にもオプションがあるんですが、主にこれを環境に合わせて変えれば多くのフレームワークで使用できると思います。

書きましょう。

index.ts

class Nazokake {
    a = ""
    b = ""
    c = ""

    output() {
        console.log(this.a, "とときまして", this.b, "とかけます。その心はどちらも", this.c, "でしょう")
    }
}

const n = new Nazokake()
n.a = "TypeScript"
n.b = "にんじんじゃがいもカレールー"
n.c = "スーパー(マーケット)セット"
n.output()

なんということでしょう、ぜんぜん型がついているというTypeScriptのメリットが活かしきれてないし、私のセンスがつまらなすぎます。tscくんごめんね。

> pnpm tsc

index.js

"use strict";
var Nazokake = /** @class */ (function () {
    function Nazokake() {
        this.a = "";
        this.b = "";
        this.c = "";
    }
    Nazokake.prototype.output = function () {
        console.log(this.a, "とときまして", this.b, "とかけます。その心はどちらも", this.c, "でしょう");
    };
    return Nazokake;
}());
var n = new Nazokake();
n.a = "TypeScript";
n.b = "にんじんじゃがいもカレールー";
n.c = "スーパー(マーケット)セット";
n.output();

このようにちゃんとtargetに合わせて出力してくれるわけですね。
では、TypeScriptでコンパイルする時にちゃんと指摘してくれるか検証してみましょう。

index.ts

let stringvar: string

stringvar = "TypeScript" // String
stringvar = 1            // Number
stringvar = false        // Boolean

おっと！

C:\Users\hoge\typescript_test> pnpm tsc
index.ts:4:1 - error TS2322: Type 'number' is not assignable to type 'string'.

4 stringvar = 1
  ~~~~~~~~~

index.ts:5:1 - error TS2322: Type 'boolean' is not assignable to type 'string'.

5 stringvar = false
  ~~~~~~~~~


Found 2 errors in the same file, starting at: index.ts:4

ちゃんとツッコんでくれましたね。
「なんでやねん！stringにnumber代入するなゆうたやろがい！」

...はい。

以上です

大規模開発で本領を発揮してくるTypeScript、ぜひ試してみてはいかがでしょうか