オブジェクトのプロパティを反復処理する際の 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%表示されない解決策

推薦する

CSSアニメーションによるテーブルスクロールカルーセル効果の実装

前回の CSS 回転灯と同じ内容の CSS アニメーションの応用です。これは単なる別のアプリケーショ...

Webデザインにおけるフォームデザインテクニックのまとめ

「脳が多数の領域間の関係を処理できるように、入力は論理的なグループに分割する必要があります。」 – ...

Linux 型バージョン メモリ ディスク クエリ コマンド紹介

1. まず、Linux システムのバージョン内容について概要を説明します。 1. カーネルバージョン...

WebpackはCSSファイルを読み込み、その設定方法

webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...

レム適応の一般的なパッケージ3つについて

序文以前、rem適応についての記事を書きましたが、具体的なパッケージは紹介しませんでした。今日は、よ...

CSS で overflow-y: visible; が機能しない理由の分析と解決

シナリオ最近の要件は、モバイル デバイス用の h5 ページです。これには、選択可能なカードの行が必要...

Docker に MySQL をデプロイする例

目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...

tinyMCEの使い方と体験の詳細な説明

tinyMCE の使用方法の詳細な説明初期化TinyMCE を初期化するときは、ページの HEAD ...

Tomcatのデフォルトパスの設定によって発生するプロジェクトURLの競合を解決する方法の詳細な説明

序文Tomcat は優れた Java コンテナですが、避けられない小さな落とし穴もいくつかあります。...

MySQL における count(*)、count(1)、count(col) の違いのまとめ

序文count 関数は、テーブルまたは配列内のレコードをカウントするために使用されます。count(...

CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法

以下は、Flex レイアウトを使用した棒グラフです。 HTML: <div class=&qu...

MySQL の CPU 負荷が高い問題のトラブルシューティング

MySQL による CPU 負荷の上昇今日の午後、MySQL によってサーバーの負荷が高くなる問題を...

Bootstrap Webページレイアウトグリッドの実装

目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...

JSはストップウォッチタイマーを実装します

この記事の例では、ストップウォッチタイマーを実装するためのJSの具体的なコードを参考までに共有してい...

nginx アンチホットリンクおよびアンチクローラー設定の詳細な説明

新しい設定ファイルを作成します (たとえば、nginx インストール ディレクトリの下の conf ...