TypeScriptの基本的な使い方

この章では、TypeScript の最も基本的な構文と使用法のいくつかを紹介します。

型宣言

TypeScript コードの最も明白な機能は、JavaScript 変数の型宣言が追加されていることです。

foo:文字列を許可します。

上の例では、変数 foo の後にコロンを使用して、その型を string として宣言しています。

型宣言は常に識別子の後に「コロン + 型」を追加して記述されます。関数のパラメータと戻り値もこの方法で宣言されます。

関数 toString(num:number):string {
  文字列(数値)を返します;
}

上記の例では、関数「toString()」のパラメータ「num」の型は「number」です。パラメータリストの括弧の後に、戻り値の型が string であることが宣言されます。より詳細な概要については、「関数」の章を参照してください。

変数の値は宣言された型と一致する必要があることに注意してください。一致しない場合、TypeScript はエラーを報告します。

// エラーを報告する
foo:string = 123; とします。

上記の例では、変数 foo の型は文字列ですが、その値が 123 に割り当てられている場合、TypeScript はエラーを報告します。

さらに、TypeScript では、変数は値を割り当てられた後にのみ使用できると規定されており、そうでない場合はエラーが報告されます。

x:数値にしましょう。
console.log(x) // エラーレポート

上記の例では、値が割り当てられずに変数 x が読み取られるため、エラーが発生します。 JavaScript では、エラーを報告せずにこの動作が許可されており、割り当てられていない変数は「unknown」を返します。

型推論

型宣言は必要ありません。そうでない場合は、TypeScript が型自体を推測します。

foo = 123 とします。

上の例では、変数 foo には型宣言がないため、TypeScript がその型を推測します。数値が割り当てられているため、TypeScript はその型が「number」であると推測します。

その後、変数 foo が、推論された型と矛盾する別の型の値に変更された場合、TypeScript はエラーを報告します。

foo = 123 とします。
foo = 'こんにちは' // エラー

上記の例では、変数 foo の型は number として推論され、文字列値が割り当てられ、TypeScript はエラーを報告します。

TypeScript は関数の戻り値を推論することもできます。

関数 toString(num:number) {
  文字列(数値)を返します;
}

上記の例では、関数 toString() は戻り値の型を宣言していませんが、TypeScript は戻り値が文字列であると推測します。 TypeScript の型推論のため、関数の戻り値の型は通常省略されます。

ここからわかるように、TypeScript の設計思想は、型宣言はオプションであり、追加してもしなくてもよいというものです。型宣言がなくても、それは有効な TypeScript コードですが、TypeScript が型を正しく推論するという保証はありません。このため、すべての JavaScript コードは正当な TypeScript コードです。

この設計のもう 1 つの利点は、以前の JavaScript プロジェクトを TypeScript プロジェクトに変更するときに、一部のコードが追加されていなくても、古いコードに型を徐々に追加できることです。

TypeScript のコンパイル

JavaScript ランタイム環境 (ブラウザーと Node.js) は TypeScript コードを認識しません。したがって、TypeScript プロジェクトを実行するには、まず JavaScript コードに変換する必要があります。このコード変換プロセスは「コンパイル」と呼ばれます。

TypeScript は正式には実行環境を提供せず、コンパイラのみを提供します。コンパイル時に、すべての型宣言と型関連コードが削除され、実行できる JavaScript コードのみが残り、JavaScript の実行結果は変わりません。

したがって、TypeScript の型チェックはコンパイル時の型チェックのみであり、実行時の型チェックではありません。コードが JavaScript にコンパイルされると、実行時に型がチェックされなくなります。

値と型

TypeScript を学習するには、「値」と「型」を明確に区別する必要があります。

「型」は「値」を表し、後者のメタ属性とみなすことができます。 TypeScript では、すべての値に型があります。たとえば、「3」は値であり、その型は「number」です。

TypeScript コードは値ではなく型のみを扱います。 「値」に関する処理はすべてJavaScriptで完結します。

これは覚えておくことが重要です。 TypeScript プロジェクトには、実際には 2 種類のコードがあり、1 つは最下位レベルの「値コード」、もう 1 つは上位レベルの「型コード」です。前者は JavaScript 構文を使用し、後者は TypeScript の型構文を使用します。

これらは分離できます。TypeScript のコンパイル プロセスでは、実際にはすべての「型コード」が削除され、「値コード」のみが保持されます。

