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 を応援していただければ幸いです。