この記事では、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 サービスをインストールする方法
この記事では、例を使用して、MySQL 累積集計の原理と使用方法を説明します。ご参考までに、詳細は以...
1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって...
背景: 開発プロセスでは、現在の月、現在の日、現在の時間、今後数日など、時間を判断条件としてデータを...
目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...
目次序文一目でわかる建築オペレーティングシステムとの対話シングルスレッドイベント駆動/イベントループ...
目次1. beforeCreateとcreated関数2. beforeMountとmount関数3...
1. jmeterの基本イメージを構築するDockerfile は次のとおりです。 # Java 8...
最近、問題に遭遇しました。モバイル端末の絵文字や一部の絵文字は 4 バイトですが、UTF-8 は 3...
序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...
目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...
この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...
目次Vue2 レスポンシブ原則のレビューVue3 レスポンシブ原則の分析ネストされたオブジェクトの応...
CSS でレスポンシブ レイアウトを実装するレスポンシブレイアウトは非常にハイエンドで難しいように思...
MySQL のパフォーマンスに問題があると思われる場合は、通常、まずshow processlist...
検索ミラー docker 検索 rocketmq画像バージョンを表示他の画像を表示したい場合は、画像...