TypeScript

Install TypeScript globally:

npm install -g typescript

Compile index.ts into index.js:

tsc index.ts

TypeScript types

const str: string = 'Hello';

const num: number = 15;

let strNum: any = 'Hello';
strNum = 10;

const isVisible: boolean = false;

const strArray: string[] = ['a', 'b', 'c'];
// same as prev
const strArray2: Array<string> = ['a', 'b', 'c'];
const numArray: number[] = [1, 2, 3];
// same as prev
const numArray2: Array<number> = [1, 2, 3];

function sum(a: number, b: number): number {
  return a + b;
}

sum(5, 7);

function logInfo(name: string, age: number | string): void {
  if (typeof age === 'string') {
    parseInt(age, 10);
  }
  console.log(`Info: ${name} ${age}`);
}

logInfo('Jack', 35);
logInfo('Jack', '35');
JavaScript output
var str = 'Hello';
var num = 15;
var strNum = 'Hello';
strNum = 10;
var isVisible = false;
var strArray = ['a', 'b', 'c'];
var strArray2 = ['a', 'b', 'c'];
var numArray = [1, 2, 3];
var numArray2 = [1, 2, 3];
function sum(a, b) {
    return a + b;
}
sum(5, 7);
function logInfo(name, age) {
    if (typeof age === 'string') {
        parseInt(age, 10);
    }
    console.log('Info: ' + name + ' ' + age);
}
logInfo('Jack', 35);
logInfo('Jack', '35');

TypeScript class

class Website {
  static VERSION = '1.2';
  public url: string;
  protected servers: number;
  
  private status: string = 'online';
  
  constructor(url: string, servers: number) {
    this.url = url;
	this.servers = servers;
  }
  
  public on(): void {
    this.status = 'online';
  }
  
  public off(): void {
    this.status = 'offline';
  }
  
  protected getStatus(): string {
    return this.status;
  }
}

const myWebsite: Website = new Website('site.com', 3);
JavaScript output
var Website = /** @class */ (function () {
    function Website(url, servers) {
        this.status = 'online';
        this.url = url;
        this.servers = servers;
    }
    Website.prototype.on = function () {
        this.status = 'online';
    };
    Website.prototype.off = function () {
        this.status = 'offline';
    };
    Website.prototype.getStatus = function () {
        return this.status;
    };
    Website.VERSION = '1.2';
    return Website;
}());
var myWebsite = new Website('site.com', 3);

TypeScript interface

interface PersonInterface {
  name: string;
  age: number;
  greet: Function;
  // greet: () => void; // save as above
  job?: any;
}

const person: PersonInterface = {
  name: 'Jack',
  age: 30,
  greet() {
    console.log(`${this.name} ${this.age}`);
  }
}
JavaScript output
var person = {
    name: 'Jack',
    age: 30,
    greet: function () {
        console.log(this.name + ' ' + this.age);
    }
};

TypeScript class interface

interface Greet {
  sayHi: Function;
  //  sayHi: () => void; // same as above
}

class Person implements Greet {
  constructor(private name: string) {}

  sayHi() {
    console.log(`Hi ${this.name}`);
  }
}
JavaScript output
var Person = /** @class */ (function () {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.sayHi = function () {
        console.log('Hi ' + this.name);
    };
    return Person;
}());

TypeScript generic type

interface UserInterface {
  name: string;
  age: number;
}

const users: Array<UserInterface> = [
  {
    name: 'jack', age: 35
  },
  {
    name: 'lisa', age: 30
  }
];
// same as prev
const users2: UserInterface[] = [
  {
    name: 'jack', age: 35
  },
  {
    name: 'lisa', age: 30
  }
];
JavaScript output
var users = [
    {
        name: 'jack', age: 35
    },
    {
        name: 'lisa', age: 30
    }
];
var users2 = [
    {
        name: 'jack', age: 35
    },
    {
        name: 'lisa', age: 30
    }
];

Leave a Comment