オブジェクトのプロパティを反復処理する際の TypeScript の問題

オブジェクトのプロパティを反復処理する際の TypeScript の問題

1. 問題

たとえば、次のコード:

タイプ 動物 = {
    名前: 文字列;
    年齢: 番号
}

定数動物:動物={
    名前:"犬",
    年齢:12
}

関数テスト(obj:Animal) {
    (let k in obj) {
        console.log(obj[k]) を実行します。 //ここでエラー}
}
テスト(動物)

エラー:

2. 解決策

1. オブジェクトをanyとして宣言する

関数テスト(obj:Animal) {
    (let k in obj) {
        console.log((obj as any)[k]) //エラーなし}
}


この方法はtypescript検証メカニズムを直接バイパスします

2. オブジェクトのインターフェースを宣言する

タイプ 動物 = {
    名前: 文字列;
    年齢: 番号;
    [キー: 文字列]: 任意
}

定数動物:動物={
    名前:"犬",
    年齢:12
}

関数テスト(obj:Animal) {
    (let k in obj) {
        console.log(obj [k]) //エラーなし}
}
テスト(動物)

これは、より一般的なオブジェクト タイプ、特に一部のツール メソッドに使用できます。

3. ジェネリックを使用する

関数テスト<T extends object>(obj:T) {
    (let k in obj) {
        console.log(obj [k]) //エラーなし}
}

4. keyofを使用する

関数テスト(obj:Animal) {
    k: (動物のキー)とします。
    (k in obj) {
        console.log(obj [k]) //エラーなし}
}

これで、TypeScript によるオブジェクト プロパティのトラバースに関するこの記事は終了です。TypeScript によるオブジェクト プロパティのトラバースの詳細については、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • TypeScript 列挙の基本と例
  • TypeScript の条件型に関する詳細な読書と実践記録
  • Typescript+React でモバイルと PC でシンプルなドラッグ アンド ドロップ効果を実現

<<:  ウェブページを作成する際に注意すべき点

>>:  テーブル設定の背景画像が100%表示されない解決策

推薦する

JS を使用した簡単な雪効果の例の詳細な説明

目次序文主な実装コードHTMLコードJSコード序文南の友達の多くは、雪をほとんど見たことがない、ある...

Vue の新しいおもちゃ VueUse の具体的な使い方

目次序文VueUseとは使いやすいおなじみの手ぶれ補正やスロットル機能もありますグローバル状態を共有...

MySQLでカーソルを宣言する方法

MySQL でカーソルを宣言する方法: 1. 変数とカーソルを宣言する 結果をvarchar(300...

TOM.COMのホームページリニューアルの経験

<br />何の警告もなく、cnBeta で TOM.COM の Web サイトが再設計...

HTML4とHTML5の違い: 入力にフォーカス実装コードを追加する方法

html4:コードをコピーコードは次のとおりです。 <フォーム> <p>&l...

Docker Compose を使用して Confluence を構築するチュートリアル

この記事は「Attribution 4.0 International (CC BY 4.0)」ライ...

高性能ウェブサイトの最適化ガイド

パフォーマンスの黄金律:エンドユーザーの応答時間のわずか 10% ~ 20% が HTML ドキュメ...

ユーザー エクスペリエンス デザイナーとは誰ですか?

怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...

MySQLはこのような更新文を決して書きません

目次序文原因現象なぜ?分析要約する序文今日は、非常に典型的な MySQL の「落とし穴」についてお話...

Node.js での SerialPort モジュールの使用

目次目的モジュールのインストール基本的な使い方ポートをスキャンする開いているポートデータの送信データ...

count(1)、count(*)、count(列名)の実行の違いの詳細な説明

実施効果: 1. count(1) と count(*)テーブル内のデータ量が多い場合、テーブルを分...

React の 10 個のフックの紹介

目次ReactHook とは何ですか? Reactは現在フックを提供している1. 使用状態2.use...

Linux プロセスの CPU 使用率が 700% に達し、終了できない場合の解決策

目次1. 問題の発見2. プロセスの詳細情報を表示する3. 解決策4. 大法を再開する1. 問題の発...

Dockerのyumソースの設定とCentOS7へのインストールの詳細な説明

ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...

Linux lnコマンドの使用

1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...