Created by CyanHall.com on 11/12/2020 , Last updated: 04/30/2021.
πŸ‘‰Β Β github shields Star me if it’s helpful.
Play TypeScript Online

1. Compile to JavaScript

    tsc --outFile sample.js Test.ts
  

2. Basic

    let name: string = 'name';
let isDone: boolean = false;
let count: number = 10;
let sentence: string = `Hello, ${ name }.`
let notSure: any = 1;

let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

let tupleX: [string, number];
x = ['hello', 10]

enum Color {Red, Green, Blue};
let c: Color = Color.Green;

let [first, ...rest] = [1, 2, 3, 4];
// first: 1, rest: [2, 3, 4 ]

// type assert
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
  

3. Function

    const params = (value: string) => {
  console.log(value);
}

const paramOr = (value: string | null) => {
  console.log(value);
}
paramOr('1'); // OK
paramOr(null); // OK
paramOr(1); // Error

const paramArray = ([first, second]: [string, number]) => {
  console.log(first);
  console.log(second);
}

const returnValue = (): String =>  {
  return 'return a stirng';
}
  

4. Interface

    interface Config {
  color?: string;
  width?: number;
  readonly y?: number;
  [propName: string]: any;
}
const funcName = (config: Config) => {
  console.log(config.test);
}
funcName({test: 'test prop'}); // test prop
  

5. Class

    class Example {
  name: string; // default public
  private priaveName: string;
  protected protectedName: string;
  readonly readonlyName: string;
  private _fullName: string;
  static baseRoute = '/basePath';
  constructor(name: string) {
    this.name = name;
    this.priaveName = name;
    this.protectedName = name;
    this.readonlyName = name;
    this._fullName = name;
  }
  hello() {
    return `Hello, ${this.name}`;
  }
  get fullName(): string {
    return this._fullName;
  }
  set fullName(newName: string) {
    // do some check
    // ...
    this._fullName = newName;
  }
}
let test = new Example("world");
console.log(test.hello()); // Hello, world
test.priaveName; // Error

class NewExample extends Example {
  hi() {
    return `Hi, ${super.hello()}`;
  }
  getProtectedName() {
    return this.protectedName
  }
}

let newTest = new NewExample("new world");
console.log(newTest.hi()); // Hi, Hello, new world

newTest.protectedName; // Error
newTest.getProtectedName(); // OK


// Abstract Class
abstract class AbstractExample {
  abstract hi(): void;
  say(): void {
    console.log('say something');
  }
}
class ActualExample extends AbstractExample {
  hi() {
    return 'hi'
  }
}
  

6. Namespace

    namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}
Validation.StringValidator;
  

7. Generic

    class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
  

8. Declare

    # File ends with `.d.ts`
declare var testNumber: number;
declare function hi(greeting: string): void;
declare namespace myNamespace {
  function hello(s: string): string;
  let count: number;
}
  

1. Compile to JavaScript

    tsc --outFile sample.js Test.ts
  

3. Function

    const params = (value: string) => {
  console.log(value);
}

const paramOr = (value: string | null) => {
  console.log(value);
}
paramOr('1'); // OK
paramOr(null); // OK
paramOr(1); // Error

const paramArray = ([first, second]: [string, number]) => {
  console.log(first);
  console.log(second);
}

const returnValue = (): String =>  {
  return 'return a stirng';
}
  

5. Class

    class Example {
  name: string; // default public
  private priaveName: string;
  protected protectedName: string;
  readonly readonlyName: string;
  private _fullName: string;
  static baseRoute = '/basePath';
  constructor(name: string) {
    this.name = name;
    this.priaveName = name;
    this.protectedName = name;
    this.readonlyName = name;
    this._fullName = name;
  }
  hello() {
    return `Hello, ${this.name}`;
  }
  get fullName(): string {
    return this._fullName;
  }
  set fullName(newName: string) {
    // do some check
    // ...
    this._fullName = newName;
  }
}
let test = new Example("world");
console.log(test.hello()); // Hello, world
test.priaveName; // Error

class NewExample extends Example {
  hi() {
    return `Hi, ${super.hello()}`;
  }
  getProtectedName() {
    return this.protectedName
  }
}

let newTest = new NewExample("new world");
console.log(newTest.hi()); // Hi, Hello, new world

newTest.protectedName; // Error
newTest.getProtectedName(); // OK


// Abstract Class
abstract class AbstractExample {
  abstract hi(): void;
  say(): void {
    console.log('say something');
  }
}
class ActualExample extends AbstractExample {
  hi() {
    return 'hi'
  }
}
  

7. Generic

    class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
  

2. Basic

    let name: string = 'name';
let isDone: boolean = false;
let count: number = 10;
let sentence: string = `Hello, ${ name }.`
let notSure: any = 1;

let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

let tupleX: [string, number];
x = ['hello', 10]

enum Color {Red, Green, Blue};
let c: Color = Color.Green;

let [first, ...rest] = [1, 2, 3, 4];
// first: 1, rest: [2, 3, 4 ]

// type assert
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
  

4. Interface

    interface Config {
  color?: string;
  width?: number;
  readonly y?: number;
  [propName: string]: any;
}
const funcName = (config: Config) => {
  console.log(config.test);
}
funcName({test: 'test prop'}); // test prop
  

6. Namespace

    namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}
Validation.StringValidator;
  

8. Declare

    # File ends with `.d.ts`
declare var testNumber: number;
declare function hi(greeting: string): void;
declare namespace myNamespace {
  function hello(s: string): string;
  let count: number;
}
  


Maitained byΒ Cyanhall.com, Copy Rights @ CC BY-NC-SA 4.0 Β  Β  ExcelRoadMap