TypeScriptの概要と導入（初学者向け）

はじめに

TypeScriptという言語はご存知だろうか？フロントエンドを学習している人、JavaScriptを使用したことがある人には一度は耳にしたことがあるかもしれない。2012年にオープンソースとして発表されたため、まだまだ歴史の浅い言語にはなるが、大規模なWebアプリ開発に向いていることもあり将来性がかなり高いと認知されている。これから人気になっていく可能性を大いに秘めたこのTypeScriptという言語を知って学習してみる足がかりにしてみてほしい。

静的型付け

TypeScript最大の特徴とも言えるのが静的型付けである。正直この特徴を抜かせばほぼJavaScriptを同じような特徴、書き方を持つ言語であったりする。型推論や型注釈といった機能を持ち合わせ、安全性を備えているだけでなくコンパイルも速いという今までのJavaScriptにはなかった特徴を持っている。そのため、大規模なプログラムを構築するのに適しており、大きなプロダクトを抱えているような企業では続々と採用され始めている魅力的な言語である。実際著者も開発インターンでこの言語にふれたことがある。

導入

※本記事ではテキストエディタとして「VSCode」を採用している。TypeScriptの開発元と同じMicrosoft社が開発していることもあり、サポートも手厚いためである。

(1) Node.jsをインストール

基本的には最新バージョンをダウンロードするようにしよう。
https://nodejs.org/ja/

インストールされているかは以下のコマンドで確認できる。

$ node -v

値が返ってこなかったり、エラーが起きた場合にはしっかり対処してほしい。本記事ではNode.jsでプログラムが動くようにしている。

(2) ディレクトリを作成し、TypeScriptをインストール

まずディレクトリを作成する。デスクトップ上にファイルを作成してVScodeにドラック&ドロップするでもよし。Linuxコマンドで作成するでもよし。後者の場合はターミナル（またはコマンドプロンプト）に打ち込むだけなので容易である。
例)「tsex」というファイルをLinuxコマンドで作成

$ mkdir tsex
$ cd tsex

次にpackage.jsonを生成する。以下のコマンドを同じくターミナルに打ち込む。

$ npm init --yes

「--yes」はつけなくても良い。（つけておくと質問を省略して実行してくれるため時間の節約になる。）

こちらを生成し終わったらファイルの中にこの一文の記述を追加してほしい。

package.json

"type": "module",

そして、TypeScriptをインストールする。

$ npm install --save-dev typescript @types/node

バージョンの指定をしていない故に最新版がダウンロードされるようになっている。

(3) tsconfig.jsonを用意

TypeScriptのコンパイラに対する設定を記述しているのがこちらのファイルである。こちらのファイルを以下のコードを実行して生成する。

$ npx tsc --init

生成が完了したらファイルの中の記述を確認してほしい。以下のようになっていると思う。

tsconfig.json

{
 "compilerOptions":{
　　（多くのコンパイラオプション...）
 }
}

（多くのコンパイラオプション...）ここを4点ほど以下のように変更してほしい。

tsconfig.json

変更前
...
"target": "es2016"
...
↓
変更後
...
"target": "es2020"
...

tsconfig.json

変更前
...
"module": "commonjs"
...
↓
変更後
...
"module": "esnext"
...

tsconfig.json

変更前
//"moduleResolution": "node"
...
↓
変更後
...
"moduleResolution": "node"
...

tsconfig.json

変更前
...
//"outDir": "./"
...
↓
変更後
...
"outDir": "./dist"
...

※distというディレクトリ配下にjsファイルが生成されるようにしている。
最後に、includeオプションを設定し、srcというディレクトリ直下のTypeScriptファイルがコンパイルの対象になるようにしてあげる。

tsconfig.json

{
 "compilerOptions":{
　　（多くのコンパイラオプション...）
 }
"include": ["src/**/*.ts"]
}

設定が終わったらファイルの中身が以下のような構成になっていることを確認してほしい。

|_node modules
| |_@types
| | |_node
| |_typescript
|_package-lock.json
|_package.json
|_tsconfig.json

導入は以上である。

☆おまけ☆

実際にプログラムを書いてコンパイルしてみよう。 package.jsonの隣にsrcディレクトリを作り、さらにその中にTypeScriptファイルを作成しよう。（ここではindex.tsとしておく。）ファイルの中身は以下のように記述してみてほしい。

index.ts

const sentence: string ="Let's TypeScript！！！"；

console.log(sentence);

プログラムを保存したらターミナルのディレクトリ直下で以下のコマンドを実行してほしい。

$ npx tsc 

tscとはTypeScript Compilerの略である。このtscはtsconfig.jsonを読み込み、それに従ってコンパイルをおこなう。includeの設定を前述しているようにsrcディレクトリ内で全ての.tsファイルがコンパイルされる。その後distディレクトリが生成されてその中に実行結果が現れるようになる。実行後このような中身になっているであろう。

|_dist
| |_index.js
|_node modules
| |_@types
| | |_node
| |_typescript
|_package-lock.json
|_package.json
|_src
| |_index.ts
|_tsconfig.json

新たに生成されたindex.jsファイルの中身はこのようになっている。

index.js

"user strict";
const sentence = "Let's TypeScript！！！";
console.log(sentence);

"user strict";が追加され、stringが消された。ここから、TypeScriptからJavaScriptへのコンパイルはTypeScript特有の部分だけが取り除かれていることがわかる。このjsファイルはNode.jsで実行できる。ターミナルで先ほどのディレクトリで以下のコマンドを実行してみよう。

$ node dist/index.js

すると以下のように出力される。

Let's TypeScript！！！

以上でTypeScriptプログラムが実行できる。

この記事で紹介したやり方は少しまわりくどいかもしれないが、JavaScriptとTypeScriptの両方の理解を一度に深めることができるような学習方法でもあるため、ぜひ実践してみてほしい。基本的な文法やオブジェクト、関数やクラスを学習し終えたらReactやAngular、Scalaなど親和性の高いフレームワークでアプリケーション開発してみて実践力と応用力を身につけてみると良いと思う。

以上！