01.Typescript - nkiateam/angular-tutorial GitHub Wiki

var number = "문자열";
var str = number - 10; // 오류가 발생되지 않음.
typeof str?  문자일까요 숫자일까요......

'' == false	// true
undefined == null // true
false == null // false

var one = 1;
var oneString = "1";
if(one == oneString){
    alert("서로 같다.");
}

function Car(){ /* code.... */ }
function Truck = function(){
	// consructor chain
	Car.apply(this, arguments);
	/* Some code ... */
}
Truck.prototype = new Car();
var porter = new Truck();

// 변수정의
const name: string = 'NKIA';

// 함수정의
function echo(param: string): string {
  return param;
}

// Return Type : void
function warnUser(): void {
    alert("This is my warning message");
}

// 타입과 변수에 할당값이 맞지 않는 경우의 에러 예시. => 컴파일시 아래와 같은 오류 발생가 보여지며, 컴파일되지 않는다.
error TS2322: Type 'string' is not assignable to type 'number'

interface Shape {
  getArea(): number;
}

class Rect implements Shape {
  width : number;
  height: number;
  constructor(width, height) {
    this.width  = width;
    this.height = height;
  }
  // Method 구현부, 구현부가 없으면 에러가 발생한다.
  // error: Class 'Rect' incorrectly implements interface 'Shape'. Property 'getArea' is missing in type 'Rect'.
  getArea(){
    return 1;
  }
}

// interface 간 상속 지원. 다중상속도 가능하다.
interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

var square: Square;
square.color = "blue";
square.sideLength = 10;

// optional 표현 ? 사용. class에서 구현하거나 사용하지 않아도 된다.
interface SquareConfig {
  color?: string;
  width?: number;
}

// Javascript 코드
class Duck {
  quack() {
    console.log('꽥!');
  }
}
class Person {
  /* 구현이 안되어 있는 경우..
  quack() {
    console.log('나도 꽥!');
  }
  */
}
function makeSomeNoiseWith(duck) {
  duck.quack();
}
makeSomeNoiseWith(new Duck()); // OK
makeSomeNoiseWith(new Person()); // OK

-- error: quack() is not a function. 에러가 Runtime시에 발생하는 불상사....

// TypeScript 코드
interface Quackable {
  quack(): void;
}
class Duck implements Quackable {
  quack() {
    console.log('꽥!');
  }
}
class Person {
  /*
  quack() {
    console.log('나도 꽥!');
  }
  */
}
function makeSomeNoiseWith(duck: Quackable): void {
  duck.quack();
}
makeSomeNoiseWith(new Duck()); // OK
makeSomeNoiseWith(new Person()); // OK

-- Quackable의 Person 객체에 quack()를 구현하지 않아 컴파일시에 에러가 발생한다.

// 기본문법
class Cat {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age  = age;
  }
  gatName(){
      return this.name;
  }
}

// 컴파일된 Javascript 코드
var Cat = (function(){
    function Cat(name, age){
        this.name = name;
        this.age = age;
    }
    Cat.prototype.getName = function(){
        return this.name;
    };
    return Cat;
})();


// 접근 제한자
class Cat {
  private name: string;
  private age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age  = age;
  },
  getName(): string {
    return this.name;
  }
}

// 미리 받을 변수를 지정하는 generic
var list:Array<number> = [1, 2, 3];

function identity<T>(arg: T): T {
    return arg;
}

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]

// jquey datepicker 사용 예시.
interface JQueryStatic {
  datepicker: () => any;
}

// declare로 선언하여 사용. 선언하지 않으면 $ is not undefined 에러가 발생한다.
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

jQuery.ajax(url, settings);

ajax(url: string, settings?: JQueryAjaxSettings): JQueryXHR;

interface JQueryAjaxSettings {
  async?: boolean;
  cache?: boolean;
  contentType?: any;
  headers?: { [key: string]: any; };
  //...
}

interface JQueryXHR {
  responseJSON?: any; //...
}

npm install -g tsd

tsd install jquery