1. ホーム
  2. typescript

[解決済み] 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();