将代码从 JavaScript 转换为 TypeScript

Question

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.

Answer 1

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.

Answer 2

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