TypeScriptTypeScriptを使い始める


備考

TypeScriptは、JavaScriptに移行するJavaScriptのスーパーセットを目指しています。 TypeScriptは、ECMAScript準拠のコードを生成することで、既存のJavaScriptエンジンとの互換性を維持しながら、新しい言語機能を導入することができます。 ES3、ES5およびES6は現在サポートされているターゲットです。

オプションのタイプが主な機能です。型を使用すると、エラーを早期に発見する目的で静的な検査が可能になり、コードリファクタリングなどの機能を使用してツールを強化できます。

TypeScriptは、Microsoftが開発したオープンソースのクロスプラットフォームプログラミング言語です。 ソースコードはGitHubで入手できます

バージョン

バージョン発売日
2.4.1 2017-06-27
2.3.2 2017-04-28
2.3.1 2017-04-25
2.3.0ベータ 2017-04-04
2.2.2 2017-03-13
2.2 2017-02-17
2.1.6 2017-02-07
2.2ベータ 2017-02-02
2.1.5 2017-01-05
2.1.4 2016-12-05
2.0.8 2016-11-08
2.0.7 2016年11月03日
2.0.6 2016年10月23日
2.0.5 2016-09-22
2.0ベータ版 2016年7月8日
1.8.10 2016-04-09
1.8.9 2016-03-16
1.8.5 2016-03-02
1.8.2 2016-02-17
1.7.5 2015-12-14
1.7 2015-11-20
1.6 2015-09-11
1.5.4 2015-07-15
1.5 2015-07-15
1.4 2015-01-13
1.3 2014-10-28
1.1.0.1 2014-09-23

基本的な構文

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"を表し、関数の戻り値として使用できます。 nullundefined のみが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コードで定義して使用できます。クラスの詳細については、 クラスのドキュメントページを参照してください

こんにちは世界

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());
 

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

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

バックグラウンド

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

IDE

Visual Studio

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

崇高なテキスト

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

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 コマンドを使用してコンパイルを実行できます。

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

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

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回押します。

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