1. Tsとは何かまず、強い型付けでは任意の暗黙的な型変換が許可されませんが、弱い型付けでは許可されます。 2. 基本的な文法1. プリミティブデータ型を宣言する変数の後にキーワードを指定して、変数の型を指定します。 文字列型: const a: 文字列 = 'オーロラ' 番号タイプ: const b: number = 666 // NAN 無限大を含む ブール型: 定数 c: ブール値 = true NULLタイプ: 定数d:null = null 未定義の型: 定数 e: 未定義 = 未定義 シンボルタイプ: const h: シンボル = シンボル() 2. オブジェクト型を宣言するまず、オブジェクト型ではオブジェクトだけでなく、配列や関数も指定できます。 const foo1: オブジェクト = {}; const foo2: オブジェクト = []; const foo3: オブジェクト = 関数(){}; オブジェクトとしてのみ指定する場合は、次のように、オブジェクト属性の型を事前に宣言する必要があります。 const obj: {名前: 文字列、年齢: 数値} = { 名前: 「オーロラ」 年齢:18 } 2.1 配列型の宣言配列を宣言し、<> を使用して要素の型を指定できます。たとえば、すべての要素が数値である配列を宣言するには、次のようにします。 const arr: 配列<数値> = [1,2,3] 2 番目の方法は次のとおりです。これも配列要素がすべて数値であることを指定します。 定数arr: 数値[] = [1,2,3] 2.2 タプル型の宣言配列内の各要素の型を事前に指定し、厳密に 1 対 1 に対応させます。 定数タプル: [数値、文字列、ブール値] = [666、'auraros'、true] 3. 列挙型を宣言する列挙型は、次のように enum キーワードを使用して宣言されます。 列挙ステータス{ ペディング = 1、 解決 = 2、 拒否 = '3' } //アクセス console.log(Status.pedding); 値が書き込まれていない場合、デフォルト値は 0 から始まり増加します。最初の要素が文字型の場合、値を完全に定義する必要があります。最初の要素が数値として指定され、後続の要素に値が書き込まれていない場合、値は最初の要素の値を位置によって増加させた結果になります。 4. 関数のパラメータと戻り値の型関数宣言: 関数の入力パラメータの型と戻り値の型を指定します。渡されるパラメータの数と型は、呼び出し時に同じである必要があります。 各パラメータの型は括弧内に指定され、戻り値の型は括弧の右側に指定されます。 関数 fun (名前:文字列,年齢:数値):文字列{ 'sss' を返す } fun('オーロラ',18); パラメータを渡すかどうかわからない場合は、「?」を追加できます。 ' はオプションであることを示します。 関数 fun (名前:文字列,年齢?:数値):文字列{ 'sss' を返す } fun('オーロラ'); または、パラメータにデフォルト値を追加します。これもオプションになります。 関数 fun (名前:文字列,年齢:数値=666):文字列{ 'sss' を返す } fun('オーロラ'); パラメータの数が不明な場合は、スプレッド演算子と分解割り当てを使用してそれを表すことができます。もちろん、指定されたものと同じ型を渡す必要があります。 関数 fun (name:文字列,age:数値=666,...res:数値[]):文字列{ 'sss' を返す } fun('オーロラ',1,2,3); 関数式: const fun2:(名前:文字列,年齢:数値)=>文字列 = 関数(名前:文字列,年齢:数値){ 'sss' を返す } これについては、インターフェースを定義するときに詳しく説明します。 5. あらゆるタイプ任意の型を表す any キーワードを指定することで、元の js と同様に、異なる型の値を自由に割り当てることができます。 num:any = 1 とします。 数値 = 'a'; 数値 = true; 6. 型アサーション型アサーションは、この変数が特定の型であり、100% 確実であることを 特定の型であることをアサートするには、 as + type を使用します。 定数res = 1; const num = res を数値として扱います。 <type> 形式を使用してアサートすることもできます (非推奨)。 定数res = 1; const num = <数値>res 7. インターフェースの基本的な使い方インターフェースは仕様、契約として理解できます。オブジェクトが持つべきメンバーと、それらのメンバーがどのようなものであるかを制限できます。 インターフェース Post { 名前: 文字列; 年齢:番号 } たとえば、関数 インターフェース Post { 名前: 文字列; 年齢:番号 } 関数 printPost(post: Post){ console.log(投稿名); console.log(投稿の年齢); } printPost({name:'asd',age:666}) もちろん、関数にパラメータを渡すときに一部のパラメータはオプションになる可能性があるため、属性の後に「?」を追加して、インターフェイスのオプションのメンバーを定義することもできます。オプションのメンバーを指定します: インターフェース Post { 名前: 文字列; 年齢:番号; 性別?:文字列; } const オーロラ:Post = { 名前:'asd', 年齢: 18 } メンバーを読み取り専用で変更すると、初期化後にメンバー プロパティを変更できなくなります。 インターフェース Post { 名前: 文字列; 年齢:番号; 性別?:文字列; 読み取り専用 like:文字列 } const オーロラ:Post = { 名前:'asd', 年齢: 18歳 例えば: 'natrue' } オーロラの名前 = 'aaaa'; // 保証されたエラー auroras.like = 'wind'; メンバー属性名がわからない場合は、動的メンバーを宣言し、次のようにメンバー名の型とメンバー値の型を指定できます。 インターフェース Post { [prop:文字列]:文字列 } const オーロラ:Post = { 名前:'asd', 例えば: 'natrue' } 8. クラスの基本的な使い方特定のクラスの物事の抽象的な特性を説明します。 ts は まず、クラスの属性は使用前に宣言する必要があります。 クラス Person { 名前: 文字列; 年齢: 番号; コンストラクター(名前:文字列,年齢:数値){ this.name = 名前; this.age = 年齢; } sayHi(メッセージ:文字列):void { console.log(`こんにちは、${msg}、私は${this.name}です`); } } 9. クラスアクセス修飾子
外部アクセスも利用可能です: クラス Person { パブリック名: 文字列; プライベート年齢:番号; コンストラクター(名前:文字列,年齢:数値){ this.name = 名前; this.age = 年齢; } sayHi(メッセージ:文字列):void { console.log(`こんにちは、${msg}、私は${this.name}です`); コンソールにログ出力します。 } } 定数ジャック = 新しい Person('ジャック',20); //Person クラスのパブリック プロパティにアクセスできます console.log(jack.name); //Person クラスのプライベート プロパティにはアクセスできません console.log(jack.age); protected はそれを保護されたものとして変更し、外部からアクセスできなくなります。しかし、private との違いは、継承されたサブクラスがアクセスできることです。 クラス Person { パブリック名: 文字列; プライベート年齢:番号; // 保護されています 保護された性別: ブール値; コンストラクター(名前:文字列,年齢:数値){ this.name = 名前; this.age = 年齢; 性別をtrueに設定します。 } sayHi(メッセージ:文字列):void { console.log(`こんにちは、${msg}、私は${this.name}です`); コンソールにログ出力します。 } } クラスの子はPersonを拡張します{ コンストラクター(名前:文字列,年齢:数値){ super(名前,年齢,); //console.log(this.gender); にアクセスできます。 } } 10. クラスの読み取り専用プロパティプロパティに クラス Person { パブリック名: 文字列; プライベート年齢:番号; // 読み取り専用 保護された読み取り専用の性別: ブール値; コンストラクター(名前:文字列,年齢:数値){ this.name = 名前; this.age = 年齢; 性別をtrueに設定します。 } sayHi(メッセージ:文字列):void { console.log(`こんにちは、${msg}、私は${this.name}です`); コンソールにログ出力します。 } } 11. クラスとインターフェース一部のクラスには共通の機能があり、それをインターフェースに抽象化することができます。 たとえば、 //EatインターフェースインターフェースEat { 食べる(食べ物:文字列):void } //実行インターフェース interface Run { 実行(動作:文字列):void } //クラスPeopleはEat、Runを実装します{ 食べる(食べ物: 文字列){ console.log(`テーブルの上の${food}を食べます`); } 実行(動作:文字列){ console.log(`立っている ${behavior}`); } } //AnimalクラスAnimalはEat、Runを実装します{ 食べる(食べ物: 文字列){ console.log(`地面にある${food}を食べる`); } 実行(動作:文字列){ console.log(`${behavior} をクロールしています`); } } 12. 抽象クラスサブクラスが特定のメンバーを持つように制約することは、抽象クラスに特定の実装を含めることができる点を除いて、インターフェースと多少似ています。たとえば、動物クラスは抽象クラスである必要があり、そのサブクラスには猫、犬、パンダなどが含まれます。それらはすべて動物であり、いくつかの共通の特徴を持っています。クラスを抽象クラスとして定義すると、新しいインスタンスは作成できなくなり、サブクラスによってのみ継承できるようになります。 abstract は抽象クラスを定義し、abstract はクラス内の抽象メソッドを定義するために使用されます。サブクラスは抽象メソッドを実装する必要があります。 抽象クラス Animal { 食べる(食べ物: 文字列){ console.log(`地面にある${food}を食べる`); } 抽象実行 (動作:文字列):void } //CatクラスDogはAnimalを拡張します{ 実行(動作:文字列):void{ console.log(動作); } } 定数 d1 = 新しい Dog(); d1.eat('骨') d1.run('4本足で這う') //rabbitクラスrabbitはAnimalを拡張します{ 実行(動作:文字列):void{ console.log(動作); } } 定数 r1 = 新しい rabbit(); d1.eat('大根') d1.run('ジャンプ') 13. ジェネリックジェネリックとは、関数、インターフェース、またはクラスを定義するときに特定の型が指定されず、使用時に特定の型が指定されることを意味します。コードを最大限に再利用します。 たとえば、渡された任意の値を返す この関数は次のようになります。 関数のアイデンティティ(引数:数値):数値{ 戻り引数 } 文字列が渡された場合、関数は次のようになります。 関数のアイデンティティ(引数:文字列):文字列{ 戻り引数 } これは面倒すぎるので、一般的に大文字の T で表されるジェネリックを使用できます。ジェネリックは複数の型に適用でき、入力型と戻り型は同じです。 関数のアイデンティティ<T>(引数:T):T{ 戻り引数 } Typescriptの基本構文14個を紹介するこの記事はこれで終わりです。Typescriptの基本構文14個についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)
注意:この記事は現在取り組んでいる nestjs+graphql+serverless 合宿における...
Linuxシステムでは、dockerを新しくインストールし、次のようなコマンドを入力します。dock...
プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...
モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...
1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...
目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...
v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトに...
この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...
目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...
/****************** * カーネルデバッグ技術 ****************...
目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...
必要:バックグラウンド管理では、次のようなレイアウトでデータを表示する必要があることがよくあります。...
Web 標準について議論するときに必ず話題になるのは、構造とプレゼンテーションを分離することの重要性...
よく使われる4つのMySQLエンジンの紹介(1):MyISAMストレージエンジン:トランザクションや...
1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...