TypeScript 開発のための 6 つの実用的なヒント

TypeScript 開発のための 6 つの実用的なヒント

この記事では、TypeScript を使用してアプリケーションを開発した私の経験の一部をまとめます。その前に、TS コードをすぐに実行できる quokka.js という VSCODE プラグインをお勧めします。

使い方は、ctrl+shipt+p、キーワードquokkaを入力

Enterキーを押すと、入力後すぐにコードが実行されます。

1. 開発前にエンティティの種類を決定する

正式なコーディングの前に、インターフェース ドキュメントがない場合は、データ ディクショナリを取得し、データ ディクショナリに従ってプロジェクト内のエンティティ タイプを定義するのが最適です。たとえば、データ ディクショナリにユーザー テーブルとエンタープライズ テーブルがある場合は、types フォルダーを作成し、対応するタイプを別のファイルに配置できます。ディレクトリは次のとおりです。

種類
    ユーザー.ts
    株式会社
    ...

エンティティ タイプを定義するには、タイプよりもセマンティックなインターフェースを使用することをお勧めします。

インターフェース ユーザー{
    id:文字列
    名前:文字列
}

2. インターフェースをリクエストするときは、使用する必要があるフィールドのみを定義する必要があります。

型を定義するときは、使用する必要があるフィールドのみを定義する必要があります。使用されないフィールドは定義する必要はありません。バックエンドから返されるデータのタイプは、フロントエンドでタイプを指定して TS が判断する必要があるためです。フロントエンドでタイプを指定しないと、TS はそれを判断できません。

たとえば、バックエンドから返されるデータは次のようになります。

ユーザー:{
    id:1,
    名前:'xiaoming',
    性別:0
}

定義されているタイプは次のとおりです。

インターフェース ユーザー{
    id:番号、
    名前:文字列
}

この場合、TS はユーザーに ID と名前があるかどうかのみをチェックし、性別は無視します。

3. 列挙型を使用する

性別(男性、女性)、管理者種別(スーパー管理者、一般ユーザー)、会員種別(一般ユーザー、VIP、スーパーVIP)などのデータ構造は、列挙型を使用した定義に適しており、値としても使用できます。

例えば:

//列挙型を使用してメンバー型を定義します enum UserType{
    共通=0、
    VIP=1、
    スーパーVIP=2
}
クラスUser{
    id:文字列
    名前:文字列
    タイプ:ユーザータイプ
}
userList:User[]=[] とします

