TypeScript 타입스크립트 추가 문법

I. 타입스크립트 추가 문법

 

1. es모듈 사용하기

// node.ts

import fs from 'fs';

fs.readFile('package.json');

첫 번째 코드를 npx tsc --noEmit 으로 실행하면 두 번째 사진과 같은 에러가 발생한다.

fs 모듈의 타입 정의를 찾을 수 없다는 의미인데, 노드의 타입은 따로 설치해야 사용할 수 있다.

- npm i -D @types/node 명령어를 사용하여 @types/node 패키지를 설치하면 된다.

@types/node 설치 후, 다시 npx tsc --noEmit 으로 실행하면 위와 같은 에러가 발생한다.

이제부터 해결을 해보자.

 

✨ VSCode 기준으로, 메서드나 모듈 등의 위에서 f12 를 누르면 해당 메서드, 모듈의 상세한 설정파일 창이 뜨게 된다.

즉, 하나의 정의서(모듈.d.ts)라고 볼 수 있다.

따라서, 에러가 난 readFile 메서드 위에서 f12 를 눌러보면, readFile 메서드를 상세하게 정의해놓은 정의서가 뜨게 되고,

그 곳에는 여러가지의 readFile 메서드가 존재한다.

각 매개변수들을 다르게 해서 넣은 것이다.

에러를 해결하고 싶다면 이 중에서 사용하고 싶은 메서드 형식을 찾고, 그것과 같은 형식으로 매개변수를 추가하는 등 형식을 맞춰주면 에러가 해결된다.

필자는 2557번을 사용했다.

// node.ts (변경 후)

import fs from 'fs';
fs.readFile('package.json', () => {});


// callback 함수의 매개변수는 생략 가능
// 아래와 같이 적어도 무방

import fs from 'fs';
fs.readFile('package.json', (err, data) => {});

 

 

2. promises 사용하기

// node.ts

import fs from 'fs/promises';
fs.readFile('package.json', () => {});

1번에서 다뤘던 예제에서 promises 를 사용하고 싶어서 fs/promise로 바꿔봤더니, 콜백함수 부분에서 에러가 발생했다.

그래서 readFile 메서드에서 f12를 누르고 들어가보니, 콜백함수 부분은 필요가 없었고, 대신 .then 이라는 메서드가 필요하다.

또한, string, buffer와 같은 return 값이 생긴 것을 볼 수 있다.

promises.d.ts

// node.ts 변경 후

import fs from 'fs/promises';
fs.readFile('package.json')
  .then((data: Buffer) => {
    
  });

 

 

✨Promise<Buffer> 에서 f12

위와 같이 Promise<T> 로 되어 있는데, T 자리에는 어떤 타입이든 올 수 있다.

이 때, T를 제네릭*이라고 한다.

readFile 에는 Promise<Buffer> 로 되어 있으므로 T가 Buffer 라고 해석하면 된다.

TResult1 = T 로 되어 있으므로 TResult1 도 Buffer 라고 해석합니다.

PromiseLike 는 지금은 그냥 Promise 와 같다고 생각하면 된다.

따라서, 제네릭을 이용한 코드는 아래와 같이 해석하면 된다.

interface Promise<Buffer> {
  then<Buffer>(onfulfuilled?: ((value: Buffer) => Buffer | Promise<Buffer>) | undefined | null,
  onrejected?: ((reason: any) => undefined | null): Promise<Buffer | never>;
  catch(onrejected?: ((reason: any) => undefined | null): Promise<Buffer>;
}

 

✨ 제네릭이란?

- 타입에 대한 변수

- 여러 자리에 쓰이는 타입을 변수화 시킨 것