TypeScript プロジェクトを作成するときは、どちらが値コードでどちらが型コードであるかを混同しないでください。

TypeScript プレイグラウンド

TypeScript を使用する最も簡単な方法は、公式 Web サイトの TypeScript Playground と呼ばれるオンライン コンパイル ページを使用することです。

この Web ページを開いて TypeScript コードをテキスト ボックスに貼り付けると、現在のページ上の JavaScript コードが自動的にコンパイルされ、コンパイルされた製品をブラウザーで実行することもできます。コンパイル中にエラーが報告された場合は、詳細なエラー情報も表示されます。

このページには、自動構文プロンプトを備えた完全な IDE サポートもあります。さらに、コード スニペットとコンパイラ設定を URL として保存し、他のユーザーと共有することもサポートされています。

本書の例は、閲覧および編集のためにこのページに配置することをお勧めします。

tsc コンパイラ

TypeScript が公式に提供しているコンパイラは tsc と呼ばれ、TypeScript スクリプトを JavaScript スクリプトにコンパイルできます。このマシンで TypeScript コードをコンパイルするには、tsc がインストールされている必要があります。

規則に従って、TypeScript スクリプト ファイルは .ts 接尾辞を使用し、JavaScript スクリプト ファイルは .js 接尾辞を使用します。 tsc の機能は、.ts スクリプトを .js スクリプトに変換することです。

インストール

tsc は npm モジュールです。以下のコマンドを使用してインストールします (npm を最初にインストールする必要があります)。

$ npm install -g typescript

上記のコマンドは tsc をグローバルにインストールします。または、プロジェクト内の依存モジュールとして tsc をインストールすることもできます。

インストールが完了したら、インストールが成功したかどうかを確認します。

# または tsc --version
$ tsc -v
バージョン5.1.6

上記のコマンドでは、「-v」または「--version」パラメータを使用して、現在インストールされている tsc バージョンを出力できます。

ヘルプ情報

-h または --help パラメータはヘルプ情報を出力します。

$tsc-h

デフォルトでは、「--help」パラメータは使用可能な基本的なオプションのみを表示します。 「--all」パラメータを使用すると、完全なヘルプ情報を表示できます。

$ tsc --all

コンパイルスクリプト

tsc をインストールした後、TypeScript スクリプトをコンパイルできるようになります。

「tsc」コマンドの後に、TypeScript スクリプト ファイルを追加して、JavaScript スクリプトにコンパイルします。

$tscapp.ts

上記のコマンドは、現在のディレクトリに「app.js」スクリプト ファイルを生成します。このスクリプトは完全にコンパイルされた JavaScript コードです。

tsc コマンドは、複数の TypeScript スクリプトを一度にコンパイルすることもできます。

$ tsc ファイル1.ts ファイル2.ts ファイル3.ts

上記のコマンドは、現在のディレクトリに 3 つの JavaScript スクリプト ファイル file1.js、file2.js、および file3.js を生成します。

tsc には、コンパイル動作を調整できるパラメータが多数あります。

(1)--outFile

複数の TypeScript スクリプトを 1 つの JavaScript ファイルにコンパイルする場合は、--outFile パラメーターを使用します。

$ tsc file1.ts file2.ts --outFile app.js

上記のコマンドは、2 つのスクリプト file1.ts と file2.ts を JavaScript ファイル app.js にコンパイルします。

(2)--outDir

コンパイル結果はデフォルトで現在のディレクトリに保存されますが、--outDir パラメータを指定して他のディレクトリに保存することもできます。

$ tsc app.ts --outDir dist

上記のコマンドは、dist サブディレクトリに app.js を生成します。

(3)--ターゲット

コンパイル結果がさまざまな JavaScript エンジンで実行できることを保証するために、tsc は TypeScript コードをデフォルトで非常に低いバージョンの JavaScript、つまりバージョン 3.0 (「es3」で表されます) にコンパイルします。通常、これは望ましい結果ではありません。

このとき、「--target」パラメータを使用して、コンパイルされた JavaScript のバージョンを指定できます。 「es2015」以降のバージョンを使用することをお勧めします。

$ tsc --target es2015 app.ts

コンパイルエラーの処理

コンパイル プロセス中にエラーが報告されない場合、tsc コマンドは何も表示しません。したがって、プロンプトが表示されない場合は、コンパイルが成功したことを意味します。

