Agregar métodos a interfaces
Parte de la sección Introducción a TypeScript del Journey de JavaScript de Coddy. Lección 43 de 73.
Las interfaces de TypeScript te permiten definir estos comportamientos al incluir firmas de métodos junto con las definiciones de propiedades.
Una firma de método en una interfaz especifica el nombre de un método, sus parámetros y su tipo de retorno, sin proporcionar la implementación real. Esto crea un contrato que cualquier objeto que cumpla con la interfaz debe satisfacer:
interface Person {
name: string;
age: number;
greet(): string; // Firma del método
}
let user: Person = {
name: "Alice",
age: 30,
greet() {
return `Hello, I'm ${this.name}`;
}
};La firma del método greet(): string indica a TypeScript que cualquier objeto que implemente la interfaz Person debe tener un método greet que no acepte parámetros y devuelva un string. La implementación real puede variar entre diferentes objetos, pero la firma debe coincidir exactamente.
Desafío
FácilCrea una interfaz llamada Calculator con las siguientes propiedades y métodos:
brandde tipostringmodelde tipostringisScientificde tipoboolean- método
addque recibe dos parámetrosnumbery devuelve unnumber - método
getInfoque no recibe parámetros y devuelve unstring
Crea una interfaz llamada BankAccount con las siguientes propiedades y métodos:
accountNumberde tipostringbalancede tiponumberisActivede tipoboolean- método
depositque recibe un parámetronumbery devuelvevoid - método
getBalanceque no recibe parámetros y devuelve unnumber
Usando tus interfaces, crea las siguientes variables:
- Crea una variable llamada
myCalculatorde tipoCalculatorcon brand"Casio", model"FX-991EX", isScientifictrue, un métodoaddque devuelva la suma de sus dos parámetros y un métodogetInfoque devuelva"[brand] [model]" - Crea una variable llamada
savingsAccountde tipoBankAccountcon accountNumber"SAV-12345", balance1500, isActivetrue, un métododepositque sume el parámetro al balance y un métodogetBalanceque devuelva el balance actual
Imprime los siguientes resultados en líneas separadas:
- Llama al método
getInfoenmyCalculatore imprime el resultado - Llama al método
addenmyCalculatorcon los argumentos15y27, e imprime el resultado - Llama al método
getBalanceensavingsAccounte imprime el resultado - Llama al método
depositensavingsAccountcon el argumento250 - Llama de nuevo al método
getBalanceensavingsAccounte imprime el resultado - Imprime la propiedad
isScientificdemyCalculator
Pruébalo tú mismo
// TODO: Escribe tu código aquí
// Crea la interfaz Calculator con las propiedades y métodos requeridos
// Crea la interfaz BankAccount con las propiedades y métodos requeridos
// Crea la variable myCalculator de tipo Calculator
// Crea la variable savingsAccount de tipo BankAccount
// Imprime todas las salidas requeridasEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Introducción a TypeScript
1Primeros pasos con TS
¿Qué es TypeScript?¿Por qué usar TypeScript?Tu primer código en TypeScriptProceso de compilación y erroresResumen: Introducción a TS4Trabajando con funciones
Tipado de parámetros y valores de retornoTipado de funciones de flechaEl tipo de retorno 'void'Parámetros opcionales con '?'Valores de parámetros por defectoTipado de parámetros restDefinición de tipos de funcionesRepaso: Construcción de funciones tipadas2Tipos principales
Tipos básicos: str, num, booleanEl tipo 'any': Vía de escapeEl tipo 'unknown'Trabajando con 'null' y 'undef'Inferencia de tipos en acciónAnotaciones de tipo explícitasResumen: Práctica de tipos principales5Tipos: Alias, Uniones e Intersecciones
Alias de tipos para primitivosTipos de unión ('|')Trabajando con tipos de uniónTipos literalesTipos de intersección ('&')Combinando alias de tiposRepaso: Combinaciones de tipos avanzadas3Estructura de datos: Arrays y Tuplas
Arrays tipadosModificador 'readonly' para Arrays¿Qué es una Tupla?Declaración y acceso a TuplasDesestructuración de TuplasTuplas ReadonlyArrays tipados multidimensionalesOperador Spread con ArraysResumen: Arrays y Tuplas6Tipado de Objetos e Interfaces
Anotaciones de tipo de objeto en líneaAlias de tipo para objetosIntroducción a las interfacesInterfaces vs. Alias de tipoPropiedades opcionales y ReadonlyExtensión de interfaces y tiposAgregar métodos a interfacesRepaso: Definición de estructuras de objetosPractica por tu cuenta: Compilador de JavaScript online