5分以内に表示されるTypeScript

この文書では、JavaScriptを基本的に理解していると仮定します.

この書類は

を参考に整理した内容です.

Typeスクリプトのインストール

タイプのスクリプトをインストールする方法は、大きく2つあります.

npmでインストール

npm install -g typescript

Type ScriptのVisual Studioプラグイン

をインストール

最初のTypeスクリプトファイルの作成

からhiに編集します.tsファイルを作成し、次のJavaScriptコードを入力します.

function hi(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = hi(user);

コンパイルコード

.TS拡張子を使用していますが、このコードは普通のJavaScriptコードです.

このコードは、

の既存のJavaScriptアプリケーションから直接コピーして貼り付けることができます.

TypeScriptコンパイラを

cmdで実行します.

tsc greeter.ts

その結果、同じJavaScriptコードを含むGreeterになります.jsファイルになります.

では、TypeScriptが提供するいくつかの新しい機能が使用できます.

は、「person」関数の引数に文字列タイプタグを追加します.

function hi(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = hi(user);

タイプタグ

Type Scriptのタイプタグは、関数または変数の意図契約を記録する簡単な方法です.

の下の場合、hi関数は単一の文字列パラメータとともに呼び出されます.

では、hi関数を呼び出すときのパラメータとして配列を変更できます.

function hi(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.textContent = hi(user);

を再コンパイル中にエラーが発生しました.

hi.ts:7:32 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

と同様に、hi関数呼び出しからすべてのパラメータを削除しようとします.

function hi() {
    return "Hello, ";
}

let user = [0, 1, 2];

document.body.textContent = hi(user);

Type Scriptでは、この関数を呼び出すために予期せぬパラメータが使用されていることがわかります.

hi.ts:7:32 - error TS2554: Expected 0 arguments, but got 1.

にかかわらず、TypeScriptはコードの構造およびタイプタグに基づいて静的解析を提供する.

エラーが発生しましたが、Greeter.jsファイルが生成されました.

コードにエラーがあってもTypeScriptを使用できます.

しかし、Typeスクリプトはコードが予想通りに動作しないと警告した.

インタフェース

は、firstNameフィールドとlastNameフィールドを持つオブジェクトを表すインタフェースを使用します.

タイプのスクリプトでは、2つの内部構造が互換性のあるタイプが互いに互換性があります.

したがって、明確な実装手順はなく、インタフェース要件の形式のみを用いてインタフェースを実装することができる.

// 얘가 인터페이스
interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.textContent = greeter(user);

カテゴリ

今回はクラスを使いましょう.

Type Scriptは、クラスベースのオブジェクト向けプログラミングサポートなど、JavaScriptの新しい機能をサポートします.

ジェネレータと共通フィールドを使用してStudioクラスを作成します.

クラスとインタフェースは正常に動作しており、プログラマが正しい抽象レベルを決定するのに役立ちます.

さらに、publicを関数を構築するために使用する引数は、その引数の名前で自動的にPropertyを生成する略語である.

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.textContent = greeter(user);

tsc greeter.tsを実行すると、生成されたJavaScriptコードが以前のコードと同じであることがわかります.

Type ScriptのクラスはJavaScriptでよく使われるプロトコルベースのサムネイルにすぎません.

TypeScript Webアプリケーションの実行

の下のコードです.htmlに書いておきましょう.

ブラウザでGreeter.htmlを開き、最初の簡単なTypeScript Webアプリケーションを実行します.
オプション:Visual StudioのGreeter.jsを開くか、Type Scriptグラウンドにコードをコピーします.

識別子にマウスを置くと、このタイプが表示されます.

の場合、自動的にタイプが推定される場合がありますのでご注意ください.

の最後の行を再入力し、DOM要素タイプに基づく完了リストとパラメータヘルプを表示します.

greer関数の参照にカーソルを置き、F 12キーを押して対応する定義に移動できます.

では、シンボルを右クリックしてrefactoringを使用して名前を変更することもできます.

が提供するタイプ情報は、アプリケーション規模でJavaScriptを使用するツールとともに動作します.

タイプのスクリプトの詳細については、WebサイトのSamplesセクションを参照してください.