Converting the code from JavaScript to 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.

Do toy want to allow firstName and lastName to be undefined in classes? — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Nov 12, 2021 at 13:54
You Javascript code will not work: this.firstName will not work in a static function. — lukas.j
– lukas.j, Commented Nov 12, 2021 at 13:58
Copy your code into - typescriptlang.org/play And experiment — Inspiraller
– Inspiraller, Commented Nov 12, 2021 at 14:04

Totati · Accepted Answer · 2021-11-12 14:04:44Z

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.

lukas.j · Accepted Answer · 2021-11-12 14:16:43Z

1

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

edited Nov 12, 2021 at 14:16

answered Nov 12, 2021 at 14:05

lukas.j

7,2442 gold badges9 silver badges30 bronze badges

Collectives™ on Stack Overflow

Converting the code from JavaScript to TypeScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related