Declarations

타입 선언 파일 (Type Definition File)

---

TS에게 JS 코드의 종류를 설명하는 주석이 포함된 TS 파일입니다.
타입 선언 파일명은 .d.ts로 끝나며, 인터페이스, 혹은 클래스나 타입 별칭의 집합입니다.

예시

npm과 node_modules에 myPackage라는 패키지가 있고, 패키지를 사용하려고 합니다.

myPackage에는 init과 exit라는 함수가 있고 이를 사용하려고 합니다.

// myPackage.js

export function init(config) {
  return true;
}
export function exit(code) {
  return code + 1;
}

타입스크립트 파일에서 init과 exit라는 함수를 사용하려고 하지만, 타입 선언이 없어 사용할 수 없습니다.

// index.ts

// problem
import { init, exit } from "myPackage";

init({
  url: "true",
});

exit(1);

타입 선언 파일을 사용하여 패키지의 타입을 설명할 수 있습니다.

// myPackage.d.ts

interface Config {
  url: string;
}

declare module "myPackage" {
  function init(config: Config): boolean;
  function exit(code: number): number;
}

declare module (앰비언트 모듈 선언)

declare module 직후에 나오는 외부 모듈의 형태 및 타입 정보를 TypeScript 컴파일러에게 제공할 수 있는 구문입니다.
위의 예시의 경우 myPackage 모듈의 타입 정보를 선언하고 있습니다.

3rd party Library

---

Axios

Axios는 기본적으로 TypeScript 선언 파일을 함께 제공합니다.

axios.get()에 마우스를 올리면 나오는 안내는 Axios에서 제공하는 타입 선언 파일의 타입 정의내용과 같습니다.

어떤 타입을 T에 전달하면 AxiosResponse에 해당 타입인 T가 사용됩니다.
AxiosResponse의 data는 타입 T가 됩니다.
R은 T 타입인 AxiosResponse와 동일합니다.
Promise는 R을 사용하며 이 Promise의 타입은 R이 됩니다.

따라서 Axios.get에 타입을 제공하면 해당 타입이 응답 Promise data의 타입이됩니다.

axios
  .get<boolean>("https://jsonplaceholder.typicode.com/users/1")
  .then((res) => {
    // (property) AxiosResponse<boolean, any>.data: boolean
    res.data;
  });

예시

"https://jsonplaceholder.typicode.com/users/1" 엔드포인트에서 받아오는 json data는 아래와 같습니다.

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
},

json data와 같은 User타입 인터페이스를 Axios의 .get에 제공하여 응답 데이터가 User 타입이 되게 할 수 있습니다.

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

axios
  .get<User>("https://jsonplaceholder.typicode.com/users/1")
  .then((res) => {
  	// (property) AxiosResponse<User, any>.data: User
    printUser(res.data);
  })
  .catch((e) => {
    console.log("ERROR", e);
  });

function printUser(user: User) {
  console.log(user.name);
  // Leanne Graham
  console.log(user.email);
  // Sincere@april.biz
  console.log(user.phone);
}

단일 User가 아니라 복수 users의 엔드포인트 예시입니다.

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

axios
  .get<User[]>("https://jsonplaceholder.typicode.com/users")
  .then((res) => {
  	// (property) AxiosResponse<User[], any>.data: User[]
    res.data.forEach(printUser);
  })
  .catch((e) => {
    console.log("ERROR", e);
  });

function printUser(user: User) {
  console.log(user.name);
  console.log(user.email);
  console.log(user.phone);
}

lodash

Lodash에는 타입 선언 파일이 제공되지 않습니다.
TypeScript에서 Lodash를 사용하려면 해당 타입 선언을 다른 곳에서 찾아야 합니다.

TypeScript 공식 문서로 가면 타입 선언을 사용하는 방법을 설명하고 있습니다.

npm install --save-dev @types/lodash

기본적으로 TypeScript 선언 파일을 함께 제공하지 않을 경우 Yarn package search 에서 타입 검색이 가능합니다.

uuid

import { v4 } from "uuid";

npm install uuid

npm install --save-dev @types/uuid

styled components

npm i --save-dev @types/styled-components