[typescript] Types

typescript에서 사용되는 Type들에 대해서 정리해보겠습니다.

Types

Array Types

• Array는 아래와 같이 두가지 표현으로 나타낼 수 있습니다.

const concatList1 = (array: Array<string>) => {
    console.log(array.join(', '));
}

const concatList2 = (array: string[]) => {
    console.log(array.join(', '));
}

concatList1(['apple', 'banana', 'cherry']); // apple, banana, cherry
concatList2(['apple', 'banana', 'cherry']); // apple, banana, cherry

Return Types

• Return 타입은 꼭 필요하지 않음 inferred type에 의해 결정될 수 있기 때문이다.
• inferred type은 contextual typing 이라고 표현한다.

function getFavoriteNumber(): number {
  return 26;
}

Object Types

• optional은 ?로 undefined인지 체크하는 데 사용된다, object내에서는 property가 option인 경우 사용할 수 있다.

• property의 separator로는 , ; 둘 다 사용 가능하다. 마지막 separator는 생략 가능하다.

function printName(obj: { first: string; last?: string }) {
}

Union Types

• 동시에 여러타입을 사용하기 위해서 사용된다.
• prototype이 동시에 사용될 수 있다면 에러가 나지 않지만, 아래 join과 같이 string에서는 사용할 수 없다면, 조건문으로 Narrowing 해주면 된다. (if문으로 분기처리하는 것을 docs에서는 narrow 라고 표현한다.)

function welcomePeople(x: string[] | string) {
  if (Array.isArray(x)) {
    console.log("Hello, " + x.join(" and "));
  } else {
    console.log("Welcome lone traveler " + x);
  }
}

// 이 경우는, array와 string 모두 slice prototype을 갖고 있기 때문에 에러나지 않는다.
function getFirstThree(x: number[] | string) {
  return x.slice(0, 3);
}

Type Aliases (type, interface)

type과 interface는 용도가 거의 같고, 약간의 차이점이 있습니다, 같은 type을 한 번 이상 재사용 해야할 때 사용할 수 있습니다.

type

type의 확장 방법은 1가지가 있습니다.

• type에 intersections으로 확장하기

type NormalWindow = {
  price: number;
}

type ColorWindow = NormalWindow & {
  color: string;
}

function myWindow(item: ColorWindow) {
  console.log(item);
}

const obj = {
  price: 10000,
  color: 'transparent',
  shop: 'lg houses'
}

myWindow(obj);

interface

interface를 확장하는 방법은 2가지가 있습니다.

• interface에 extends 사용하기
• 기존의 interface에 new fields를 추가하기

// extends로 확장하기
interface NormalWindow {
  price: number
}

interface ColorWindow extends NormalWindow {
  color: string
}

function myWindow(item: ColorWindow) {
  console.log(item);
}

const obj1 = {
  price: 10000,
}

const obj2 = {
  price: 10000,
  color: 'transparent',
}

const obj3 = {
  price: 10000,
  color: 'transparent',
  shop: 'lg houses'
}

myWindow(obj1); // 에러 (TS2345)
myWindow(obj2); // 정상동작
myWindow(obj3); // 정상동작

// 기존 이름으로 확장하기
interface WindowProps {
  price: number
}

interface WindowProps {
  color: string
}

function myWindow(item: WindowProps) {
  console.log(item);
}

const obj = {
  price: 10000,
  color: 'transparent',
  shop: 'lg houses'
}

myWindow(obj);

type과 interface 비교

• prmitive type을 re-name 하는 것은 type에서만 가능하다.

type MyNewString = string;

const str: MyNewString = 'test';

• interface는 대체로 object의 shape을 declare하는데에 사용된다.

Type Assertions

• Type Assertions은 Typescript가 알지 못하는 정확한 Type을 지정해주기 위해 사용한다.
• type assertions은 compiler에 의해 삭제되므로, runtime에 영향을 주지 않는다.
• as와 <>으로 2가지 형태로 사용 가능하다.
  1. <HTMLCanvasElement>document.getElementById("main_canvas");
  2. document.getElementById("main_canvas") as HTMLCanvasElement;

<!-- index.html -->
<button class="btn">COUNT UP</button>
<div class="counter">0</div>

// index.tsx
const btn = document.querySelector(".btn") as HTMLButtonElement;
const counter = document.querySelector(".counter") as HTMLDivElement;

btn.addEventListener("click", (e: MouseEvent) => {
  const prevCount = counter.innerHTML;
  counter.innerHTML = `${Number(prevCount) + 1}`;
});

Literal Types

• 특정 string과 number로 type을 정할 수 있다.
• Literal Type은 단일로 쓸때는 쓸모가 없다.

let x: 'hello' = 'hello';
let y: 'hello' = 'hallo'; // Type '"hallo"' is not assignable to type '"hello"'.

• 아래와 같이 Union Type에서 활용할 수 있다.

function alignment(align: 'left' | 'center' | 'right') {
    console.log(align);
}

alignment('left')

function emergencyType(id: 112 | 119) {
    console.log('call to ', id);
}

emergencyType(112); // call to 112

Ref

Typescript Handbook : Types