타입스크립트 개요

✨ 타입스크립트 소개

타입스크립트는 자바스크립트에 타입을 추가한 상위 호환 언어다.

자바스크립트에서는 string, number, object, undefined 같은 원시 타입을 가지고 있지만 약한 타입 언어이기 때문에, 타입으로 인한 에러를 사전에 알기 어렵다. 하지만 타입스크립트로 작성한다면 컴파일 시점에서 타입 에러를 잡아낼 수 있다. 또한 타입스크립트를 사용하면 IDE의 도움을 받을 수 있다. (예를 들어 인자에 무엇을 넣어야 하는지 미리보기가 가능하다)

👩‍🔧 타입 시스템

💡 타입 추론 (Types by Inference)

let helloWorld = "Hello World";

위처럼 변수를 생성하며 값을 할당하는 경우, 타입스크립트는 자바스크립트를 이해하기 때문에 타입을 명시하지 않아도 helloWorld라는 변수의 값이 string이라고 유추한다.

그렇기 때문에 타입이 뻔한 경우라면 타입 추론이 되기 때문에 타입을 생략해도 괜찮지만, 그렇지 않다면 타입을 직접 정의하는 것이 좋다.

📚 타입 정의하기 (Defining Types)

변수 선언 뒤에 : TypeName 구문을 이용해서 타입을 직접 정의할 수 있다. 예시는 아래와 같다.

// boolean
let isDone: boolean = false;

// number
let decimal: number = 6;

// string
let color: string = "blue";

// Array
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

인터페이스와 타입 별칭(Type Aliases)를 이용해서 타입을 선언할 수도 있다. 인터페이스와 타입 별칭은 타입의 이름을 지을 수 있다.

// 인터페이스
function printLabel(labeledObj: { label: string }) {
    console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

// 타입 별칭
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === "string") {
        return n;
    }
    else {
        return n();
    }
}

🧬 타입 구성 (Composing Types)

타입스크립트 타입을 조합하여 새로운 타입을 정의할 수도 있다. 가장 많이 사용되는 두 가지 코드로는 유니언(Union)과 제네릭(Generic)이다.

• 유니언 (Unions)

  type Color = 'red' | 'blue';

  • 유니언은 타입의 선택지를 줄 수 있는 방법이다. 예를 들어 color라는 변수에 색상을 red, blue로 제한할 수 있다.
• 제네릭 (Generics)

  interface Backpack<Type> {
    add: (obj: Type) => void;
    get: () => Type;
  }
  
  // 이 줄은 TypeScript에 `backpack`이라는 상수가 있음을 알리는 지름길이며
  // const backpack: Backpack<string>이 어디서 왔는지 걱정할 필요가 없습니다.
  declare const backpack: Backpack<string>;
  
  // 위에서 Backpack의 변수 부분으로 선언해서, object는 string입니다.
  const object = backpack.get();
  
  // backpack 변수가 string이므로, add 함수에 number를 전달할 수 없습니다.
  backpack.add(23);

  • 제네릭은 타입에 변수를 제공하는 방법이다.

🔎 구조적 타입 시스템 (Structural Type System)

타입스크립트의 핵심 원칙 중 하나는 타입 값이 형태에 집중한다는 것이다. (이것을 덕 타이핑 혹은 구조적 타이핑이라고 한다) 즉, 두 객체가 같은 형태를 가지면 같은 것으로 간주된다.

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);

---

레퍼런스 : https://typescript-kr.github.io/pages/tutorials/ts-for-js-programmers.html