TypeScript チュートリアル
TypeScriptを使い始める

備考

バージョン

インストールとセットアップ

バックグラウンド

TypeScriptは、JavaScriptコードに直接コンパイルされるJavaScriptの型付きスーパーセットです。 TypeScriptファイルは通常、 .ts拡張子を使用します。多くのIDEは、他の設定は必要ありませんが、TypeScriptをサポートしていますが、コマンドラインからTypeScript Node.JSパッケージでコンパイルすることもできます。

IDE

Visual Studio

• Visual Studio 2015はTypeScriptが含まれています。
• Visual Studio 2013 Update 2以降にはTypeScriptが含まれているか、旧バージョン用にTypeScriptをダウンロードできます 。

Visual Studioコード

• Visual Studioコード （vscode）は、TypeScriptのコンテキストオートコンプリートおよびリファクタリングおよびデバッグツールを提供します。 vscode自体はTypeScriptで実装されています。 Mac OS X、Windows、Linuxで使用できます。

WebStorm

• WebStorm 2016.2はTypeScriptと組み込みコンパイラが付属しています。 [Webstormは無料ではありません]

インテリジェントIDEA

• IntelliJ IDEA 2016.2は、Jetbrainsチームによって管理されているプラグインを介してTypescriptとコンパイラをサポートしています 。 [IntelliJは無料ではありません]

Atomとatom-typescript

• Atomはatom-typescriptパッケージでTypeScriptをサポートしています。

崇高なテキスト

• Sublime Textは、 typescriptパッケージでTypeScriptをサポートしています。

コマンドラインインターフェイスのインストール

Node.jsをインストールする

npmパッケージをグローバルにインストールする

TypeScriptは、どのディレクトリからでもアクセスできるように、グローバルにインストールできます。

npm install -g typescript

または

ローカルにnpmパッケージをインストールする

TypeScriptをローカルにインストールし、package.jsonに保存してディレクトリに制限することができます。

npm install typescript --save-dev

インストールチャンネル

あなたはからインストールできます：

• 安定したチャンネル： npm install typescript
• ベータチャンネル： npm install typescript@beta
• デベロッパーチャンネル： npm install typescript@next

TypeScriptコードのコンパイル

tsc compilationコマンドには、コードをコンパイルするために使用できるtypescriptが付属しています。

tsc my-code.ts

これにより、 my-code.jsファイルが作成されます。

tsconfig.jsonを使用してコンパイルする

また、 tsconfig.jsonファイルを使用してコードとともに移動するコンパイルオプションを提供することもできます。新しい活字体プロジェクト、開始するにはcd 、ターミナルウィンドウで、プロジェクトのルートディレクトリにして実行tsc --init 。このコマンドは、以下のような最小構成オプションを持つtsconfig.jsonファイルを生成します。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "pretty": true
    },
    "exclude": [
        "node_modules"
    ]
}

TypeScriptプロジェクトのルートに配置されたtsconfig.jsonファイルを使用すると、 tscコマンドを使用してコンパイルを実行できます。

こんにちは世界

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet(): string {
        return this.greeting;
    }
};

let greeter = new Greeter("Hello, world!");
console.log(greeter.greet());

ここではconstructorとgreetメソッドを持つクラスGreeterがあります。 newキーワードを使用してクラスのインスタンスを作成し、 greetメソッドがコンソールに出力する文字列を渡すことができます。私たちのインスタンスGreeterクラスが中に保存されているgreeter我々はそれを私たちが呼ぶための変数greet方法を。

基本的な構文

TypeScriptはJavaScriptの型付きスーパーセットであり、すべてのJavaScriptコードが有効なTypeScriptコードであることを意味します。 TypeScriptはそれの上に多くの新機能を追加します。

TypeScriptは、JavaScriptをC＃やJavaに似た強く型付けされたオブジェクト指向言語に似ています。つまり、大規模なプロジェクトではTypeScriptのコードが使いやすくなり、コードは理解しやすく維持しやすくなります。また、厳密な型指定は、言語がプリコンパイル可能であり、変数に宣言された範囲外の値を割り当てることができないことを意味します。たとえば、TypeScript変数が数値として宣言されている場合、その変数にテキスト値を代入することはできません。

この強力な型付けとオブジェクトの向きは、TypeScriptのデバッグと保守を容易にします。これらは標準のJavaScriptの最も弱い2つのポイントです。

