オプションの属性を使用してクラスをインスタンス化する正しい方法

Question

現在、JavaScriptモジュールをTypeScriptに移行しています。オプションの属性を持つオブジェクトを強く入力すると問題が発生します。

例は単純です：

私はモーダルを開くメソッドを持っています。メソッドには単一のパラメータがあり、これはモーダルのさまざまなオプションのマップであり、すべてオプションです。 JavaScriptで同様

：

openConfirmDialog({text : "are you sure ?"}); 
openConfirmDialog({title : "Confirmation required", confirmAction : noop}); 

のように。活字体への移行

は、私はすべてのこれらの異なるオプションを表すクラスを宣言：

class ConfirmDialogOptions { 

    text : string; 
    title : string; 

    confirmAction :() => any; 
    cancelAction :() => any; 

} 

しかし、我々は、プレーンJavaScriptでに使用されるように、このクラスをインスタンス化しようとしている：

let confirmOptions : ConfirmDialogOptions = { text : "are you sure ?" }; 

コンパイラの昇給エラー：

Initialized type not assignable to variable type ConfirmDialogOptions

そして、私は強制的にタイプの鋳鉄使用したG：

let a : ConfirmDialogOptions = {text: "lala"} as ConfirmDialogOptions; 

これは動作しますが、まあ、それは過熱のような一種のようで、全体的に私は活字体の多くまたはすべてのオプションのプロパティを持って入力されたオブジェクトをインスタンス化するための正しいアプローチであるものを思ってしまいます。

正しいアプローチは何ですか？

Answer 1

代わりのクラス​​とのインタフェースを宣言します。あなたが使用することを探しているもの

interface ConfirmDialogOptions { 

    text ?: string; 
    title ?: string; 

    confirmAction ?:() => any; 
    cancelAction ?:() => any; 

} 

Answer 2

あなたは浮動オブジェクトを解放するために適用することができ、写しinterface feature、次のとおりです。

interface ConfirmDialogOptions { 
    text?: string; 
    title?: string; 
    confirmAction?:() => any; 
    cancelAction?:() => any; 
} 

classは」doesnのあなたがしていると思うことをしないでください...実際にはES6 featureです。これは、バニラのJavaScript関数の周囲で砂糖として機能します。

// ES6 Class 
class Person { 
    constructor(name) { 
     this.name = name; 
    } 
} 

// Equivalent JS 
var Person = (function() { 
    function Person(name) { 
     this.name = name; 
    } 
    return Person; 
}()); 

あなたはclass活字体を定義しているので、あなたが{ text: 'hello' }のようなバニラJavaScriptのオブジェクトと等価で入力されていないnew ConfirmationDialogOptions(...)呼び出し、からインスタンスを一致させるためにConfirmDialogOptionsために意図している前提としています。

Answer 3

あなたは疑問符

class ConfirmDialogOptions {  
    text ?: string; 
    title ?: string; 
    // 
} 

またはクラス変数を宣言するより良い方法を持つパラメータがオプションすることによってこれを行うことができますが、コンストラクタで

class ConfirmDialogOptions {  
    constructor(private text?:string, private title?: string) { }\ 
    // 
} 

で他のソリューションを提供することですパラメータはデフォルト値

class ConfirmDialogOptions {  
    constructor(private text:string="Default text", private title: string="Default title") { } 
    // 
}