Interfaz de cohete:
interface Rocket { name: string; setName(name: string): void; }Objeto de cohete: aplica la interfaz de cohete:
const rocket: Rocket = { name: 'some-rocket', setName: (name: string) => { rocket.name = name } }Ahora, si quiero actualizar el nombre del cohete, puedo hacerlo así:
rocket.setName('new-rocket-name')Pero como puede ver, el setName está codificado dentro del propio objeto. ¿Qué pasa si quiero ponerlo en un archivo separado? Por ejemplo:
// set-rocket.ts export const setRocket = (name: string) => { // how to update the name of the object, // which is not available in this scope? }Puedo cambiar la interfaz y requerir proporcionar el objeto cohete real como parámetro, pero no se ve tan bien:
interface Rocket { name: string; setName(rocket: Rocket, name: string): void; }Y luego establezca el nombre del cohete así:
rocket.setName(rocket, 'new-rocket-name')¿Hay una mejor manera de hacerlo?
Puede lograr esto cambiando la interfaz de Rocket a una clase:
class Rocket { constructor (public name: string) {} setName(name: string) { this.name = name; } } const rocket = new Rocket('some-rocket'); console.log(`current rocket name: ${rocket.name}`); rocket.setName('new-rocket-name'); console.log(`rocket name: ${rocket.name}`); Si desea que el uso de Rocket sea más genérico, es decir, desea crear diferentes tipos de Rockets sin depender demasiado de su implementación, podemos profundizar en OOP y utilizar una combinación de interfaz (API) y clase ( Implementación).
interface Rocket { readonly name: string; } interface ISetName { setName: (name: string) => void; } class DynamicRocket implements Rocket, ISetName { constructor(private _name: string) { } setName(name: string) { this._name = name; } get name() { return this._name }; } La ventaja de este segundo método es que puede tener diferentes implementaciones para la interfaz de Rocket , manteniendo la misma API para cambiar sus nombres. Entonces, en otra parte de su aplicación, puede tener:
const updateRocketName = (rocket: Rocket & ISetName, name: string) => { rocket.setName(name); return rocket.name; }