型宣言

型宣言を変数、関数パラメータ、関数戻り型に追加できます。この型は変数名に続くコロンの後に書かれますvar num: number = 5;コンパイラは、コンパイル中に（可能であれば）型をチェックし、型エラーを報告します。

var num: number = 5;
num = "this is a string";  // error: Type 'string' is not assignable to type 'number'.

基本的なタイプは次のとおりです。

• number （整数と浮動小数点数の両方）
• string
• boolean
• Array 。配列の要素の型を指定できます。配列型を定義するには、 Array<T>とT[] 2つの同等な方法があります。例えば：
  • number[] - 数値の配列
  • Array<string> - Array<string>配列
• タプル。タプルは、特定のタイプの要素が固定されています。
  • [boolean, string] - 最初の要素がブール値で、2番目がブール値のタプルです。
  • [number, number, number] - 3つの数字からなるタプル。
• {} - オブジェクト、そのプロパティまたはインデクサを定義できます
  • {name: string, age: number} - name属性とage属性を持つオブジェクト
  • {[key: string]: number} - 文字列でインデックスされた数字の辞書
• enum - { Red = 0, Blue, Green } - 数値にマップされた列挙型
• 関数。パラメータと戻り値の型を指定します。
  • (param: number) => string - 1つの数値パラメータを取る関数。文字列を返します。
  • () => number - 数値を返すパラメータのない関数。
  • (a: string, b?: boolean) => void - 文字列を取り、オプションで戻り値のないブール値を取る関数。
• any - 任意のタイプを許可します。 anyを含む式は型チェックされません。
• void - "nothing"を表し、関数の戻り値として使用できます。 nullとundefinedのみがvoid型の一部です。
• never
  • let foo: never; - 決して真実ではないタイプのガードの下の変数のタイプとして。
  • function error(message: string): never { throw new Error(message); } - 決して戻ってこない関数の戻り値の型として。

• null - 値null型。厳密なヌルチェックが有効になっていない限り、 nullは暗黙的にすべての型の一部です。

鋳造

山括弧で明示的にキャストすることができます。例：

var derived: MyInterface;
(<ImplementingClass>derived).someSpecificMethod();

この例は、コンパイラによってMyInterfaceとして扱われるderivedクラスを示していMyInterface 。 2行目のキャストがなければ、コンパイラはsomeSpecificMethod()理解できないため例外がスローされますが、 <ImplementingClass>derivedを介してキャストするとコンパイラは何をすべきかを示唆します。

Typescriptでのキャストの別の方法は、 asキーワードを使用してasます：

var derived: MyInterface;
(derived as ImplementingClass).someSpecificMethod();

Typescript 1.6以降、デフォルトでは、 <>を使用すると.jsxファイルがあいまいであるため、 asキーワードを使用してasます。これは、 Typescriptの公式ドキュメントに記載されています 。

クラス

クラスは、TypeScriptコードで定義して使用できます。クラスの詳細については、 クラスのドキュメントページを参照してください 。

Node.jsのTypeScript REPL

Node.jsのTypeScript REPLを使用するには、 tsunパッケージを使用できます

それをグローバルにインストールする

npm install -g tsun

tsunコマンドを使用して端末またはコマンドプロンプトで実行する

使用例：

$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl
$ function multiply(x, y) {
..return x * y;
..}
undefined
$ multiply(3, 4)
12

ts-nodeを使用したTypeScriptの実行

ts-nodeは、 tscを使用したプリコンパイルの必要なしに、ユーザーがtypescriptファイルを直接実行できるようにするnpmパッケージtsc 。 REPLも提供します。

ts-nodeをグローバルにインストールする

npm install -g ts-node

ts-nodeはtypescriptコンパイラをバンドルしないので、インストールする必要があります。

npm install -g typescript

実行スクリプト

main.tsという名前のスクリプトを実行するには、

ts-node main.ts

// main.ts
console.log("Hello world");

使用例

$ ts-node main.ts
Hello world

REPLの実行

REPL実行コマンドts-nodeを実行するには

使用例

$ ts-node
> const sum = (a, b): number => a + b;
undefined
> sum(2, 2)
4
> .exit

REPLを終了するには、 .exitコマンドを使用するか、 CTRL+C 2回押します。