Estoy aprendiendo TypeScript y con el fin de aprender trato de reescribir el código escrito en JavaScript. ¿Cuál será la mejor manera de usar funciones dentro de varias clases? Me gustaría que todas las clases tuvieran acceso a la función sayHello()
Estoy tratando de reescribir mi código JavaScript en TypeScript
JavaScript:
class Guest { firstName; lastName; constructor() { } static sayHello() { console.log(`Hi, my name is ${this.firstName}${this.lastName}`); } } class Employee { firstName; lastName; permissionLevel; static sayHello() { console.log(`Hi, my name is ${ this.firstName }${ this.lastName }`); } } class Director { firstName; lastName; constructor() { } static sayHello() { console.log(`Hi, my name is ${this.firstName}${this.lastName}`); } } let clerk = new Employee(); var director = new Director("John", "Smith"); Director.sayHello();Mecanografiado
function sayHello(firstName: string, lastName: string): void { console.log(`Hi, my name is ${firstName}${lastName}`) } class Guest { firstName: string; lastName: string; constructor() { } } class Employee { firstName: string; lastName: string; permissionLevel: string; } class Director { firstName; lastName; constructor() { } } const clerk = new Employee(); const director = new Director("John", "Smith"); Director.sayHello();Me gustaría que la función sayHello () esté disponible en todas las clases.
Además, me pregunto si debo crear una interfaz para firstName y lastName para que el código sea más legible.
interface Person { firstName: string, lastName: string }¿Podría alguien recomendarme cómo traducir mejor este código a TypeScript?
Su código JavaScript tampoco es bueno, las funciones estáticas no pueden alcanzar valores de instancia.
Podrías escribir algo como esto en JavaScript
class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } sayHello() { console.log(`Hi, my name is ${this.firstName ?? '-'} ${this.lastName ?? '-'} `); } } class Guest extends Person {} class Employee extends Person { permissionLevel; } class Director extends Person {} const clerk = new Employee(); clerk.sayHello(); const director = new Director('John', 'Smith'); director.sayHello();Ejemplo de javascript de stackblitz
Este código podría escribirse en TypeScript así:
class Person { // Add types here constructor(public firstName?: string, public lastName?: string) { } sayHello() { console.log(`Hi, my name is ${this.firstName ?? '-'} ${this.lastName ?? '-'} `); } } class Guest extends Person {} class Employee extends Person { // Add types here permissionLevel?: number; } class Director extends Person {} const clerk = new Employee(); clerk.sayHello(); const director = new Director('John', 'Smith'); director.sayHello();Ejemplo de Stackblitz TypeScript
Como puedes ver no hay mucha diferencia.
abstract class Person { firstName: string lastName: string constructor(firstName: string, lastName: string) { this.firstName = firstName this.lastName = lastName } sayHello(): void { console.log(`Hi, my name is ${ this.firstName } ${ this.lastName }`) } } class Employee extends Person { permissionLevel: string constructor(firstName: string, lastName: string, permissionLevel: string) { super(firstName, lastName) this.permissionLevel = permissionLevel } } class Director extends Person {} var director = new Director("John", "Smith"); director.sayHello(); let clerk = new Employee("Al", "Clergy", "Clerk"); clerk.sayHello();