[노드 2] 17장. 타입스크립트 노드 개발

🌟17장 키워드🌟

pm2

redis

AWS

Lightsail

 

1. 타입스크립트 기본 문법

• 타입스크립트는 자바스크립트에 타입이 명시적으로 추가된 언어 (문자열, 숫자, 불 값, 객체 등의 자료형)
• 타입스크립트 -> tsc(컴파일러) -> 자바스크립트 -> 노드 실행
• 디노(deno): 타입스크립트를 실행할 수 있는 런타임. 그러나 이것 대신 위 방법을 더 많이 사용함
• typescript 패키지, tsc 명령어를 통해 컴파일러 작동, tsc --init 명령어를 통해 tsconfig.json 설정파일 만들기

tsconfig.json 내용: 옵션이 굉장히 다양하다 (주석처리 되어있음)

더 많은 설명: https://aka.ms/tsconfig

TSConfig Reference - Docs on every TSConfig option

 

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",          /* (노드면 commonjs, 최신 브라우저에서는 es2022) Specify what module code is generated. */
    "esModuleInterop": true,           /* CommonJS 모듈도 ECMAScript 모듈처럼 인식하게 해줌 Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* import 시 대소문자 구분 Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                /* 필수!! 엄격한 타입 검사 실시 Enable all strict type-checking options. */
    "skipLibCheck": true     /* 내가 직접적으로 사용하는 라이브러리의 타입만 검사 Skip type checking all .d.ts files. */
  }
}

 

 

📌 자바스크립트 vs. 타입스크립트

compare.js

let a = 'hello';
a = 'world';

 

index.ts

let a = 'hello';
a = 'world';

.ts 파일을 npx tsc 명령으로 .js 파일로 변환

컴파일 후의 index.js

"use strict";  // tsc에서 추가하는 코드
let a = 'hello';
a = 'world';

 

타입 추론

초기에 부여한 값이 문자열이므로 ts는 a를 문자열 변수로 추론한다.
그런데 이때 숫자 타입의 값 123을 넣으면 타입 에러가 발생한다.
(VS Code에서는 ts->js 변환하기 전에도 빨간 밑줄이 뜬다)

 

그런데? 이런 타입에러가 발생하더라도 index.js는 그대로 생성된다.
결과물을 만들어내지 않고 타입 검사만 하고 싶을 때는 npx tsc --noEmit

 

📌 타입스크립트에 명시적인 타입 붙여 사용하기(타이핑)

compare.js

let a = true;
const b = { hello: 'world' };

function add(x, y) { return x + y };
const minus = (x, y) => x - y;

 

index.ts
콜론(:) 뒤에 타입을 명시

let a: boolean = true;
const b: { hello: string } = { hello: 'world' };

function add(x: number, y: number): number { return x + y };
const minus = (x: number, y: number): number => x - y;

function 이름(매개변수: 매개변수타입): 반환값타입 { 함수내용 };     // 코틀린과 같음
const 이름 = (매개변수: 매개변수타입): 반환값타입 => 함수내용;

• 매개변수의 타입은 필수로 지정
• 반환값은 코드를 따라 추론 가능한 경우 생략 가능
• tsc는 타입을 추론할 수 없을 때 any 타입으로 추론함
• 개발자는 any 타입이 생기는 것을 지양하며, tsc가 any 타입으로 추론한 것들에 타입을 붙여주면 됨.

📌 자주 쓰이는 타입

types.ts

• 같은 이름의 인터페이스를 두 번 이상 선언하면 하나로 합쳐진다 (확장)

let a: string | number = 'hello'; // 유니언 타이핑
a = 123;

let arr: string[] = []; // 배열 타이핑
arr.push('hello');

interface Inter {
  hello: string;
  world?: number; // 있어도 되고 없어도 되는 속성
} // 객체를 인터페이스로 타이핑할 수 있음
const b: Inter = { hello: 'interface' };

type Type = {
  hello: string;
  func?: (param?: boolean) => void; // 함수는 이런 식으로 타이핑함
}
const c: Type = { hello: 'type' };

interface Merge {
  x: number,
}
interface Merge {
  y: number,
}
const m: Merge = { x: 1, y: 2 };

export { a }; // 타입스크립트 ECMAScript 모듈을 사용

 

 

객체 다루기

1. interface를 사용한 방법

// 인터페이스 선언
interface MyObjectType {
    // 함수 프로퍼티 선언
    myFunction: () => void;
    // 다른 프로퍼티들도 추가 가능
    name: string;
    age: number;
}

// 객체 생성 및 할당
let myObject: MyObjectType = {
    myFunction: () => {
        console.log("Hello, I'm a function in the object!");
    },
    name: "John",
    age: 25,
};

 

2. type을 사용한 방법

 

// 타입 선언
type MyObjectType = {
    // 함수 프로퍼티 선언
    myFunction: () => void;
    // 다른 프로퍼티들도 추가 가능
    name: string;
    age: number;
};

// 객체 생성 및 할당
let myObject: MyObjectType = {
    myFunction: () => {
        console.log("Hello, I'm a function in the object!");
    },
    name: "John",
    age: 25,
};

 

📌 노드에서 타입스크립트 사용하기

ts는 기본적으로 노드 모듈의 타입 정의를 찾을 수 없다.
npm i -D @types/node 명령어를 통해 패키지를 설치하여 사용한다.

import fs from 'fs';

fs.readFile('package.json');

 

위 상태로 타입 검사를 실시 npx tsc --noEmit 하면 오류가 난다.

