この記事では、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=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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu 18.0.4 MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル
>>: Linux オペレーティング システムに Apache サービスをインストールする方法
[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...
公式サイトからmysql-5.6.37-winx64.zipの解凍バージョンをダウンロードし、構成フ...
編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...
マウスの位置をマッピングしたり、ドラッグ効果を実装したりすることは、 JavaScriptで行うこと...
1. Python 3をインストールする1. 依存パッケージをインストールしますyum instal...
jvm.options ファイルを elasticsearch 構成に追加し、スタック サイズを変更...
必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...
コンテナを作成する [root@server1 ~]# docker run -it --name ...
前回述べた問題を解決するために、オンラインで検索したところ、非常に優れたビジュアル インターフェース...
時刻、文字列、タイムスタンプ間の変換は、日常生活でよく使用されます。よく使用されますが、私は使用する...
問題の起源私がタイトルの番号付けの問題に初めて注目したのは、学部の論文を書いていた頃まで遡ります。当...
オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...
目次1 データベース インデックスを作成するための一般的なルールは次のとおりです。 2. 数千万件の...
目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...
Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...