타입스크립트 :: Docs 해부

TypeScript Documentation Everyday Types 보고 배운 내용

 

 

타입 달기

변수 (Variable)

왼쪽이 아니라 항상 오른쪽에 타입을 달아줍니다.

let myName: string = "HeJ";

사실 이렇게 명백한 곳에는 타입 달아줄 필요가 없습나다.

TypeScript가 알아서 추론(infer)한다고 합니다.

 

 

배열 (Array)

배열을 나타낼 때 다음 둘은 같습니다.

number[] 
Array<number>
// T<U> 이런 형태는 '제너릭'이라고 하는데 뒤에 조금 더 자세히 알아봅니다.

 

 

함수 (Function)

인풋과 아웃풋 양쪽에 타입을 달 수 있습니다.

 

인풋에 타입 달기

function greet(name: string) {
  console.log("Hello, " + name.toUpperCase());
}

 

아웃풋(리턴)에 타입 달기

function getFavoriteNumber(): number {
  return 26;
}

변수에 타입이 필요 없는 것처럼, 보통 아웃풋에 타입을 달아줄 필요 없습니다.

TypeScript가 추측하니까요.

실수로 바뀔 수 있거나, 개인적인 선호에 따라 아웃풋에 타입을 달아준다고 합니다.

 

 

객체 (Object)

매개변수(parameter)에 타입을 지정하고, 없으면 'any'로 추정해버립니다.

function printCoord(pt: { x: number; y:number }) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 })

 

매개변수가 불분명할 때

어떤 매개변수가 안들어 올 때도 있으면 물음표(?)를 붙여줍니다.

function printName(obj: { first: string; last?: string }) {
  console.log(obj.last?.toUpperCase());
  console.log(obj.first.toUppderCase())
}
printName({ first: "HeJ" })
printName({ first: "Dragon", last: "Ryu" })

 

 

유니온(Union)

두 개 이상의 타입을 적용 시킬 수 있습니다.

function printId(id: number | string) {
  console.log("Your Id is: " + id)
}
printID(101)
printID("id_101")

 

 

타입 별명(Type Aliases)

지금까지는 타입을 바로 달아줬는데, 타입에 별명을 붙여주면 여러번 사용할 수 있습니다.

type ID = number | string;

type Point = {
  x: number;
  y: number;
}

function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}

printCoord({ x: 100, y: 100 })

 

 

인터페이스(Interfaces)

객체(object) 타입에 별명을 달아주는 다른 방법입니다.

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

function printCoord(pt: Point){
  console.log("The coordinate's x value is " + pt.x)
  console.log("The coordinate's y value is " + pt.y)
}

printCoord({ x: 100, y: 100 })

 

 

Type vs Interface 다른 점은?

사용방법도 하는 것도 굉장히 비슷해 보이는데 다른 점은?

여러 다른 점 중에서 가장 명확하게 보이는 것은 'type'은 수정할 수 없다는 것

 

interface는 수정이 되는데

interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"'
window.ts.transpileModule(src, {})

 

type은 안됩니다.

type Window {
  title: string
}

type Window {
  ts: TypeScriptAPI
}

// Error: Window 중복

 

개인적으로는 interface를 위주로 사용하고,

type의 기능이 필요할 때 사용해서 익숙해져야겠습니다. 

 

 

타입 명시(Type Assertions)

우리는 아는데 TypeScript가 타입을 추측하지 못할 때가 있습니다.

예를 들어, document.getElementById를 사용하면 TypeScript는 어떤 HTMLElement를 반환한다고는 추측하지만, 우리는 항상 HTMLCanvasElement라는 것을 알 수도 있습니다.

이럴 때 타입을 알려주는 겁니다.

 

타입 명시 방법 1

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

 

타입 명시 방법 2

const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas")

 

 

null, undefined가 아니라는 명시 !

앞에서 알아본 타입을 명시하는 것과 비슷하게,

null이나 undefined가 아닐 때만 해당하도록 느낌표(!)로 알려줄 수 있다

function liveDangerously(x?: number | null){
  console.log(x!.toFixed())
}

 

 

참고 링크

The TypeScript Handbook

=> https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

 

 

types by Nathan Dumlao @unsplash