궁금한 타입에 커서를 올리고 F12 키를 누르면 타입 설명을 볼 수 있다. (타 개발자가 정의해 둔 타입)
readFile의 타입 정의를 살펴보면 (@types/node/fs.d.ts로 이동) readFile의 정의가 3개 있는 것을 확인할 수 있다. (오버로딩)

• 함수 정의에 맞게 매개변수 변경

import fs from 'fs';

fs.readFile('package.json', (err, result) => {
    console.log(result);
});

• 프로미스 방식

import fs from 'fs/promises';

fs.readFile('package.json')
    .then((result) => { // result는 Buffer 타입입니다.
        console.log(result);
    })
    .catch(console.error);

 

2. 커뮤니티 타입 정의 적용하기

11장의 NodeBird 프로젝트에 타입스크립트를 적용하자!
npm i typescript
npx tsc --init
tsconfig.json 설정파일에서 allowJS 옵션을 true로 설정: 전체 프로젝트에서 일부만 ts로 작성해도 다른 js 코드와 함께 사용할 수 있음.

⚠️ TS7016 에러: 설치한 패키지에 타입 정의가 없음

📌 DefinitelyTyped 패키지

타입스크립트로 작성되지 않은 라이브러리(익스프레스, cookie-parser 등)에 타입 정의를 적용해 둠.

패키지별 지원 여부를 npm 홈페이지에서 확인 가능

• TS: 타입스크립트로 작성됨
• DT: DefinitelyTyped에서 대신 타입 정의를 제공

 

NodeBird 프로젝트에서 사용하는 타입 정의 패키지를 모두 설치하기
npm i -D @types/bcrypt @types/cookie-parser @types/express @types/express-session @types/morgan @types/nunjucks @types/passport @types/sequelize @types/node

 

 

⚠️ TS2322 에러: string | string[] 타입인 곳에 string | undefined 타입을 넣을 수 없음

분명 .env에 COOKIE_SECRET을 넣었는데 왜 string이 아니라 string|undefined라는 걸까?
이유는 tsc가 그걸 알 정도로 똑똑하지 않기 때문이다... (.env는 타입스크립트 파일이 아니기에 그 값이 실제로 존재하는지 알 수 없어서 string|undefined 라고 추론한 것)

 

해결: 타입 뒤에 느낌표를 붙여 undefined가 아님을 명시

secret: process.env.COOKIE_SECRET!,

 

⚠️ TS5055 에러

모든 파일을 ts로 변환하기 전까지 이 에러가 발생하므로 무시하고 진행

 

 

3. 라이브러리 코드 타이핑하기

대부분 라이브러리의 타입 정의를 설치하여 해결 - NodeBird 프로젝트가 익스프레스, 시퀄라이즈, 패스포트 등에 강하게 의존하고 있기 때문

⚠️ TS2339 에러: 특정 객체에 속성이 없음

속성=속성값 을 지정하려고 하는데 객체에 해당 속성이 없는 경우 => 인터페이스를 확장한다!

• types/index.d.ts 파일을 만든다
• 확장자 .d.ts: 해당 파일이 타입 정의만 포함하고 있다

import IUser from '../models/user';

declare global {
  interface Error {
    status?: number;
  }

  namespace Express {
    interface User extends IUser {}
  }
}

 

⚠️ TS7006 에러: Parameter 'X' implicitly has an 'any' type

⚠️ error TS2307: Cannot find module '../config/config' or its corresponding type declarations.

https://chiabi.github.io/2018/08/30/typescript/

 

4. 내가 작성한 코드 타이핑하기

(이전까지의 방법: 패스포트, 시퀄라이즈 등 라이브러리 타입 정의 설치해서 해결)

• controllers, routes, middlewares 등 손수 작성한 코드가 많은 파일을 타이핑하기
• 방법: js 파일의 확장자를 ts로 변경, 모듈을 ECMAScript 모듈 시스템으로 수정

 

1) 미들웨어

방법 1) 매개변수 타이핑

err, req, res, next를 타이핑해야 함 (app.ts와 middlewares와 controllers에서 사용 중)

express로부터 타입을 불러와 타이핑할 수 있음 (@types/express/index.d.ts 참고)
middlewares/index.ts 파일

 

 

import { Request, Response, NextFunction } from 'express';

const isLoggedIn = (req: Request, res: Response, next: NextFunction) => { ... };

 

방법 2) 함수 자체를 타이핑

함수 자체가 RequestHandler라는 타입이므로 다음과 같이 함수 자체에 타이핑할 수도 있음 (매개변수와 반환값은 자동으로 타이핑됨)

 

2) 컨트롤러

동일한 방법으로 타이핑한다.

• js 파일의 확장자를 ts로 변경
• 모듈을 ECMAScript 모듈 시스템으로 수정

⚠️ TS2345 에러, TS2339 에러: 시퀄라이즈 관련 

타입스크립트가 시퀄라이즈 모델 간의 관계를 파악하지 못할 때 발생.

11장의 자동으로 모델을 불러오던 코드 대신 일일이 import하도록 작성.
또한, 직접 모델의 getPosts, addHashtags, addFollowing 메서드를 타이핑해야 함.

 

3) 라우터

동일한 방법으로 타이핑한다.

• js 파일의 확장자를 ts로 변경
• 모듈을 ECMAScript 모듈 시스템으로 수정

 

5. 총평

개발의 편의성보다는 에러 방지를 위해 타입스크립트를 사용하는 것을 추천.

 

 

[출처] 조현영, 『Node.js 교과서』, 길벗(2020), p781-829

---

Node.js #2 

Editor : 유즈