Typescriptの基本構文13個を共有する

Typescriptの基本構文13個を共有する

1. Tsとは何か

まず、強い型付けでは任意の暗黙的な型変換が許可されませんが、弱い型付けでは許可されます。 JavaScriptは古典的な弱い型付け言語です。 Typescript JavaScriptのスーパーセットとも言えます。JS をベースに多くの構文機能を追加しているため、型を勝手に変換することができなくなり、開発段階でのエラーを大幅に減らすことができます。

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% 確実であることをtypescript明示的に伝えることです。 typescript場合によっては、未定義または変更可能なシナリオの型を推測する必要があります。

特定の型であることをアサートするには、 as + type を使用します。

定数res = 1;
const num = res を数値として扱います。


<type> 形式を使用してアサートすることもできます (非推奨)。

定数res = 1;
const num = <数値>res


7. インターフェースの基本的な使い方

インターフェースは仕様、契約として理解できます。オブジェクトが持つべきメンバーと、それらのメンバーがどのようなものであるかを制限できます。

interfaceを介して Post インターフェースを定義します。このインターフェースはオブジェクトです。ルールとしては、文字列型のname属性と数値型の age 属性があります。

インターフェース Post {
    名前: 文字列;
    年齢:番号
}


たとえば、関数printPostがある場合、そのパラメータ post は定義した Post インターフェースのルールを使用します。この関数を呼び出すときは、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 はes6class関連の構文を強化します。

まず、クラスの属性は使用前に宣言する必要があります。

クラス Person {
    名前: 文字列;
    年齢: 番号;
    コンストラクター(名前:文字列,年齢:数値){
       this.name = 名前;
       this.age = 年齢;
    }
    sayHi(メッセージ:文字列):void {
        console.log(`こんにちは、${msg}、私は${this.name}です`);
    }
}


9. クラスアクセス修飾子

privateプライベート プロパティを変更し、クラス内でのみアクセスできます。 public は public 属性を変更します (デフォルト)。

外部アクセスも利用可能です:

クラス 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. クラスの読み取り専用プロパティ

プロパティにreadonly設定すると、そのプロパティは読み取り専用になり、初期化後にプロパティを変更できなくなります。

クラス Person {
  パブリック名: 文字列;
  プライベート年齢:番号;
  // 読み取り専用
  保護された読み取り専用の性別: ブール値;
    コンストラクター(名前:文字列,年齢:数値){
       this.name = 名前;
       this.age = 年齢;
       性別をtrueに設定します。
    }
    sayHi(メッセージ:文字列):void {
        console.log(`こんにちは、${msg}、私は${this.name}です`);
        コンソールにログ出力します。
    }
}


11. クラスとインターフェース

一部のクラスには共通の機能があり、それをインターフェースに抽象化することができます。

たとえば、 Personクラスと Animal クラスは異なるクラスですが、人間も動物も食べたり歩いたりするため、これらの共通の機能はインターフェースによって定義できます。最後の機能はインターフェースを定義します。

//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. ジェネリック

ジェネリックとは、関数、インターフェース、またはクラスを定義するときに特定の型が指定されず、使用時に特定の型が指定されることを意味します。コードを最大限に再利用します。

たとえば、渡された任意の値を返すidentity関数があり、渡される型は返される型と同じである必要があります。ジェネリックなしで数値を渡すと、

この関数は次のようになります。

 関数のアイデンティティ(引数:数値):数値{
     戻り引数
 }
文字列が渡された場合、関数は次のようになります。

 関数のアイデンティティ(引数:文字列):文字列{
     戻り引数
 }
これは面倒すぎるので、一般的に大文字の T で表されるジェネリックを使用できます。ジェネリックは複数の型に適用でき、入力型と戻り型は同じです。

 関数のアイデンティティ<T>(引数:T):T{
     戻り引数
 }
 

Typescriptの基本構文14個を紹介するこの記事はこれで終わりです。Typescriptの基本構文14個についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • TypeScript の基本型の紹介
  • TypeScript 列挙の基本と例
  • TypeScript 基本チュートリアル: トリプルスラッシュ命令
  • TypeScriptの基本型の詳細な説明

<<:  ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)

>>:  Docker管理に関する断片的な知識のまとめ

推薦する

Vue で Graphql インターフェースを実装する例

注意:この記事は現在取り組んでいる nestjs+graphql+serverless 合宿における...

docker コマンド例外「権限が拒否されました」の解決方法

Linuxシステムでは、dockerを新しくインストールし、次のようなコマンドを入力します。dock...

v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード

プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...

モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)

モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...

純粋なCSSで立体的な画像配置効果を実現するサンプルコード

1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...

Vueルータールーティングガードの詳細な説明

目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...

Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。

v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトに...

MySQL データベースの最適化: インデックスの実装原則と使用状況の分析

この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...

2列の水平タイムラインを実装するためのVueサンプルコード

目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...

Linux カーネル デバイス ドライバー カーネル デバッグ テクニカル ノート集

/****************** * カーネルデバッグ技術 ****************...

Reactにおける不変値の説明

目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...

レンダリング関数を使用して、拡張性の高いコンポーネントをカプセル化する

必要:バックグラウンド管理では、次のようなレイアウトでデータを表示する必要があることがよくあります。...

構造とプレゼンテーションの分離を理解するためのWeb標準の学習

Web 標準について議論するときに必ず話題になるのは、構造とプレゼンテーションを分離することの重要性...

MySQLでよく使われる4つのストレージエンジンについて簡単に説明します。

よく使われる4つのMySQLエンジンの紹介(1):MyISAMストレージエンジン:トランザクションや...

Dockerコンテナを作成、起動、停止する方法

1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...