타입스크립트 핸드북 - 타입스크립트 시작하기

Typescript

타입스크립트 핸드북 - 타입스크립트 시작하기

홍준혁 [Hong-JunHyeok] 2021. 9. 24. 12:38

728x90

본 글은 기존의 자바스크립트 개발자의 시점으로 타입스크립트를 소개하는 글임을 알립니다.

자바스크립트와 타입스크립트의 관계는 매우 독특하다. TypeScript은 JavaScript 위에 레이어로서 자리잡고 있는데, JavaScript의 기능들을 제공하면서 그 위에 자체 레이어를 추가한다. 바로 이 레이어가 타입스크립트의 타입 시스템이다.

JavaScript는 number, object, undefined등의 원시 타입을 가지고 있지만 코드 베이스에서 일관되게 작성되었는지 확인해주지는 않는다. TypeScript는 여기서 레이어도 동작한다.

타입 추론

변수를 생성하면서 동시에 특정 값에 할당하는 경우, TypeScript는 그 값을 해당 변수의 타입으로 사용할 것이다.

let helloWorld = "Hello World!";

TypeScript는 JavaScript 코드를 받아들이면서 타입을 가지는 타입 시스템을 구축할 수 있다.

이것이 가능한 이유는 TypeScript는 JavaScript의 SuperSet이기 때문이다.

따라서 위의 코드는 helloWorld변수가 string타입으로 추론한다.

타입 정의하기

JavaScript는 동적 타입 프로그래밍이 가능하므로 몇몇 디자인 패턴은 자동으로 타입을 제공하기 힘든 경우가 있다.

따라서 TypeScript에서 타입을 직접 정의해줄 수 있다

다음 코드를 보도록하자.

const user = {
  name: "Hayes",
  id: 0,
};

위 코드는 name : string 과 id : number를 포함하는 추론 타입을 가지는 객체를 생성한다.

이 객체의 형태를 명시적으로 타나내기 위해서는 interface 키워드를 사용한다.

interface User {
    name: string;
    id: number;
}

이제 : TypeName키워드를 사용해서 JavaScript객체가 다음과 같은 타입을 따르는 객체임을 명시한다.

const user: User = {
  name: "Hayes",
  id: 0,
};

이때, 정의한 인터페이스와 다른 객체를 생성하면 TypeScript는 에러를 줍니다.

// @errors: 2322
interface User {
  name: string;
  id: number;
}

const user: User = {
  username: "Hayes",
  id: 0,
};

JavaScript는 객체지향 프로그래밍을 지원하므로 TypeScript도 객체지행 프로그래밍을 지원한다.

따라서 인터페이스는 클래스로도 선언할 수 있다.

interface User {
  name: string;
  id: number;
}

class UserAccount {
  name: string;
  id: number;

  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}

const user: User = new UserAccount("Murphy", 1);

또한 인터페이스는 함수의 매개변수와 리턴값을 명시하는데 사용되기도 한다.

interface User {
  name: string;
  id: number;
}
// ---cut---
function getAdminUser(): User {
  //...
}

function deleteUser(user: User) {
  // ...
}

TypeScript에서는 JavaScript의 원시 타입을 전부 지원하고 추가로 확장되는 타입을 지원한다.

예를 들어서

any : 어떤 타입이든지 허용한다.
unknown : 이 타입을 사용하는 사람이 타입이 무엇인지 선언했는가를 확인하십시오.
never : 이 타입은 발생될 수 없습니다.
void : undefined를 리턴하거나 리턴 값이 없는 함수

등이 있다.

타입을 구축하기 위한 두가지 방법이 있는데, interface와 type을 사용하는 것이다.

interface를 우선적으로 사용하고 특정 기능이 필요할 때 type을 사용해야 한다.

타입 구성

여러가지 타입을 이용하여 새 타입을 작성하기 위해 일상적인 코드에서 가장 많이 사용되는 두 가지 코드로는 유니언(Union)과 제네릭(Generic)이 있다.

유니언

유니언은 쉽게 말해서 여러 타입중 하나일 수 있음을 선언하는 방식이다.

유니언타입이 가장 많이 사용되는 사례는 다음 코드를 보도록 하자.

type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

유니언 타입은 다양한 타입을 처리하는 방법을 제공하는데, 예를 들어서 string 혹은 array를 받는 함수가 있을수도 있다.

function getLength(obj: string | string[]) {
  return obj.length;
}

제네릭

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

일반적인 예시로 배열을 들어보겠다.

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

제네릭이 없는 배열은 어떤 것이든 포함할 수 있다.. 제네릭이 있는 배열은 배열 안의 값을 설명할 수 있다.

728x90