ホームページ  >  記事  >  ウェブフロントエンド  >  TypeScript について知っておくべきこと

TypeScript について知っておくべきこと

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-13 16:15:402047ブラウズ

今回は TypeScript について知っておくべきことを紹介します。TypeScript を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

Angular2 は Angular1 と比較すると Java や

Javascript に似ています。大幅な変更があるため、Angular は 2.x、4.x、5.x およびその他の後続のバージョンを表すのに対し、AngularJS は 1.x バージョンを表すために使用されます。 Angular ファミリの歴史を記録するには、「Angular Authoritative Tutorial」を参照してください。この記事では TypeScript について紹介します。

元のリンク

TypeScript

Angular は JavaScript に似た言語である TypeScript で構築されています。

TypeScript はまったく新しい言語ではなく、ES6 のスーパーセットです。すべての ES6 コードは完全に有効でコンパイル可能な TypeScript コードです。

TypeScript について知っておくべきこと


typescript

TypeScript には、ES5 と比較して 5 つの主要な改善点があります:

types

classes

annotations

module import

言語ツールキット

types

TypeScript タイプはオプションです。

ただし、型チェックの利点は次のとおりです:
1 コードを記述し、コンパイル中のバグを防ぐのに役立ちます
2 コードを読み取り、作成者の意図を明確に表現するのに役立ちます

String

String には、String 型として宣言されたテキストが含まれます。

var name: string = 'hello world!';

数値

整数か浮動小数点かに関係なく、TypeScript ではすべてのデータは浮動小数点数で表されます:

var age: number = 25;

Array

配列は同じ

データ型の集合であるため、配列は Array 型で表されます。コレクションなので、配列内の項目の型も指定する必要があります

var arr: Array<string> = [&#39;component&#39;, &#39;provider&#39;, &#39;pipe&#39;];
    或var arr: string[] = [&#39;component&#39;, &#39;provider&#39;, &#39;pipe&#39;];var arr: Array<number> = [1, 2, 3, 4, 5, 6];
    或var arr: number[] = [1, 2, 3, 4, 5, 6];

enumeration

enumeration は名前付け可能な値のセットであり、

enum Man {age, iq, eq};
var man: Man = Man.age;

任意の型

変数に型が指定されていない場合は、デフォルトの型any 型の変数はあらゆる型のデータを受け取ることができます

var something: any = &#39;hello world&#39;;
something = 1;
something = [1, 2, 3];

「None」型

void は、そこに型が期待されていないことを意味し、通常は関数の戻り値として使用されます

。戻り値

function setName(name: string): void {    this.name = name;
}
void 型も正当な任意の型です

class

es5はプロトタイプベース

オブジェクト指向

設計を採用していますが、クラスを使用せず、プロトタイプに依存しています

es6では、クラスを使用して次のことを行うことができます。次のような組み込みクラスを表します:

class Point {}
クラスには属性、メソッド、
コンストラクターを含めることができます

属性

属性は、次のようなクラス インスタンス オブジェクトのデータを定義します: ポイント クラスは x、y 属性を持つことができます

Everyクラスの属性には、次のようなオプションの型を含めることができます。

class Point {    x: number;    y: number;
}

Method

Method は、クラス オブジェクト インスタンスのコンテキストで実行される関数です。オブジェクトのメソッドを呼び出す前に、このオブジェクトのインスタンスが必要です

class Point {
    x: number;
    y: number;
    moveTo(x: number, y: number) {        this.x = x;        this.y = y;        console.log(this.x, this.y);
    }
}var p: Point = new Point();
p.x = 1;
p.y = 1;
p.moveTo(10,10);

。コンストラクター

コンストラクターは、クラスがインスタンス化されるときに実行される特別な関数です。通常、コンストラクターはコンストラクター内で初期化されるため、コンストラクターは入力パラメーターを持つことができます。戻り値

クラスがコンストラクターを明示的に定義していない場合、パラメーターのないコンストラクターが自動的に作成されます

class Point {
}var p = new Point();
等价于class Point {    constructor() {
    }
}var p = new Point();

パラメーター付きのコンストラクター

class Point {
    x: number;
    y: number;    constructor(x: number, y: number) {        this.x = x;        this.y = y;
    }
    moveTo(x: number, y: number) {        this.x = x;        this.y = y;        console.log(this.x, this.y);
    }
}    
var p: Point = new Point(1,1);
p.moveTo(10,10);

継承

オブジェクト指向のもう 1 つの重要な機能は、継承によってサブクラスがサブクラスから継承できることを示します。親クラスはその動作を取得し、このサブクラスで動作をオーバーライド、変更、または追加できます。

TypeScript は extends キーワードを使用して実装される継承機能をサポートしています。さらに興味深い情報については、注意してください。 php 中国語 Web サイトの他の関連記事へ!

推奨読書:


キャンバスで黒い背景を持つシアンの花火を作る方法

Fetchを使用してhttpリクエストを作成します

以上がTypeScript について知っておくべきことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。