コンパイル中にエラーが報告された場合、「tsc」コマンドはエラー メッセージを表示しますが、この場合でも JavaScript スクリプトはコンパイルおよび生成されます。

たとえば、ここでは間違った TypeScript スクリプト「app.ts」を示します。

//app.ts
foo:number = 123 とします。
foo = 'abc' // エラー

上記の例では、変数 foo は数値型であり、tsc コマンドがこのスクリプトをコンパイルすると、エラーが報告されます。

$tscapp.ts

app.ts:2:1 - エラー TS2322: 型 'string' を型 'number' に割り当てることはできません。

2 foo = 'abc';
  ~~~

app.ts:2 で 1 つのエラーが見つかりました

上記の例では、「tsc」コマンドは、変数「foo」に文字列値が誤って割り当てられたことを示すエラー メッセージを出力します。

この場合、コンパイルされた製品「app.js」が生成されます。以下はコンパイル結果です。

// アプリ.js
var foo = 123;
foo = 'abc';

ご覧のとおり、エラーにもかかわらず、tsc は TypeScript をそのまま JavaScript スクリプトにコンパイルします。

これは、TypeScript チームがコンパイラの役割はコンパイル エラーを与えることだけであると考えているためです。これらのエラーにどう対処するかは開発者自身の判断です。開発者は自分のコードをよく知っているため、何があってもコンパイルされた製品が生成され、開発者は次に何をするかを決定できます。

エラーが報告された後でコンパイルを停止し、コンパイル製品を生成しない場合は、--noEmitOnError パラメーターを使用できます。

$ tsc --noEmitOnError app.ts

上記のコマンドがエラーを報告すると、app.js は生成されません。

tsc には --noEmit パラメータもあります。これは型が正しいかどうかをチェックするだけで、JavaScript ファイルは生成しません。

$ tsc --noEmit app.ts

上記のコマンドはコンパイル エラーがあるかどうかをチェックするだけであり、app.js は生成されません。

tsc コマンドのパラメータの詳細については、「tsc コンパイラ」の章を参照してください。

tsconfig.json

TypeScript を使用すると、tsc コンパイル パラメータを構成ファイル tsconfig.json に書き込むことができます。このファイルがカレントディレクトリに存在する限り、tsc は自動的にそれを読み込むため、実行時にパラメータを記述する必要はありません。

$ tsc file1.ts file2.ts --outFile dist/app.js

上記のコマンドは、以下に示すように tsconfig.json として記述されます。

{
  "ファイル": ["file1.ts", "file2.ts"],
  "コンパイラーオプション": {
    "outFile": "dist/app.js"
  }
}

この設定ファイルを使用すると、コンパイル中に tsc コマンドを直接呼び出すことができます。

$tsc

「tsconfig.json」の詳細については、「tsconfig.json 構成ファイル」の章を参照してください。

ts-node モジュール

ts-node は、TypeScript コードを直接実行できる非公式の npm モジュールです。

使用する場合は、最初にグローバルにインストールできます。

$ npm install -g ts-node

インストールすると、TypeScript スクリプトを直接実行できます。

$ ts-node script.ts

上記のコマンドは TypeScript スクリプト script.ts を実行し、実行結果を返します。

ts-node がインストールされていない場合は、npx 経由で呼び出して TypeScript スクリプトを実行することもできます。

$ npx ts-node script.ts

上記のコマンドでは、npx がオンラインで ts-node を呼び出し、インストールせずに script.ts を実行します。

パラメーターを指定せずに ts-node コマンドを実行すると、TypeScript コマンド ライン REPL 実行環境が提供され、TypeScript コードを入力して 1 行ずつ実行できます。

$ts-node
>

上記の例では、「ts-node」コマンドを単独で実行すると、大なり記号が表示されます。これは TypeScript の REPL 実行環境であり、コードを 1 行ずつ入力して実行できます。

$ts-node
> const 2 回 = (x:string) => x + x;
> 2回('abc')
「abcabc」
>

上記の例では、TypeScript コマンド ライン REPL 環境で、最初に関数を 2 回 入力し、次にその関数を呼び出すと、結果が得られます。

この REPL 環境を終了するには、Ctrl + d を押すか、「.exit」と入力します。

TypeScript コードを単純に実行して結果を確認したいだけの場合は、ts-node が便利な方法です。