TypeScript 入門 (1) -TypeScriptとは-

TypeScript の学習として、私は オライリー・ジャパンの「TypeScript」をおすすめします。 これ一冊読めば、世界は変わります。

TypeScript とは

TypeScript は堅牢かつ生産性の高い状態を保ちつつアプリケーション開発を可能にする、強い静的型付き言語です。 マイクロソフトによって開発・メンテナンスされているオープンソースのプログラミング言語で、フリーで利用可能です。 JavaScript に基づいて構築されており、基本的に互換性を持つためフロントエンド開発者のキャッチアップはそこまで難しくないのではないかと思います。

公式ページ

TypeScriptコンパイラーまたはBabelを介して、クリーンでシンプルなJavaScriptコードに変換され、JavaScriptと同様に利用できます(ブラウザ、Webアプリケーション、Node.js etc)。

2019年の stateofjs の調査結果にも顕著に表れています。 TypeScriptの経験者は65%以上に上り、意識調査でも上位に位置する近年勢いを増している言語であることが見て取れます。 (出典：https://2019.stateofjs.com/javascript-flavors/)

冒頭で紹介したオライリーの書籍の前書きに書かれている以下の一文には共感する方も多いのではないでしょうか。

JavaScript の「Cannot read proprty *** of undefined」という 奇妙なエラーにうんざりしているからかもしれません。 (引用元：オライリージャパン TypeScript)

JavaScript は可能な限り書いたコードを活かそうとしてくれるのですが、それはしばしばプログラマーのストレスの種になりかねません。私も「なんだこのthis」とか「この変数のundefinedは本来何を想定していたのだろうか」といったJavaScript特有の悩みを抱えたことがあります。。

TypeScript はエラーメッセージを「エディタ上で」「入力したときに」有益なエラーメッセージを与えてくれます。 これだけでも生産性は段違いになるのではないでしょうか。

TypeScript の全体像

コンパイラー

TypeScriptの大きな特徴として、JavaScriptへとコンパイルするという点があります。 コードを出力する前にコンパイラは型の安全性を確認し、クリーンなJavaScriptに変換します。

型システム

TypeScriptはアノテーションベースの方の指定と、型の推論の両方を扱えます。

let sampleNum: number = 1 
let sampleNum = 1

このいずれも、number として扱います。

JavaScript との違い

• TypeScriptは型のバインドは静的に行われる。 (※JavaScriptは動的)

• TypeScriptは型の自動変換は(基本的に)行われない。(※JavaScriptは行われる)

  1 + [1]; // JavaScriptでは11, TypeScript では型のエラー

• TypeScriptは型のチェックはコンパイル時に行われる。(※JavaScriptは実行時)

Java 等言語を用いた開発で、Eclipse等のコンパイル機能を利用した方はイメージがつきやすいかと思います。 例えば上記の 1 + [1] の入力時点で、コードの下にエラーが表示されます。

• TypeScriptはエラーが表面化するのは基本的にコンパイル時である。(※JavaScriptは多くの場合、実行時)

　実行時エラーよりもコンパイルエラーの時点で問題が把握できるのは、プログラマーにとって大きなメリットです。 　エラーに気づくのが早ければ早いほど生産性は向上し、意図せぬバグを生み出すリスクも大いに軽減されます。

TypeScript で Hello World

エディタ

管理人のおすすめは VSCode ですが、もちろんSublimeText, Atom, Vim などあらゆるエディタを利用可能です。

1. Node.js のインストール

TypeScript はnpmを利用してインストールします。

mkdir typescript-tutorial
cd typescript-tutorial

npm init

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

2. tsconfig.json

TypeScript プロジェクトはルートディレクトリに tsconfig.json を含む必要があります。 これは、コンパイル対象ファイルやコンパイル結果の出力先、JavaScriptバージョンなどを指定します。

{
    "compilerOptions": {
      "module": "commonjs",
      "noImplicitAny": true,
      "removeComments": true,
      "preserveConstEnums": true,
      "outDir": "dist",
      "sourceMap": true
    },
    "include": ["src"],
    "exclude": ["node_modules"]
}

上記内容は一例ですが、他にも様々なオプションが用意されています。 (参考) TypeScript Handbook tsconfig.json

3. tslint.json

この設定は必須ではありませんが、コードに対するスタイルの強制の観点からも利用を強く推奨されています。

./node_modules/.bin/tslint --init

設定可能な詳細ルールは TSLintのドキュメント をご確認ください。

4. index.ts

TypeScript の拡張子は .ts とするのが一般的です。

mkdir src
touch src/index.ts

この時点のプロジェクト構造は以下です。

your-project/
- node_modules/
- src/
  - index.ts
- package.json
- tsconfig.json
- tslint.json

コードエディタで index.ts を開き、console.log('Hello World !'); と記述します。

5. コンパイル

TypeScript コードをTSCでコンパイルします。

./node_modules/.bin/tsc

本記事の手順3と同じ tsconfig.json にしている場合は、 dist ディレクトリ以下にコンパイルによって生成された js ファイルが存在していることが分かります。

6. 実行

Node.js を使ってコードを実行します。

node ./dist/index.js

ターミナル上に Hello World ! と表示されれば成功です。

ちょっと寄り道

管理人の実行環境はWindows 10ですが、git bush のターミナルを利用することで Mac 同様の使用感でコマンドを実行できます。 コマンドプロンプトが個人的にあまり好きではないのと、本業でMacを利用しているので・・・。

まとめ

本記事では、最初のTypeScriptプロジェクトの作成から実行までをまとめてみました。 次回以降、TypeScript の型や関数宣言について詳しく学んでいきます。

最後までお読みくださり、ありがとうございました。