[解決済み] TypeScriptでインターフェースファイルの定義に基づいたオブジェクトを作成するには?
2022-03-22 08:35:55
質問
このようなインターフェイスを定義しました。
interface IModal {
content: string;
form: string;
href: string;
$form: JQuery;
$message: JQuery;
$modal: JQuery;
$submits: JQuery;
}
こんな感じで変数を定義しています。
var modal: IModal;
しかし、modalのプロパティを設定しようとすると、次のようなメッセージが表示されます。
"cannot set property content of undefined"
モーダル オブジェクトを記述するためにインターフェイスを使用してもよいですか?また、その場合はどのように作成すればよいですか?
どのように解決するのですか?
もし、"modal" という変数を別の場所で作っていて、それをTypeScriptに伝えればすべて完了するのであれば、次のように使うことになるでしょう。
declare const modal: IModal;
TypeScriptで実際にIModalのインスタンスとなる変数を作成したい場合は、完全に定義する必要がある。
const modal: IModal = {
content: '',
form: '',
href: '',
$form: null,
$message: null,
$modal: null,
$submits: null
};
あるいは、タイプアサーションで嘘をつくこともできますが、型安全性が失われ、予期しない場所で未定義が発生し、場合によっては実行時エラーが発生します。
modal.content
などがあります(コントラクトでは存在するとされているプロパティ)。
const modal = {} as IModal;
クラス例
class Modal implements IModal {
content: string;
form: string;
href: string;
$form: JQuery;
$message: JQuery;
$modal: JQuery;
$submits: JQuery;
}
const modal = new Modal();
と思うかもしれませんが、その通りです。もし、Modal クラスが IModal インターフェースの唯一の実装であるなら、 インターフェースを完全に削除して、... を使いたいかもしれません。
const modal: Modal = new Modal();
よりも
const modal: IModal = new Modal();
関連
-
[解決済み] TypeScriptで、「extends keyof」と「in keyof」はどういう意味ですか?
-
[解決済み] TypeScriptのInterface Function Property。何が違うの?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
-
[解決済み] JSONオブジェクトをTypeScriptのクラスにキャストする方法を教えてください。
-
[解決済み] Typescript オブジェクトのインデックス付きメンバの型を強制する?
-
[解決済み] TypeScriptのオブジェクトリテラルでの型定義
-
[解決済み] Typescript によるインターフェース型チェック
-
[解決済み】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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] TypeScriptエラー TS1005: ';' が予想される (II)
-
[解決済み] Typescript コンパイルエラー: error TS1109: 期待される式
-
[解決済み] TSLintの "文字列リテラルによるオブジェクトアクセス "を回避するためのコードの書き換え方法
-
[解決済み] TypeScriptで、「extends keyof」と「in keyof」はどういう意味ですか?
-
[解決済み] TypeScriptでfetchを使う方法
-
[解決済み] クラスのプロパティが整数であることはどのように指定するのですか?
-
[解決済み] オプションのパラメータを省略しながら、他のオプションのパラメータを渡すには?
-
[解決済み】TypeScriptのコンパイルでExperimental decoratorsの警告が出る。
-
[解決済み】TypeScriptとフィールドイニシャライザー
-
[解決済み】タイプからプロパティを除外する