Typescript introduction(Ⅰ)

What is Typescript

Typescript - Javascript that scales

Why Typescript

Static type system

TypeScript can do static type checking at compile time. Types are erased before emitting compiled Javascript, result in zero run-time overhead to program execution.

Scalability

It's pretty useful for large-scale system and makes code refactoring easier and under control. E.g.

// You have no idea what parameter the greet funciton accpets without peaking into the function implementation  
function greet(person) {
  if (person.sex === 'male') {
    return `Mr ${person.first} ${person.second}`
  } else if (person.sex === 'female') {
    return `Mis ${person.first} ${person.second}`
  }
  return `${person.first} ${person.second}`
}

compared to the Typescript version

interface Person {
    sex?: string
    first: string
    second: string
}

function greet(person: Person): string {
    // ...
}

IDE support - symbol based navigation + statement completion

Starter

In Typescript, types can be associated with variables through explicit type annotations, such as

let x: number;

or through implicit type inference, as in

let x = 1;

Types and Values

Typescript is a superset of Javascript. What works in Javascript should also work in Typescript. The addon from Typescript, as its name indicates, is type . In Typescript, there are values and types . TypeScript erases all types information before emiting JavaScript while � values are preserved as in Javascript.

What results in types :

• A type alias declaration (type sn = number | string;)
• An interface declaration (interface I { x: number[]; })
• A class declaration (class C { })
• An enum declaration (enum E { A, B, C })
• An import declaration which refers to a type

What results in values :

• let, const, and var declarations
• A namespace or module declaration which contains a value
• An enum declaration
• A class declaration
• An import declaration which refers to a value
• A function declaration

Basic Types

• Boolean

let isChecked: boolean = false;

• Number

let num: number = 6;

• String

let color: string = "blue";

• Array

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3];  // This doesnt work in JSX as `<` and `>` are used in element tag

• Tuple

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

• Enum

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

Note that Enum produce both a value and a type .

// compiled code
var Color;
(function (Color) {
    Color[Color["Red"] = 1] = "Red";
    Color[Color["Green"] = 2] = "Green";
    Color[Color["Blue"] = 3] = "Blue";
})(Color || (Color = {}));
var c = Color.Green;

• Any - try to avoid

It's useful when migrate from Javascript to Typescript.

• Void

void is a little like the opposite of any : the absence of having any type at all. You may commonly see this as the return type of functions that do not return a value:

function warnUser(): void {
  console.log("This is my warning message");
}

• Object:

Note: object is not the same as Object .

object
Object

interface Object {
    /** The initial value of Object.prototype.constructor is the standard built-in Object constructor. */
    constructor: Function;

    /** Returns a string representation of an object. */
    toString(): string;

    /** Returns a date converted to a string using the current locale. */
    toLocaleString(): string;

    /** Returns the primitive value of the specified object. */
    valueOf(): Object;

    /**
      * Determines whether an object has a property with the specified name.
      * @param v A property name.
      */
    hasOwnProperty(v: PropertyKey): boolean;

    /**
      * Determines whether an object exists in another object's prototype chain.
      * @param v Another object whose prototype chain is to be checked.
      */
    isPrototypeOf(v: Object): boolean;

    /**
      * Determines whether a specified property is enumerable.
      * @param v A property name.
      */
    propertyIsEnumerable(v: PropertyKey): boolean;
}

Check the demo for difference:

function logWithBasicObject(obj: object) {
    console.log(obj.hasOwnProperty);
}

logWithBasicObject({a: 'b'}); // OK
logWithBasicObject('ab'); // Error: Argument of type '"ab"' is not assignable to parameter of type 'object'

function logWithInterfaceObject(obj: Object) {
    console.log(obj.hasOwnProperty);
}

logWithInterfaceObject({a: 'b'}); // OK
logWithInterfaceObject('ab'); // OK

Notice

• If you want to follow the latest news/articles for the series of my blogs, Please 「Watch」 to Subscribe.