How to get started with TypeScript

TypeScript is one of a group of languages that use the JavaScript runtime as execution environment: .ts files containing TypeScript code are compiled into normal JavaScript, which can then be run by the browser.

Christmas offer: Save up to 49% on a subscription to Web Designer magazine

function sayOi() {
  alert("Oi!");
}
sayOi();

<html>
  <head>
  <script src="worker.js"></script>
  </head>
  <body></body>
</html>

PS C:\Users\tamha\Downloads> tsc .\worker.ts

function sayOi(whatToSay: number) {
  alert(whatToSay);
}
sayOi("Hello");

class Imagine {
  public myResult: number;
  public myA: number;
  public myB: number;
  constructor(_a: number, _b: number)
  {
  this.myResult = _a + _b;
  this.myA = _a;
  }
}

class Imagine {
  public myResult: number;
  //public myA: number;
  constructor(public myA: number, public  _b: number)
  {
  this.myResult = myA + _b;
  this.myA = myA;
  }
}

class Imagine {
  public myResult: number;
  . . .
  public saySomething(): void {
  alert(this.myResult);
  }
}
let myImagine: Imagine = new Imagine(2, 2);
myImagine.saySomething();

class Imagine {
  public myResult: number;
  constructor(public myA: number, public  myB: number)
  {
  this.myResult = myA + myB;
  }
  public saySomething(): void {
  alert(this.myA + “ “ + this.myB);
  }
}

class Future extends Imagine
{
  public saySomething(): void {
  console.log(this.myA);
  }
}

let myImagine: Imagine = new Future(2, 2);
myImagine.saySomething();
let myFuture: Future = new Future(9, 9);
myFuture.saySomething();

public _myCache: string;
  get fullCache(): string {
  return this._myCache;
  }
  set fullCache(newX: string) {
  if (newX == "hello") {
  this._myCache = newX;
  }
  else {
  console.log("Wrong data!");
  }
  }

abstract class Imagine {
  public myResult: number;
  abstract sayName(): void;
  constructor(public myA: number, public  myB: number) {
  this.myResult = myA + myB;
  }
  public saySomething(): void {
  alert(this.myA + " " + this.myB);
  }
}
class Future extends Imagine {
  . . .
  public sayName() {
  console.log("Hello");
  }
}

interface DataInterface {
  field: number;
  workerMethod(): void;
}

class Worker implements DataInterface {
  field: number;
  workerMethod(): void {
  throw new Error("Method not implemented.");
  }
  }

//Generic function
function identity(arg: number): number {
  return arg;
}
//Generic class
class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T; }

enum ParserState {
  Idle = 1,
  Read0,
  Read1
}
class Imagine {
  public myState: ParserState;
  constructor(public myA: number, public  myB: number)
  {
this.myState = ParserState.Idle;

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Tam Hanna is a software consultant who specialises in the management of carrier and device manufacturer relationships, mobile application distribution and development, design and prototyping of process computers and sensors. He was a regular contributor to Web Designer magazine in previous years, and now occupies his time as the owner of Tamoggemon Software and Computer Software.

How to get started with TypeScript

01. Install Visual Studio

02. Add the SDK

03. Download TypeScript, for real

04. Break out of the project

05. Create an entry point

06. Compile and run

07. Get typed

08. Try it out

09. Avoid the prototype

10. Appreciate the public

11. Method and instance

12. Use its magical features

13. Perform inheritance

14. Analyse the overwrite

15. Analyse the overwrite, redux

16. Restricted access

17. Make it abstract

18. Make an interface

19. Implement it

20. Use a generic class

21. A question of enumeration

22. Learn more

Related articles