Type Script 101

개발 환경 셋업

$ npm install -g typescript
$ tsc path/to/source.ts --target ES5
$ tsc path/to/*.ts --watch --target ES5

문법

Reference: https://www.youtube.com/watch?v=-PR_XqW9JJU

var myName: string = "Foo";
var myAge: number = 10;
var canVote: boolean = false;
var anything: any = "Bar";
anything = 31;
console.log(anything);
console.log(typeof(anything));

var stringToNum: number = parseInt("5");
var numtoString: number = 5;
console.log(numtoString.toString());

const PI = 3.14159;

// interface --------------------

interface SuperHero {
    realName: String;
    superName: String;
}

var superman: SuperHero = {
    realName: "Clark Kent",
    superName: "Superman"
}
console.log(superman);

// array --------------------

var employees: string[] = ["Bob", "Sally", "Sam"];
// compile error
// employees.push(5);
employees.push("Zoro");
console.log(employees);

var superheros: SuperHero[] = [];
superheros.push(superman, {
    realName: "Bruce Wayne",
    superName: "Batman"
});
console.log(superheros);
console.log(5 + 2); // 7
console.log(5 + "2"); // 52

// scope --------------------

let sampLet = 123;
if (true) {
    let sampLet = 456;
}
console.log(sampLet); // 123
if (true) {
    sampLet = 456;
}
console.log(sampLet); // 456

// loop --------------------

var randArray = [5, 6, 7, 8];
for (var val in randArray) {
    console.log(val); // 0 1 2 3
}

var strArray = randArray.map(String);
for (var val of strArray) {
     console.log(val); // 5 6 7 8
}

// function --------------------

var getSum = function (num1: number, num2: number): number {
    return num1 + num2;
}
console.log(getSum(100, 200)); // 300

var getDiff = function (num1: number, num2 = 2, num3?: number): number {
    return (num3 != null)
        ? num1 - num2 - num3
        : num1 - num2;
}
console.log(getDiff(100));

var sumAll = function (...nums: number[]): void {
    var sum = nums.reduce((a, b) => a + b, 0);
    console.log(sum);
}
sumAll(1, 2, 3, 4, 5);

var addOne = (x) => x + 1;
console.log(addOne(1));

// class --------------------

class Animal {
    public favFood: string;
    static numOfAnimals: number = 0;

    constructor(protected name: string, protected owner: string) {
        Animal.numOfAnimals++;
    }

    printOwnerInfo(): void {
        console.log(`${this.name} is owned by ${this.owner}`);
        return;
    }
    static howManyAnimals(): number {
        return Animal.numOfAnimals;
    }

    private _weight: number;
    get weight(): number {
        return this._weight;
    }
    set weight(weight: number) {
        this._weight = weight;
    }
}

var spot = new Animal("Spot", "Doug");
spot.weight = 100;
console.log(`Spot's weight is ${spot.weight}`);
console.log(`There are ${Animal.howManyAnimals()} animals`);
console.log(spot.printOwnerInfo());
console.log(spot);

class Dog extends Animal {
    constructor(name: string, owner: string, private type = "House Dog") {
        super(name, owner);
    }

    printOwnerInfo(): void {
        console.log(`${this.name} is ${this.type} and owned by ${this.owner}`);
    }
}

var grover = new Dog("Grover", "Jimmy", "Flying Dog");
console.log(grover.printOwnerInfo());
console.log(`There are ${Animal.howManyAnimals()} animals`);
console.log(`Is a dog animal: ${grover instanceof Animal}`);
console.log(`Does grover has a name: ${("name" in grover)}`);

// interface 2 --------------------

interface Vehicle {
    drive(): any;
}

class Car implements Vehicle {
    constructor(private wheel: number) {}
    drive(): void {
        console.log(`The car drives with ${this.wheel} wheels`);
    }
}

class Bicycle implements Vehicle {
    constructor(private wheel: number) {}
    drive(): void {
        console.log(`The car drives with ${this.wheel} wheels`);
    }
}

var car = new Car(4);
var bike = new Bicycle(2);
car.drive();
bike.drive();

// generic --------------------

function GetType<T>(val: T): string {
    return typeof(val);
}
var aStr = "A String";
var aNum = 1;
console.log(GetType(aStr));
console.log(GetType(aNum));

function GetWheels<W extends Vehicle>(vehicle: W): number {
    return vehicle.drive();
}
GetWheels(car);
GetWheels(bike);

class GenericNumber<T> {
    // 함수 몸체가 없음에 유의
    add: (val1: T, val2: T) => T;
}

var aNumber = new GenericNumber<number>();
aNumber.add = function (x, y) {
    return x + y;
}
console.log(aNumber.add(5, 4));

var aString = new GenericNumber<string>();
aString.add = function (x, y) {
    return x + y;
}
console.log(aString.add("Foo", "Bar"));

// destructuring --------------------

var randVals = { x: 1, y: 2, z: 3};
var {x, y, z} = randVals;
console.log(x + y + z);
console.log([x, y, z] = [z, y, x]);

// ... --------------------

function theSum(x, y, z): void {
    console.log(x + y + z);
}
var args = [4, 5, 6];
// Compile error, Why?
// theSum(...args); // spread operator

// enum --------------------

enum Emotion {
    Happy = 1,
    Sad,
    Angry
}

console.log(Emotion.Happy);

appkr/typescript.md

개발 환경 셋업

문법