DAY 47. TypeScript 3일차

• 문제발생

-

 

• 시도

J 튜터님 유트브 강의 3일차 1,2부

 

• 해결방안

- 시청 1회 실습 1회

 

• 알게 된 것

- 함수(Function)

• 함수 : 기존 JavaScript 함수의 선언 방식에서 매개변수와 함수의 반환 값 타입에 추가한다.

function sum1(a: number, b: number): number {
  return a + b;
}

• 인자(argument) : 타입스크립트에서는 함수의 인자가 모두 필수 값이다.

function sum(a: number, b: number): number {
  return a + b;
}
sum(10, 20); // 30
//sum2(10, 20, 30); // error, too many parameters
//sum2(10); // error, too few parameters

function sum2(a: number, b?: number): number {
  return a;
}

sum2(10, 20); // 30
//sum2(10, 20, 30); // error, too many parameters
sum2(10); // 타입 에러 없음

• 매개변수(parameter) : 매개변수 초기화는 ES6 문법과 동일하다.

function sum(a: number, b = 100): number {
  return a + b;
}
const result1 = sum(10, undefined); // 110
//const result2 = sum(10, 20, 30); // error, too many parameters
const result3 = sum(10); // 110

• REST : 설정한 매개변수와 타입 외에 값의 타입의 매개변수를 따로 추가하지 않고 사용가능하게 한다.(?)

function sum1(a: number, ...nums: number[]): number {
  let totalOfNums = 0;

  for (let key in nums) {
    totalOfNums += nums[key];
  }

  return a + totalOfNums;
}

const result = sum1(10, 20, 30, 40); // 100
console.log(result);

•  This : TypeScript 에서는 JavaScript 의 this 가 잘못 사용되었을때 오류(빨간줄)를 발생시킨다.

interface Node {
  count: number;
  init(this: Node): () => {};
}

let nd: Node = {
  count: 10,
  init: function (this: Node) {
    return () => {
      return this.count;
    };
  },
};

let getCount = nd.init();
let count = getCount();

console.log(count); // 10

- 리터럴 타입(Literal) : 집합 타입의 보다 구체적인 하위 타입, TypeScript 에는 문자열과 숫자 두가지 타입이 있다.

• 문자열 타입 : 

type Easing = "ease-in" | "ease-out" | "ease-in-out"; //literal 타입

class UIElement {
  animate(dx: number, dy: number, easing: Easing) {
    if (easing === "ease-in") {
      // ...
    } else if (easing === "ease-out") {
    } else if (easing === "ease-in-out") {
    } else {
      // 하지만 누군가가 타입을 무시하게 된다면
      // 이곳에 도달하게 될 수 있습니다.
    }
  }
}

let button = new UIElement();
button.animate(0, 0, "ease-in");
//button.animate(0, 0, "uneasy"); // Error 없는 literal 타입
button.animate(0, 0, "ease-out");

• 숫자 타입 :

function rollDice(): 1 | 2 | 3 | 4 | 5 | 6 {
  return (Math.floor(Math.random() * 6) + 1) as 1 | 2 | 3 | 4 | 5 | 6;
}

const result4 = rollDice();

console.log(result4); //1~6 랜덤

• 유니언 타입(union) : 여러 타입들을 "조합"해서 사용하는 방법

function printId(id: number | string) {
  //console.log(id.toUpperCase());
  // string | number' 형식에 'toUpperCase' 속성이 없습니다.
  // 'number' 형식에 'toUpperCase' 속성이 없습니다.

  //type narrowing

  if (typeof id === "string") {
    console.log(id.toUpperCase());
  }
}

• 교차 타입(intersection) : 여러가지 타입을 "결합"해서 사용

type Common = {
  name: string;
  age: number;
  gender: string;
};

type Animal = {
  howl: string;
};

type Cat = Common & Animal;//교차
type Dog = Common | Animal;//유니온

let dog: Dog = {
  howl: "dogggg",//없어도 된다.
};
let cat: Cat = {
  age: 3,
  gender: "C",
  name: "CC",
  howl: "cattttt",//반드시 써야함
};

- 타입과 인터페이스(Type, Interface) : 객체의 타입의 이름을 지정하는 방법, 여러가지 충돌 때문에 주로 interface 를 사용하면 된다.

• 타입(Type): 특수문자 & 로 확장
• 인터페이스(Interface): extends 로 확장

interface AnimalInterface {
  species: string;
  height: number;
  weight: number;
}

const tiger: AnimalInterface = {
  species: "tiger",
  height: 200,
  weight: 300,
};

type AnimalType = {
  species: string;
  height: number;
  weight: number;
};

const lion: AnimalType = {
  species: "lion",
  height: 180,
  weight: 400,
};

- 클래스(Class) :

• readonly : 클래스의 속성 앞에 readonly 키워드를 사용, readonly 키워드가 붙으면 한번 객체 생성 후 읽기는 가능하지만, 수정은 불가능하다.

class Developer {
  readonly name: string;

  constructor(theName: string) {
    this.name = theName;
  }
}

let john = new Developer("John");
// john.name = "John"; // error! name is readonly.

• Accessor(접근제어자) : 객체의 특정 속성의 접근과 할당에 대해 제어, 예를 들어 private 경우 get, set 을 해주지 않으면 읽고 수정하는것이 불가능하다.

class Developer2 {
  private _name: string;

  get name(): string {
    return this._name;
  }

  set name(newValue: string) {
    if (newValue && newValue.length > 5) {
      throw new Error("이름이 너무 깁니다");
    }
    this._name = newValue;
  }
}

const josh2 = new Developer2();
josh2.name = "Josh";
console.log(josh2.name); //Josh

• Abstract Class(추상 클래스) : 인터페이스와 비슷한 역할을 하면서도 조금 다른 특징이 있다. 특정 클래스의 상속 대상이 되는 클래스이며 좀 더 상위 레벨에서 속성, 메서드의 모양을 정의한다.

abstract class Developer {
  abstract coding(): void; // 'abstract'가 붙으면 상속 받은 클래스에서 무조건 구현해야 함
  drink(): void {
    console.log("drink sth");
  }
}

class FrontEndDeveloper extends Developer {
  coding(): void {
    // Developer 클래스를 상속 받은 클래스에서 무조건 정의해야 하는 메서드
    console.log("develop front");
  }
  design(): void {
    console.log("design front");
  }
}

class BackEndDeveloper extends Developer {
  coding(): void {
    // Developer 클래스를 상속 받은 클래스에서 무조건 정의해야 하는 메서드
    console.log("develop server");
  }
  design(): void {
    console.log("design server");
  }
}

// const dev = new Developer(); // error: cannot create an instance of an abstract class 추상 클래스는 객체화 불가능
const josh = new BackEndDeveloper(); // 추상 클래스를 상속받은 클래스는 가능
const kai = new FrontEndDeveloper(); // 추상 클래스를 상속받은 클래스는 가능

josh.coding(); // develop server
josh.drink(); // drink sth
josh.design(); // design server

console.log("");

kai.coding(); // develop front
kai.drink(); // drink sth
kai.design(); // design front

- Overloding  Vs Overridng :

• Overloding  : 서로 다른 시그니처를 갖는 여러 메소드를 하나의 이름으로 정의하는 것
• Overridng : 상속받은 부모 클래스의 메소드를 재정의하여 사용하는 것

 [결론]

 

Java 에서 배운 개념이 TypeScript 에서 쏟아진다.