JavaScriptを知らない人のためのTypeScript入門

今どきはよく「JavaScriptじゃなくてTypeScriptを使うべき」みたいな話を聞くのですが、ネット上のどのTypeScript入門も、JavaScriptを知っている前提で話が進みます。以前、友達に「JavaScript知らないんだけど、それをすっ飛ばしてTypeScriptを学ぶ方法はないの？」と訊いたところ、「素直にJavaScriptをしてから、TypeScriptしようね。」という回答が帰ってきました。にゃーん。

しかし、これは正しい回答で、[TypeScriptの公式サイト](https://www.typescriptlang.org/)の[Learning JavaScript and TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html#learning-javascript-and-typescript)に以下のことが書かれています。

> We frequently see the question “Should I learn JavaScript or TypeScript?“.
> The answer is that you can’t learn TypeScript without learning JavaScript! TypeScript shares syntax and runtime behavior with JavaScript, so anything you learn about JavaScript is helping you learn TypeScript at the same time.

翻訳すると以下の通り。

> 『JavaScriptとTypeScriptのどちらを学ぶべきか』という質問をよく目にします。
> 答えは、JavaScriptを学ばなければTypeScriptを学ぶことはできないということです。 TypeScriptはJavaScriptと構文と実行時の動作を共有するため、JavaScriptについて学んだことはすべて、TypeScriptを同時に学ぶのに役立ちます。

なるほど、JavaScriptなくして、TypeScriptは語れないということですね。ただ、JavaScriptを学んで、TypeScriptを学ぶというのは、道のりが長い気がします。というわけで、JavaScriptを学びながら、TypeScriptを学べる「JavaScriptを知らないためのTypeScript入門」を書いてみました。

## 体系的に学びたい方へ

JavaScriptもTypeScriptもだいたい分かるにょん、という方や、この記事を読み終えた方、もしくは
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">TSの体系的な資料見たことないな…<br>typeとinterfaceでなんとかなってしまうので、それ以外は必要に応じて毎回調べてて見落とし機能が多そう</p>&mdash; へだる (@hedalu244) <a href="https://twitter.com/hedalu244/status/1327281825744449536?ref_src=twsrc%5Etfw">November 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
このような方は、[TypeScriptの公式サイト](https://www.typescriptlang.org/)の[The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)（英語）を読むことをおすすめします。

## 事前に知っておくべきこと

この記事はMDN web docsの[JavaScriptガイド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide)に沿って話を進めていきます。このガイドは[事前に知っておくべきこと](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Introduction#What-you-should-already-know)に書かれている予備知識を持っていることを前提としています。

本記事では読み飛ばしてもいい章があります。例えば、今は正規表現を使わないことが明確である場合は8章を読み飛ばしても問題ありません。読み飛ばして分からない場合は前の章に戻ってみましょう。

## 用語説明

まず用語の説明をします。記事に出てくるキーワードや、よく見かけるキーワードについて簡単な説明を書きました。記事で分からないキーワードが出てきたら、ここに戻って見ましょう。

### HTML・CSS・JavaScriptとは何か

JavaScriptを知らない方はそもそもHTMLとCSSとJavaScriptとは何なのかを知らない方かもしれません。
この記事では詳しくは説明しませんが、@shuntaro_tamuraさんの[超絶初心者のためのフロント入門（HTML、CSS、JavaScript）](https://qiita.com/shuntaro_tamura/items/c9b2fec0f3a9f7d1e987)を読めば簡単に理解できると思います。

ナンセンスな例えですが、家に例えると、
骨組みや柱がなどの「構造」が**HTML**、
壁紙や窓のデザインなどの「装飾」が**CSS**、
電気やガスのスイッチなどの「動的な処理」が**JavaScript**
ですね。

HTMLについてもっと詳しく知りたい方はMDN web docsの[HTML: HyperText Markup Language](https://developer.mozilla.org/ja/docs/Web/HTML)を読むことをおすすめします[^1]。CSSについてもっと詳しく知りたい方はMDN web docsの[CSS: カスケーディングスタイルシート](https://developer.mozilla.org/ja/docs/Web/CSS)を読むことをおすすめします。JavaScriptについてもっと詳しく知りたい方はMDN web docsの[JavaScript とは](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript)を読むことをおすすめします。

### TypeScriptとは何か

一言で言うと、**JavaScriptを拡張して作られたプログラミング言語**です[^2]。
JavaScriptとTypeScriptの大きな違いは「型定義」ができるかできないかです。JavaScriptには変数に型がありませんが、TypeScriptには変数に型があります。変数に型を付けることができるので、ちょっとしたミスが起きにくくなります。
ちなみに、JavaScriptを拡張して作られたプログラミング言語は他にも色々あって、それらを総称して**AltJS**（Alternative JavaScript）と呼びます。

さきほどの例えの続きですが、今まで電気やガスのスイッチなどの「動的な処理」をJavaScriptでやっていたけれど、最近では代わりにそこをTypeScriptで処理することがあるという感じです。

TypeScriptの長所にもっと詳しく知りたい方は@SoraKumoさんの[TypeScriptをお勧めしたい7つの理由](https://qiita.com/SoraKumo/items/43fba2ad2d10336a665f)を読むことをおすすめします。

### その他の説明

**DOM**（Document Object Model）は一言でいうと、HTMLやXMLで書かれた文書などを木構造のオブジェクトで表現することで、文書をプログラムから操作・利用することを可能にする仕組みです。詳しくは説明しませんが、@takiyu713さんの[DOMと仮想DOMについて](https://qiita.com/takiyu713/items/f1c6ba73becf2252cf5e)を読めば簡単に理解できると思います。もっと詳しく知りたい方はMDN web docsの[DOM の紹介](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction)を読むことをおすすめします。

**Node.js**は一言でいうと、ブラウザ上という制限された環境でしか動けなかったJavaScriptを、PythonやRubyのようにパソコン上で動かせるようにしてくれるものです。詳しくは説明しませんが、@non_calさんの[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)を読めば簡単に理解できると思います。

**npm**は一言でいうと、Node.jsのモジュールを管理するツールです。詳しくは説明しませんが、@righteousさんの[【初心者向け】NPMとpackage.jsonを概念的に理解する](https://qiita.com/righteous/items/e5448cb2e7e11ab7d477)を読めば簡単に理解できると思います。

## 0章: 環境構築

JavaScriptはそのままブラウザ上で動きますが、TypeScriptはJavaScriptに変換してからでないと動きません。
そこでTypeScriptコンパイラを使って、TypeScriptをJavaScriptに変換します。

今回はTypeScriptを中心に学ぶので、環境開発は最低限で行います。

1. Node.jsをインストール
   1. [Node.jsの公式サイト](https://nodejs.org/ja/)からLTSをダウンロードし、インストールします。
   2. npmはNode.jsと一緒にインストールされます。
2. TypeScriptコンパイラをインストール
   1. コマンドプロンプトやターミナルなどを実行し、下記のコマンドを実行してください。
   2. `npm install -g typescript`（もしくは`sudo npm install -g typescript`）でTypeScriptコンパイラをインストールします。
3. インストールの確認
   1. `tsc -v`を実行し、バージョンが表示されればインストールは完了です。

以下は、実行例です[^3]。

```sh
$ node -v
v12.19.0
$ npm -v
6.14.8
$ npm install -g typescript
...
+ typescript@4.1.2
added 1 package from 1 contributor in 23.883s
$ tsc -v
Version 4.1.2
```

TypeScriptの環境構築についてもっと詳しく知りたい方は@ochiochiさんの[TypeScriptチュートリアル① -環境構築編-](https://qiita.com/ochiochi/items/efdaa0ae7d8c972c8103)を読むことをおすすめします。

## 1章: Hello, world!

実際にTypeScrptのプログラムを書いて、コンパイルして、実行してみましょう。
さて、`Hello, world!`を表示させるという一億番煎じ[^4]のプログラムですが、次のソースコードをお好きなエディタ[^6]で書いて、`hello.ts`という名前で保存してください。

```ts:01/hello.ts
console.log('Hello, world!');
```

そしてコマンドプロンプトもしくはターミナルで、下記のコマンドを実行してください[^3]。

```sh
$ tsc ./hello.ts
```

この`tsc`コマンドがTypeScriptコンパイラです。うまくコンパイルできると、結果として`hello.js`というファイルができます。ここでは簡単にNode.jsで実行してみましょう。次のコマンドを入力してください[^3]。

```sh
$ node hello.js
```

実行すると、コマンドプロンプトもしくはターミナルで`Hello, world!`が表示されます。

```sh
$ tsc ./hello.ts
$ node hello.js
Hello, world!
```

## 2章: 文法とデータ型

この章からは、はじめにMDN web docsの[JavaScriptガイド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide)を読み、次にTypeScriptではJavaScriptとどう違うかを説明していく形式で進めていきます。「JavaScriptではこのように書きます。では、TypeScriptではどうしょう。」といった感じですね。

さて、この章では最初に[文法とデータ型](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types)を読んで、JavaScriptの知識を付けましょう。

この章ではTypeScriptは以下の点でJavaScriptと違いが見られます。

- TypeScriptはJavaScriptと違って、変数、定数、関数、引数などの後ろに`: 型名`を指定することで型を宣言することができます。これを**型アノテーション**（Type Annotation）と言います。型に一致しない代入や参照が行われるとコンパイルエラーが発生します。

### 型アノテーション

TypeScriptでは型アノテーションでプリミティブ型を指定することができます。

```ts:02/primitive.ts
let v_bool: boolean = true;
let v_null: null = null;
let v_undef: undefined = undefined;
let v_num: number = 123;
let v_bigint: bigint = 11451481093189319194545072136436489464n;
let v_str: string = "Hello, world!";
```

ただし、ターゲットがES2020未満の場合、bigintリテラルは使用できないので気をつけてください。

なお、配列やオブジェクトの型は以下のように指定できます。

```ts:02/array-and-object.ts
let coffees: string[] = ['French Roast', 'Colombian', 'Kona'];
var car: object = { myCar: 'Saturn', getCar: 'Honda', special: 'Toyota' };
```

実際に型に一致しない代入や参照が行われるとコンパイルエラーが発生するか確かめてみましょう。

```ts:02/type-error.ts
var v_num: number = 123;
var v_str: string = 123; // ここでコンパイルエラー！
```

### 型推論

JavaScriptでは以下のように書くことができます。詳しくは説明しませんが、MDN web docsの[データ型の変換](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Data_type_conversion)を読めば簡単に理解できると思います。

```js:02/answer.js
var answer = 42;
answer = 'Thanks for all the fish...';
```

ただ、これをTypeScriptとして書くと次のようなコンパイルエラーが出ます。

```sh
$ tsc test.ts
test.ts:2:1 - error TS2322: Type 'string' is not assignable to type 'number'.

2 answer = 'Thanks for all the fish...';
  ^^^^^^

Found 1 error.
```

TypeScriptは、いくつかの簡単なルールに基づいて変数の型を推論（およびチェック）します。これを**型推論**といいます。変数の型は、定義によって推論されます。つまり、`var answer = 42;`は`var answer: number = 42;`と同じで、`answer`の型は`number`なのです。型推論についてもっと詳しく知りたい方は@uhyoさんの[TypeScriptの型推論詳説](https://qiita.com/uhyo/items/6acb7f4ee73287d5dac0)を読むことをおすすめします。

このエラーを回避する方法として、以下の2つの方法があります。

1つ目に、`|`を使用することで、複数の型を指定する方法があります。
string または number の型を示す場合は `number | string` とします。
詳しくは12章の共同型で説明します。

```ts:02/answer-pipe.ts
var answer: number | string = 42;
answer = 'Thanks for all the fish...';
```

もう一つの方法は、`any`を使用することで、プリミティブを含む任意の型を許容することです。

```ts:02/answer-any.ts
var answer: any = 42;
answer = 'Thanks for all the fish...';
```

### 数値と '+' 演算子

数値と文字列を`+`演算子で結合する式では、TypeScriptは数値を文字列に変換します[^5]。以下の式を見てみましょう。

```ts:02/string-plus-number.ts
var x = '答えは ' + 42; // "答えは 42"
var y = 42 + ' が答え'; // "42 が答え"
```

それ以外の演算子がある式では、型が違うため、TypeScriptはコンパイルエラーになります。

```ts:02/string-minus-number.ts
'37' - 7 // ここでコンパイルエラー！（JavaScriptだと30になります。）
'37' + 7 // "377"
```

## 3章: 制御フローとエラー処理

if文などの制御フローやtry...catch構文はJavaScriptと同じです。MDN web docsの[制御フローとエラー処理](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)を読めば簡単に理解できると思います。

## 4章: ループと反復処理

ループ文はJavaScriptと同じです。MDN web docsの[ループと反復処理](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration)を読めば簡単に理解できると思います。

## 5章: 関数

この章では最初に[関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions)を読んで、JavaScriptの知識を付けましょう。

この章ではTypeScriptは以下の点でJavaScriptと違いが見られます。

1. 関数の返り値の型を型アノテーションで指定できます。

### 関数の返り値の型指定

例えば、次のコードは`square`という名前の簡単な関数を定義します：

```ts:05/square.ts
function square(x: number): number {
  return x * x;
}
```

例えば、関数式では次のように定義できます：

```ts:05/anonymous.ts
const square = function(x: number): number { return x * x; };
var x = square(4); // x の値は 16 となる
```

もちろん関数式に名前をつけることもできます：

```ts:05/factorial.ts
const factorial = function fac(n: number): number { return n < 2 ? 1 : n * fac(n - 1); };
console.log(factorial(3));
```

`(引数名:型, 引数名:型 ...) => 戻り値`と書くことで関数を型指定することができます。第1引数のfはnumberの型の引数を一つ取り、numberの型を返す関数なので、`: (x: number) => number`で型指定することができます。次の例では`map`関数を定義し、第1引数に関数を取り、第2引数に配列を取ります：

```ts
function map(f: (x: number) => number, a: number[]) {
  let result = []; // 新しい配列を作成
  let i: number; // 変数の宣言
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
}
```

下記のコードでは、この関数は関数式で定義された関数を受け取って、2つ目の引数で受け取った配列の各要素に対して実行しています。

```ts
function map(f: (x: number) => number, a: number[]) {
  let result = []; // 新しい配列を作成
  let i: number; // 変数の宣言
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
}
var f = function (x: number): number {
  return x * x * x;
};
let numbers = [0, 1, 2, 5, 10];
let cube = map(f, numbers);
console.log(cube);
```

これは`[0, 1, 8, 125, 1000]`を返します。

## 6章: 式と演算子

式と演算子はJavaScriptと同じです。MDN web docsの[式と演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators)を読めば簡単に理解できると思います。

## 7章: テキスト処理

テキスト処理はJavaScriptと同じです。MDN web docsの[テキスト処理](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Text_formatting)を読めば簡単に理解できると思います。

## 8章: 正規表現

正規表現はJavaScriptと同じです。MDN web docsの[正規表現](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions)を読めば簡単に理解できると思います。

正規表現が意図したとおりに動くか試したいときは、[regex101.com](https://regex101.com/)というとても便利なサイトがあるので、ぜひ試してみてください。

## 9章: インデックス付きコレクション

この章では最初に[インデックス付きコレクション](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Indexed_collections)を読んで、JavaScriptの知識を付けましょう。

### 配列の型アノテーション

配列の型アノテーションは以下のように、変数を宣言するときに配列の要素の型の後に`[]`を付けます。

```ts:09/emp.ts
let emp: string[] = []
emp[0] = 'Casey Jones'
emp[1] = 'Phil Lesh'
emp[2] = 'August West'
```

また、`Array<型>`と指定して書くことも可能です。

```ts:09/emp2.ts
let emp: Array<string> = []
emp[0] = 'Casey Jones'
emp[1] = 'Phil Lesh'
emp[2] = 'August West'
```

### 2次元配列の型アノテーション

2次元の配列の場合は`[][]`と、`[]`を二つ書けばいいです。

```ts:09/99.ts
var table: number[][] = new Array();
for (let i = 0; i < 9; i++) {
    table[i] = new Array();
    for (let j = 0; j < 9; j++) {
        table[i][j] = (i + 1) * (j + 1);
    }
}
```

## 10章: キー付きコレクション

この章では最初に[キー付きコレクション](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Keyed_collections)を読んで、JavaScriptの知識を付けましょう。

### Mapの型アノテーション

Mapオブジェクトの型アノテーションは以下のように、`Map<キーの型, 値の型>`と書きます。

```ts:10/sayings.ts
let sayings: Map<string, string> = new Map();
sayings.set('dog', 'woof');
sayings.set('cat', 'meow');
sayings.set('elephant', 'toot');
```

このファイルをコンパイルする際は`tsc ./sayings.ts --lib es6`としてください。

### Hashの型アノテーション

Hashオブジェクトの型アノテーションは以下のように、`Map<要素の型>`と書きます。

```ts:10/sayings.ts
let mySet: Set<number | string> = new Set();
mySet.add(1);
mySet.add('some text');
mySet.add('foo');
```

## 11章: オブジェクトでの作業

この章では最初に[オブジェクトでの作業](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects)を読んで、JavaScriptの知識を付けましょう。

オブジェクトの型アノテーションは以下のように、`object`で指定できます。

```ts:11/myCar.ts
var myCar: object = {
  make: 'Ford',
  model: 'Mustang',
  year: 1969
};
```

TypeScriptには`Object`というものもあり、`var myCar: Object = ...`と書いてもコンパイルが通ります。[^5] [TypeScriptのObject型とobject型は同じ……と思うじゃん?](https://qiita.com/suin/items/928642e48959e864a74e)ところがどっこい、そうではありません。詳しくは説明しませんが、@suinさんの書いた[この記事](https://qiita.com/suin/items/928642e48959e864a74e)を読めば簡単に理解できると思います。

## 12章: 型の定義

この章では、引き続きMDN web docsの[オブジェクトでの作業](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects)に沿って話を進めつつ、[TypeScriptの公式サイト](https://www.typescriptlang.org/)の[TypeScript for JavaScript Programmers](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html#defining-types)に書かれているような説明を加えていきます。

### interface

TypeScriptでは、以下のように`interface`キーワードを使って、インターフェイスの宣言を使用して、オブジェクトの形状を明示的に記述することができます。

```ts:12/Car.ts
interface Car {
  make: string;
  model: string;
  year: number;
}
```

次に、変数宣言の後に以下のように構文を使用して、JavaScriptオブジェクトが`Car`インターフェイスの形状に準拠していることを宣言できます。

```ts:12/myCar2.ts
interface Car {
  make: string;
  model: string;
  year: number;
}

var myCar: Car = {
  make: 'Ford',
  model: 'Mustang',
  year: 1969
};
```

### 共同型

共同型を使えば、複数の型をひとまとめにすることができます。たとえば、ブール型を`true`または`false`のいずれかとして記述できます。

```ts:12/myBool.ts
type MyBool = true | false;
```

ところで、この`MyBool`の型は`boolean`です。これについてはここで説明しません。

とはいえ、`MyBool`なんて型を実際に使うことはないでしょう。共同型のもっと一般的な使用例は、値が許可されている文字列または数値リテラルのセットを記述することです。

```ts:12/type.ts
type OthelloColor = 'black' | 'white';
type OneDigit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
type Make = 'Ford' | 'Eagle' | 'Nissan' | 'Mazda';
```

## 13章: オブジェクトモデルの詳細

PromiseはJavaScriptと同じです。MDN web docsの[オブジェクトモデルの詳細](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model)を読めば簡単に理解できると思います。

## 14章: Promiseを使う

PromiseはJavaScriptと同じです。MDN web docsの[Promiseを使う](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises)を読めば簡単に理解できると思います。

## 15章: イテレーターとジェネレーター

イテレーターとジェネレーターはJavaScriptと同じです。MDN web docsの[イテレーターとジェネレーター](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)を読めば簡単に理解できると思います。

## 16章: メタプログラミング

メタプログラミングはJavaScriptと同じです。MDN web docsの[メタプログラミング](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Meta_programming)を読めば簡単に理解できると思います。

## 17章: インターフェイス

これはJavaScriptにはない機能です。他のプログラミング言語と同じで、中身の実装を持たずに、メンバーや型の定義だけ持つ機能のことです。

この章に関しては、[The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)の[Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html)（英語）を読めば簡単に理解できると思うので、説明しません。英語が読めない方は@murankさんの[TypeScript Handbook を読む (3. Interfaces)](https://qiita.com/murank/items/553276c3dc2eec9bfe47)を読むといいかもしれません。

また、@nogsonさんの[Typescriptのinterfaceの使い方](https://qiita.com/nogson/items/86b47ee6947f505f6a7b)や、@t_t238さんの[【TypeScript】インターフェースの使い方](https://qiita.com/t_t238/items/5bbb71d817404b49961c)を読んでも簡単に理解できると思います。

## 18章: ジェネリクス

これもJavaScriptにはない機能です。ジェネリクスは実は前にやった`<>`のことです。ジェネリクスは、実際に使われるまで型が決まらないときに、抽象的な型（ジェネリック型）を使うことで、いろいろな型の値を与える関数などを作るときに使います。ジェネリクスは総称型と呼ばれることもあります。

この章に関しては、[The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)の[Generics](https://www.typescriptlang.org/docs/handbook/generics.html)（英語）を読めば簡単に理解できると思うので、説明しません。英語が読めない方は@murankさんの[TypeScript Handbook を読む (6. Generics)](https://qiita.com/murank/items/144b686d34fd433a97a3)を読むといいかもしれません。

## 19章: 列挙型

これもJavaScriptにはない機能です。この記事では詳しくは説明しませんが、[The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)の[Enums](https://www.typescriptlang.org/docs/handbook/enums.html)（英語）を読めば簡単に理解できると思います。英語が読めない方は@murankさんの[TypeScript Handbook を読む (7. Enums)](https://qiita.com/murank/items/cc487562b21bae3728ba)を読むといいかもしれません。

実はTypeScriptでは列挙型はあまり使われません。代わりに共同型を使います。このことについてもっと詳しく知りたい方は[TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します](https://engineering.linecorp.com/ja/blog/typescript-enum-tree-shaking/)や、[[TypeScript] 列挙型は Union か enum か](https://moyapro.com/2019/04/11/typescript-union-vs-enum/)、または、[さようなら、TypeScript enum](https://www.kabuku.co.jp/developers/good-bye-typescript-enum)を読むことをおすすめします。

## 20章: TypeScriptを実践する

TypeScript自体の説明は前の章で終わりです。この章では、TypeScriptを実際に使う際に参照するべき記事を紹介します。TypeScriptを学んでいる皆さんはおそらく何か目的を持っているはずですから、ここではその目的への橋渡しをしたいと思っています。

ここに書かれていない参考になる記事があったらコメント欄に書いてください。コメント歓迎します。

### React + TypeScript

おそらく、ReactでTypeScriptする方が多いでしょうか。私もそのうちの一人です。

- @yonettyさんの[TypeScriptでReactに入門するチュートリアル](https://qiita.com/yonetty/items/012be4c5c6258a609e35)
- @makishyさんの[React + Redux + TypescriptでサンプルWebアプリ](https://qiita.com/makishy/items/857bb838a2910eb34da3)
- [TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/)の[React](https://typescript-jp.gitbook.io/deep-dive/tsx/react)

### vue.js + TypeScript

- @nrslibさんの[vue.js + typescript = vue.ts ことはじめ](https://qiita.com/nrslib/items/be90cc19fa3122266fd7)

### 布教用

JavaScriptを使っている人に向けてTypeScriptを勧めるときの記事です。

- @yuya_prestoさんの[次にJSガッツリ書くときはTypeScriptで](https://qiita.com/yuya_presto/items/f625da7b1a4d21c6ce7a)
- @baby-deguさんの[なぜReactアプリにTypeScriptを使うべきなのか](https://qiita.com/baby-degu/items/3c2891bc300cfbea6c90)

## あとがき

お疲れ様でした！
ひとまず、これでこの記事は終わりです。この記事はごちゃごちゃとJavaScriptとTypeScriptを行ったり来たりしているので、整理したい方や、やった内容を忘れてしまった方もいらっしゃると思います。そんなときは上に方にある「体系的に学びたい方へ」で紹介した公式ドキュメントをお読みいただけるとスッキリすると思います。また、飛ばした章や読んでいないリンク先の記事（特に詳しく知りたい方用の記事[^1]）は後でまた読んで見ると新たな知見を手に入れることができると思います。

この記事書いている人はJavaScriptとTypeScriptの言語の根っこから理解しているわけではないので、大きな誤解をしているかもしれません。（私自身がJavaScriptをすっ飛ばして、TypeScriptを勉強した身ですので…）くだらない間違いはコメントください。（みんなコメント書こうね。）あんまりにも間違いが多くて呆れた方はどうか代わりに正しい記事を書いてください。そしたら、この記事を消します。

[^1]: この記事では「…にもっと詳しく知りたい方は…を読むことをおすすめします」という構文で紹介している記事はとても詳しく書いてあることがあるため、初心者向けではない可能性があることに留意してください。
[^2]: 関西型言語が得意な方が次のようなことを言っていましたが、これは冗談です。<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">へえー、JavaとTypeScriptが合体して生まれたのがJavaScriptなんや。</p>&mdash; 無職やめ太郎（本名） (@Yametaro1983) <a href="https://twitter.com/Yametaro1983/status/1340294536250048514?ref_src=twsrc%5Etfw">December 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>JavaとJavaScriptは名前が似ていますが、全くの別物です。よく言われる例えとして、インドとインドネシアくらい（話される言語や宗教が）違うことが挙げられます。
[^6]: 2077年、SDGsを達成してから44年経ち、ようやく世界に平和が訪れると思われていた。しかし、世界中が高度に発達し、プログラミングが盛んに行われるようになってから、人々の中で「どのテキストエディタ（またはIDEを始めとしたツールなど）が一番良いか」というテーマの論争が過激化していった。最初はお互いを批判するだけの、小さな小競り合いのようなものだったが、次第に、腱鞘炎で病院へ行くと「君はEmacsじゃなくてVimを使っているのに不思議だねぇ」と医者に言われるようになったり、ニュースで国内の指定暴力団Vimmerが暴れまわるようになったり、終いにはvi原理主義者がテロを起こして、アメリカが核を飛ばす始末。国外では戦争が、国内でも内戦が発生した最悪な状態で、Emacs派の主人公は友達のcenti（nanoの後継の後継の後継）派と共に他の仲間を探して、荒れ果てた日本を縦断する――。Qiita記事なのでこれ以上書くと怒られるので書きませんが、誰かこういう感じのフィクション作品を書いてくれませんか？「JetBrainを使っているやつは頭もJetBrainだな」「お前は今、二つ間違えた。一つ目はそれが褒め言葉であること、二つ目はJetBrainじゃなくてJetBrainsだ、（銃声）」というやり取りとか、VSCoderに対して悪魔のスキンHot Dog Standで目を潰すとかそういうシーンが見たいです。もちろんお好きなエディタで書いていいですよ。
[^3]: コマンドの`$`（ドル記号）は打たないでください。`$`（ドル記号）が頭に付く行は、それに続くコマンドを実行することを意味しています。このドル記号のことをコマンドプロンプト（コマンド入力が可能な状態）と呼びます。これは、使用するシェルやターミナルソフトウェア設定により変化しますが この記事では、`$`で統一します。
[^4]: 「一億番煎じ」はこの前Qiitaで見かけて思わず笑ってしまった単語です。どうやらオタク特有の過剰表現らしいですが、`Hello, world!`を表示させるプログラムに関しては、わりと冗談抜きで一億番煎じですね。
[^5]: これはJavaScriptでも同じです。