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 サービスをインストールする方法

推薦する

LeetCode の SQL 実装 (184. 部門内で最も高い給与)

[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...

MySQL 起動エラー 1067 および文字セットを変更して再起動した後の無効な回復

公式サイトからmysql-5.6.37-winx64.zipの解凍バージョンをダウンロードし、構成フ...

デザインにおけるユーザーエクスペリエンスの背後にある8つのユーザー本能について話す

編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...

CSS でマウスの位置をマッピングし、マウスを動かしてページ要素を制御する (サンプル コード)

マウスの位置をマッピングしたり、ドラッグ効果を実装したりすることは、 JavaScriptで行うこと...

Centos7 での python3 のインストールとアンインストールに関するチュートリアル

1. Python 3をインストールする1. 依存パッケージをインストールしますyum instal...

Docker 起動時の ES メモリ オーバーフローの解決方法

jvm.options ファイルを elasticsearch 構成に追加し、スタック サイズを変更...

CSSは高さを設定せずにdivを完全に中央に配置することを実現します

必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...

nginxコンテナ設定ファイルの独立した実装

コンテナを作成する [root@server1 ~]# docker run -it --name ...

Docker で Portainer ビジュアル インターフェースを構築するための詳細な手順

前回述べた問題を解決するために、オンラインで検索したところ、非常に優れたビジュアル インターフェース...

MySQLの日付文字列タイムスタンプ変換の詳細な説明

時刻、文字列、タイムスタンプ間の変換は、日常生活でよく使用されます。よく使用されますが、私は使用する...

純粋な CSS でマークダウンの自動番号付けを実装するサンプル コード

問題の起源私がタイトルの番号付けの問題に初めて注目したのは、学部の論文を書いていた頃まで遡ります。当...

Linux システムの busybox に mkfs.vfat コマンドを移植する

オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...

MySQLのどのフィールドがインデックスに適しているかについての簡単な説明

目次1 データベース インデックスを作成するための一般的なルールは次のとおりです。 2. 数千万件の...

JavaScript でのプロキシの使用を理解するための記事

目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...

Docker5フル機能の港湾倉庫構築プロセス

Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...