Comment initialiser un objet en TypeScript

Question

J'ai une classe modèle simple

export interface Category {

  name: string;
  description: string;

}

Je dois déclarer et initialiser une variable dans un composant angulaire. J'ai essayé :

category: Category = {};

Erreur : {} n'est pas assignable à une catégorie

category: Category = new Category();

erreur : La catégorie fait référence à un type, mais elle est référencée comme valeur

Des suggestions ?

Answer 1

Il existe plusieurs façons de résoudre ce problème, en fonction du résultat que vous souhaitez obtenir.

Méthode 1 : convertissez votre interface à un class

export class Category {
  name: string;
  description: string;
}
const category: Category = new Category();

Méthode 2 : Etendez votre interface en tant que class

export class CategoryObject implements Category {
}
const category: Category = new CategoryObject();

Méthode 3 : Spécifiez complètement votre objet, en faisant correspondre les éléments suivants interface

const category: Category = {
  name: 'My Category',
  description: 'My Description',
};

Méthode 4 : Rendre les propriétés facultatives

export interface Category {
  name?: string;
  description?: string;
}

const category: Category = {};

Méthode 5 : Changez le type de votre variable pour utiliser Partial<T>

export interface Category {
  name: string;
  description: string;
}

const category: Partial<Category> = {};

Answer 2

Si vous ne voulez pas changer votre définition de interface a class vous pouvez aussi le faire :

let category = <Category>{ };

Sinon, vous pourriez suivre d'autres réponses et changer votre Category pour être une classe.

modifier : selon le commentaire de ruffin ci-dessous, si l'interface est

export interface ITiered { one: { two: { three: function (x) {...} } } } 

et vous essayez let x = {} as ITiered alors vous aurez une erreur lorsque vous appellerez quelque chose comme x.one.two.three()

Answer 3

Dans Typescript, si vous voulez utiliser l'initialisateur d'objet, vous devez définir toutes les propriétés dans la classe.

let category: Category = {
    name: '',
    description: ''
};

De cette façon, votre modèle peut encore rester une interface.

Answer 4

Votre objet littéral doit correspondre à l'interface. Puisque votre interface a deux propriétés obligatoires ( name y description ), ils doivent tous deux être déclarés lors de l'instanciation de l'objet.

const category: Category = {
    name: 'foo',
    description: 'bar'
};

Si vous ne pouvez pas construire l'objet entier en premier lieu, vous pouvez utiliser la fonction intégrée Partial pour construire l'objet.

const builder: Partial<Category> = {};
builder.name = 'foo';
builder.description = 'bar';

const category: Category = builder as Category;

Answer 5

Comme une classe C# :

export class Category {
    category: number = null;
    description: string = null;
    name: string = null;

  public constructor(init?: Partial<Category>) {
        Object.assign(this, init);
}
}

Maintenant, lorsque vous créez une nouvelle instance, tous les noms de champs sont disponibles et vides.

 const instance_of_category: Category = new Category();

maintenant vous avez un objet de classe emty avec tous les champs définis comme en c# :

instance_of_category{
    "category": null,
    "description": null,
    "name": null
}