☰

TypeScript でインターフェース ファイル定義に基づいてオブジェクトを作成するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon typescript
TypeScript でインターフェース ファイル定義に基づいてオブジェクトを作成するにはどうすればよいでしょうか? 質問する

次のようなインターフェースを定義しました。

interface IModal {
    content: string;
    form: string;
    href: string;
    $form: JQuery;
    $message: JQuery;
    $modal: JQuery;
    $submits: JQuery;
 }

次のように変数を定義します。

var modal: IModal;

しかし、モーダルのプロパティを設定しようとすると、次のようなメッセージが表示されます。

"cannot set property content of undefined"

モーダル オブジェクトを記述するためにインターフェイスを使用しても問題ありませんか? また、使用できる場合はどのように作成すればよいですか?

ベストアンサー1

「modal」変数を他の場所で作成し、TypeScript にそれがすべて実行されることを伝えたい場合は、次のようにします。

declare const modal: IModal;

TypeScript で実際に IModal のインスタンスとなる変数を作成する場合は、それを完全に定義する必要があります。

const modal: IModal = {
    content: '',
    form: '',
    href: '',
    $form: null,
    $message: null,
    $modal: null,
    $submits: null
};

または、型アサーションを使用して嘘をつくこともできますが、予期しない場所で undefined になり、アクセス時などに実行時エラーが発生する可能性があるため、型の安全性が失われます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();

おすすめ記事