[TypeScript] TypeScript에서 간단한 데코레이터(어노테이션) 구현하기

TypeScript에서 가벼운 어노테이션(데코레이터)을 만드는 기본적인 세팅을 위해 VSCode를 사용하여 프로젝트를 설정하는 방법을 단계별로 알아보겠습니다.

1. 프로젝트 디렉토리 설정

먼저 새로운 TypeScript 프로젝트를 위한 디렉토리를 만듭니다. 터미널에서 다음 명령을 실행합니다.

mkdir ts-annotation-project
cd ts-annotation-project

2. package.json 생성

프로젝트 디렉토리 안에서 npm init 명령으로 기본 설정 파일을 생성합니다.

npm init -y

이 명령은 package.json 파일을 자동으로 생성해 줍니다.

3. TypeScript 설치

TypeScript와 Node.js에서 실행할 수 있게 관련 패키지들을 설치합니다.

npm install typescript ts-node @types/node --save-dev

• typescript: TypeScript 컴파일러
• ts-node: TypeScript 파일을 실행할 수 있는 Node.js 환경
• @types/node: Node.js의 타입 정의 파일

4. tsconfig.json 설정

tsconfig.json 파일을 생성하여 TypeScript 설정을 합니다. TypeScript 데코레이터를 사용하기 위해 experimentalDecorators 옵션을 활성화해야 합니다. 다음 명령으로 tsconfig.json 파일을 생성하세요.

npx tsc --init

그리고 tsconfig.json 파일을 다음과 같이 수정하세요.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strict": true,
    "esModuleInterop": true
  }
}

여기서 중요한 부분은 experimentalDecorators와 emitDecoratorMetadata가 true로 설정된 것입니다.

5. VSCode 설정

VSCode에서 TypeScript 개발을 할 수 있도록 아래의 익스텐션을 설치합니다.

• ESLint: 코드 품질 관리
• Prettier: 코드 포맷팅 도구
• TypeScript: 기본적으로 제공되지만, 설치하지 않았다면 추가로 설치할 수 있습니다.

6. 간단한 데코레이터(어노테이션) 만들기

이제 간단한 데코레이터를 구현해 보겠습니다. src 디렉토리를 만들고, index.ts 파일을 생성합니다.

mkdir src
touch src/index.ts

src/index.ts 파일에 다음 코드를 작성합니다:

// 클래스 데코레이터 생성
function MyAnnotation(constructor: Function) {
    console.log(`${constructor.name} is decorated`);
}

// 어노테이션 적용
@MyAnnotation
class ExampleClass {
    constructor() {
        console.log("ExampleClass instance created");
    }
}

// 인스턴스 생성
const example = new ExampleClass();

7. 코드 실행하기

프로젝트 디렉토리에서 ts-node로 TypeScript 코드를 실행할 수 있습니다:

npx ts-node src/index.ts

8. 결과

위 코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다:

ExampleClass is decorated
ExampleClass instance created

데코레이터는 클래스가 정의될 때 자동으로 호출되며, 메타데이터를 추가하거나 로직을 삽입할 수 있습니다.

이 과정으로 가벼운 어노테이션을 만드는 기본 세팅을 완료할 수 있습니다.