[解決済み] Typescript の nameof キーワード
質問
これまで見てきたように、ネイティブの
nameof
-キーワード
があるように、C# には
をTypeScriptに組み込んでいます。しかし、これがC#に存在するのと同じ理由で、型安全な方法でプロパティ名を参照できるようにしたい。
これは特にTypeScriptでjQueryのプラグインを使うときに便利です( Bootstrap-Tagsinput ) や、プロパティの名前を設定する必要がある他のライブラリを使用するときに、これは特に便利です。
のように見えるかもしれません。
const name: string = nameof(Console.log);
// 'name' is now equal to "log"
の代入は
name
の割り当てを変更する必要があります。
Console.log
がリファクタリングされ、名前が変更されたときにも変更されるはずです。
TypeScriptでこのような機能を使う場合、現状で最も近い方法は何でしょうか?
どのように解決するのですか?
既にご指摘の通り、バージョン2.8時点ではTypeScriptにビルトインされた機能はございません。しかし、同じ結果を得るための方法はあります。
オプション1: ライブラリを使用する
ts-nameof は、C#と全く同じ機能を提供するライブラリです。これを使えば、こんなことができます。
nameof(console); // => "console"
nameof(console.log); // => "log"
nameof<MyInterface>(); // => "MyInterface"
nameof<MyNamespace.MyInnerInterface>(); // => "MyInnerInterface"
ts-simple-nameof。 は代替手段を提供します。これは基本的に、プロパティ名を把握するために文字列化されたラムダを解析します。
nameof<Comment>(c => c.user); // => "user"
nameof<Comment>(c => c.user.posts); // => "user.posts"
オプション2: ヘルパー関数を定義する
自分で簡単に
nameof
を定義することができますが、文字列リテラルをタイプする必要があるため、自動的にリファクタリングされることはありません。
const nameof = <T>(name: keyof T) => name;
渡されたプロパティ名を返しますが、プロパティ名が型に存在しない場合はコンパイル時エラーが発生します。
T
. このように使用します。
interface Person {
firstName: string;
lastName: string;
}
const personName1 = nameof<Person>("firstName"); // => "firstName"
const personName2 = nameof<Person>("noName"); // => compile time error
TypeScript 2.9+でのヘルパー関数の更新について
タイプ
keyof T
は文字列に解決されるだけでなく
string | number | symbol
(
ref
). それでも文字列のみを解決したい場合は、代わりにこの実装を使用してください。
const nameof = <T>(name: Extract<keyof T, string>): string => name;
関連
-
[解決済み】Typescriptで、! (エクスクラメーションマーク/バン)演算子でメンバを再参照するのは?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] TypeScriptでパラメータとして強く型付けされた関数は可能か?
-
[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
-
[解決済み] TypeScriptの "*.d.ts "について
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み] Angular2のhttpデータからRxJS ObservablesをTypeScriptで連鎖させる。
-
[解決済み] types/packageでインストールしたTypeScriptの型定義が正しくない場合に上書きする方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] describe'という名前が見つかりません。テストランナー用の型定義をインストールする必要がありますか?
-
[解決済み] ユニオン型からインターセクション型への変換
-
[解決済み] Visual Studio Code - インポート引用符の設定を調整する
-
[解決済み] タイプスクリプト。カスタムタイプに対する typeof のチェック
-
[解決済み] Visual Studio コード自動インポート
-
[解決済み] Angular2 canActivate() 非同期関数呼び出し
-
[解決済み] types/packageでインストールしたTypeScriptの型定義が正しくない場合に上書きする方法
-
[解決済み] TypeScriptの"=>"の意味とは?(ファットアロー)
-
[解決済み] ESLint - TypeScriptの "no-unused-vars "を設定する。
-
[解決済み] TypeScriptでクラスを角括弧「<>」で囲むとはどういう意味ですか?