For Javascript Programmers part.2

For Javascript Programmers part.2

3.타입 구성
Union, Generic: 여러가지 타입을 이용하여 새 타입을 작성하기 위해 일상적인 코드에서 가장 많이 사용됨

유니언: 타입이 여러 타입중 하나일 수 있음을 선언하는 방법
Ex)

type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;
function getLength(obj: string | string[]) {
	if (typeof obj === "string") {
    	return [obj];
	  } else {
	    return obj;
  	}
}코드를 입력하세요

제네릭: 타입에 변수를 제공하는 방법

Ex)

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

제네릭으로 고유타입 선언하는법

interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}

declare const backpack: Backpack<string>;


const object = backpack.get();

backpack.add(23);

4.구조적 타입 시스템
타입스크립트 핵심 중 하나는 타입 검사가 값이 있는 ‘형태’에 집중한다는 것임 -> 구조적 타이핑
구조적 타입 시스템에서 두 객체가 같은 형태를 가지면 같은 것으로 간주됨

Ex)

interface Point {
  x: number;
  y: number;
}

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

// "12, 26"를 출력합니다
const point = { x: 12, y: 26 };
printPoint(point);

point변수는 Point타입으로 선언된 적이 없지만, TypeScript는 타입 검사에서 point의 형태와 Point의 형태를 비교합니다. 둘 다 같은 형태이기 때문에, 통과합니다.
형태 일치에는 일치시킬 객체의 필드의 하위 집합만 필요합니다.

const point3 = { x: 12, y: 26, z: 89 };
printPoint(point3); // prints "12, 26"

구조적으로 클래스와 객체가 형태를 따르는 방법에는 차이가 없습니다

class VirtualPoint {
  x: number;
  y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

const newVPoint = new VirtualPoint(13, 56);
printPoint(newVPoint); // prints "13, 56"