Converting the code from JavaScript to TypeScript-CodePudding

I'm learning TypeScript and for the purposes of learning I try to rewrite the code written in JavaScript What will be the best way to use functions within several classes. I would like every class to have access to the function sayHello()

I'm trying to rewrite my JavaScript code into 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();

TypeScript

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();

I would like the sayHello () function to be available in every class.

Additionally, I am wondering whether to create an interface for firstName and lastName to make the code more readable

interface Person {
    firstName: string, 
    lastName: string
}

Could someone recommend me how to best translate this code to TypeScript.

CodePudding user response：

Your JavaScript code is not good either, static functions can't reach instance values.

You could write something like this in 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();

Stackblitz JavaScript example

This code could be written is TypeScript like this:

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();

Stackblitz TypeScript example

As you can see there's not much difference.

CodePudding user response：

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();