ユーザーリスト.push({
    id:'001',
    名前:「ジャック」
    type:UserType.SuperVIP //列挙型で定義された型を値として使用できます})

列挙型は、以下に示すように文字列にすることもできます。使用方法は上記と同じです。

列挙型ユーザータイプ{
    共通 = 'DiaoSi'、
    VIP='LowBVIP'、
    スーパーVIP='スーパーVIP'
}

4. DOM要素の型は通常通り指定する

DOM 要素の場合は、型があるため、何も使用しないでください。
一般的に、すべてのタグは HTMLElement から継承され、タグごとにタイプが異なります。このタイプは多くの場合、決まりきったものです。たとえば、ビデオ要素のタイプは HTMLVideoElement、div 要素のタイプは HTMLDivElement、キャンバス要素のタイプは HTMLCanvasElement などです。実際には、よく使用されるタイプはそれほど多くありませんが、簡単にリストします。

要素:HTMLElement=null とします

video:HTMLVideoElement=null とします

div:HTMLDivElement=null とします

キャンバス:HTMLCanvasElement = null とします

let e:Event =null //イベントオブジェクト e.target

コードヒントを取得できるように、DOM要素タイプを必ず指定してください。

ファイルをアップロードするときにタイプを指定する方法の補足です。onChange メソッドを Input 要素にバインドします。メソッドは次のとおりです。

onChange(イベント: イベント): void {
  if ((event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files.length) {
    const [ファイル] = event.target.files;
  }
}

5. オブジェクトの型の指定方法

オブジェクトをパラメータとして受け取る関数があります。型はどのように指定すればよいでしょうか?

まず第一に、何も与えないでください。常に何も与えないでください。これは低レベルです。オブジェクトにキーや値など何が含まれているかを考えてください。キーは文字列型である必要があります。値は特定のニーズによって異なります。値が数値または文字列のみである場合は、number|string を使用します。何でも許容される場合は、any を使用します。

//オブジェクトの型を定義します。キーは通常文字列で、値はインターフェース ObjType{ に渡すことができます。
	[キー:文字列]:任意
}
関数 deepCopy(obj:ObjType){
    for(let key in obj){
        console.log(obj[キー])
    }

}

obj={name:"Jack"}とします
ディープコピー(obj)

6. 構造体に値を割り当てるときに型を指定する方法

オブジェクトを受け取ってオブジェクト内のパラメータを分解する関数があります。構造体によって取得されたオブジェクト プロパティの型をどのように指定しますか? コードは次のとおりです。

定数ユーザー={
    名前:「ジャック」
    年齢:10歳
    友達:[{id:0,name:'ピーター',connect:100},{id:1,name:'アリス',connect:69}]
}

インターフェースフレンド{
    id:番号、
    名前: 文字列、
    接続:番号
}


function handleFriends({friends}){//友達のタイプを指定する方法 friends.map(item=>item.connect)
}

10秒間考えてください。

10

9

8

7

6

5

4

3

2

1

回答を投稿してください:

インターフェースフレンド{
    id:番号、
    名前: 文字列、
    接続:番号
}

関数handleFriends({friends}:{friends:Friend[]}){
    友達.map(item=>item.connect)
}

これは、React フックでより一般的に使用されます。

要約する

TypeScript 開発のヒントを共有するこの記事はこれで終わりです。TypeScript 開発に関するより関連性の高いヒントについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 知らないかもしれない実用的なTypeScriptのヒント
  • TypeScriptはリソースファイルを参照し、例外を処理するときに見つからないことを通知します。
  • 実用的な TypeScript ワンライナー 7 つを共有する

<<:  Ubuntu 18.0.4 MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

>>:  Linux オペレーティング システムに Apache サービスをインストールする方法

推薦する

MySQLの累積集計原理と使用例の分析

この記事では、例を使用して、MySQL 累積集計の原理と使用方法を説明します。ご参考までに、詳細は以...

HTMLタグと基本要素の学習のまとめ

1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって...

MySQLで時間を判定条件として使用する方法

背景: 開発プロセスでは、現在の月、現在の日、現在の時間、今後数日など、時間を判断条件としてデータを...

Vueはプルダウンとスクロールでデータを読み込む例を実装しています

目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...

Nodejs 探索: シングルスレッドの高並行性の原理を深く理解する

目次序文一目でわかる建築オペレーティングシステムとの対話シングルスレッドイベント駆動/イベントループ...

Vueライフサイクルカメラの8つのフック関数

目次1. beforeCreateとcreated関数2. beforeMountとmount関数3...

Docker 環境での Jmeter の分散操作に関する詳細なチュートリアル

1. jmeterの基本イメージを構築するDockerfile は次のとおりです。 # Java 8...

mysql5.7 のエンコーディングを utf8mb4 に設定する方法

最近、問題に遭遇しました。モバイル端末の絵文字や一部の絵文字は 4 バイトですが、UTF-8 は 3...

MySQL インデックスの原理と最適化の詳細な説明

序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...

Vue を使用した Amap アプリケーション開発のベスト プラクティス

目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...

HTML と CSS を書くための 6 つの最も効果的な方法

この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...

Vue3のレスポンシブ原則の詳細な説明

目次Vue2 レスポンシブ原則のレビューVue3 レスポンシブ原則の分析ネストされたオブジェクトの応...

CSS でレスポンシブ レイアウトを実装する方法

CSS でレスポンシブ レイアウトを実装するレスポンシブレイアウトは非常にハイエンドで難しいように思...

MySQL 実行ステータスの表示と分析

MySQL のパフォーマンスに問題があると思われる場合は、通常、まずshow processlist...

Docker Alibaba Cloud RocketMQ 4.5.1 のデプロイプロセスの詳細な説明

検索ミラー docker 検索 rocketmq画像バージョンを表示他の画像を表示したい場合は、画像...