타입 선언
.ts 로 끝나지 않고 .d.ts 로 끝나는 파일이 선언 파일이다.
.d.ts 파일에서는 구현 세부 사항이나 실행될 JavaScript 코드 및 출력을 찾아볼 수 없다.
대신 타입 정보만 찾을 수 있음. 즉 타입을 선언한다.
타입스크립트는 어떤 작업이나 타입에서 쓸 수 있는 다양한 메서드와 시그니처를 미리 알고 있다.
vscode에서 오른쪽 클릭 → Type Definition을 누르면 인터페이스 어딘가에 정의된 내용들이 나온다.
lib.dom.d.ts
tsconfig에 lib 프로퍼티가 주석 처리된 기본값을 사용 중이라면
기본값에는 DOM 타입 선언이 포함된다.
따라서 DOM을 알고 있어 document.의 모든 메서드를 쓸 수 있다.
예를들어 getElementById를 하면 이 메서드의 타입을 알 수 있다.
→ 문자열을 받아, HTMLElement 또는 null을 반환한다는 것.
라이브러리를 설치해서 사용할때 연관된 타입에 관해 TypeScript에 알려주는 것이 바로 타입 선언 Type Declaration이다.
제 3자 라이브러리 이용하기 Axios
axios와 같은 네이티브가 아닌 라이브러리를 사용하면 타입스크립트에 어떻게 인식시킬까?
npm install로 axios를 설치한 다음,
index.ts에서
import axios from "axios";
axios.
axios. 을 입력하면 자동 완성이 나타난다.
axios에 우클릭 후 Type Definitions를 클릭하면 타입 선언을 볼 수 있다.
node_modules > axios > index.d.ts
index.d.ts 파일 안에 타입 선언이 보인다.
axios 노드 모듈 폴더 자체의 일부. 즉 axios같은 라이브러리는 TypeScript 선언 파일과 함께 제공된다.
추가 작업이 필요치 않음.
사용할 수 있는 Method도 모두 보인다. 사용할 수 있는 모든 메서드의 유니온 타입들.
AxiosRequestConfig는 요청할 때 제공할 수 있는 모든 옵션이 나타남.
파라미터, URL, 헤더 등 다양한 항목이 보인다.
node_modules > axios > package.json을 보면
"types": "index.d.ts",
"typings": "./index.d.ts"라고 되어 있다. 둘 중 하나만 사용할 수 있음. 이들은 package.json에서 이 프로퍼티를 참조하며
TypeScript에게 타입을 어디서 찾을 수 있는지 알려준다.
중요한 것은 따로 설치할 필요가 없다는 것. axios 같은 라이브러리는 타입 선언을 이렇게 제공하지만
다른 라이브러리는 타입 선언을 제공하지 않는 경우도 많다.
Axios 타입 다루기
import axios from "axios";
axos.get()axios.get부분에 커서를 올리면 다음과 같은 설명이 뜬다.
(method) Axios.get<any, AxiosResponse<any, any>, any>(url: string,
config?: AxiosRequestConfig<any> | undefined):
Promise<AxiosResponse<any, any>>axios.get이 제네릭 함수라는 뜻이다. 중첩 제네릭이 보인다.
중요한건 URL이 필요하다는 것. 유일하게 선택사항이 아니고 문자열이어야 한다.
무료 api를 찾아서 url을 넣어보면
import axios from "axios";
axios
.get("https://jsonplaceholder.typicode.com/users/1")
.then((res) => {
console.log("Wow!");
console.log(res.data);
})
.catch((e) => {
console.log("Error!", e);
});실행하면 JSON을 받을 수 있다.
TypeScript는 JavaScript와 거의 같지만 타입 검사 등의 도움을 준다.
인수를 누락했거나 res에 datar가 없으면 알려준다
예컨대 철자를 실수해서 DATA를 대문자로 쓰면 AxiosResponse 타입에는 그런게 없다고 알려줌.
그리고 data를 쓰라고 알려준다.
index.d.ts 에 axios 부분을 읽어보면 마치 가이드처럼 API 작동 방식 및 활용 방법을 알수 있다.
api의 응답을 미리 알고 있으면 해당 응답값을 타입으로 선언 한 다음 get에 넣어줄 수 있다.
axios
.get<USER>("https://jsonplaceholder.typicode.com/users/1")물론 응답값을 interface 타입으로 정확히 선언해야 한다.
개별 타입 설치
자체적인 타입 선언을 가지고 있지 않을때
Lodash 는 다양한 유틸리티 함수를 포함하는 라이브러리이다.
먼저 npm install lodash로 설치한다.
import _ from "lodash";Could not find a declaration file for module ‘lodash’
Lodash는 찾았지만 타입 선언 파일이 없다는 뜻이다. 타입 선언 파일이 제공되지 않기 때문.
github에 lodash의 package.json을 열어보면, type이나 typing이 없다. axios에는 있었다.
TypeScript에서 Lodash를 쓰려면 해당 타입 선언을 다른 곳에서 찾아야 한다.
사람들이 만들어 놓은 타입 선언 파일이 있다.
타입스크립트 공식문서에 타입선언을 사용하는 방법을 설명하고 있다.
https://www.typescriptlang.org/ko/docs/handbook/declaration-files/consumption.html
npm install --save @types/lodash이렇게 @types/ 그리고 필요한 라이브러리를 쓰면 된다.
DefinitelyTyped라는 프로젝트에서 7000가지 타입 선언을 제공한다.
설치하고 나면 import lodash에서 에러가 사라진다.
_. 라고 입력하고 마우스를 대면 다양한 정보와 모든 메서드를 볼 수 있다.
