[javascript] Aurelia와 타입스크립트(TypeScript)의 통합 방법

21 Dec 2023

javascript

Aurelia는 JavaScript 프레임워크이며, 타입스크립트(TypeScript)는 정적 타입으로 컴파일되는 JavaScript를 위한 언어입니다. Aurelia앱에서 TypeScript를 사용하여 타입 안정성(Type safety) 및 유지보수성(maintainability)을 향상시키는 방법을 살펴보겠습니다.

Aurelia 프로젝트에 TypeScript 추가하기

Aurelia 프로젝트에 TypeScript를 추가하려면 다음 단계를 따르십시오:

TypeScript 설치: 프로젝트 루트 디렉토리에서 다음 명령을 실행하여 TypeScript를 설치합니다.
```
npm install typescript --save-dev
```

tsconfig.json 파일 생성: 루트 디렉토리에 tsconfig.json 파일을 생성하고 다음 내용을 추가하여 TypeScript 환경을 구성합니다.

{
  "compilerOptions": {
 "target": "esnext",
 "module": "amd",
 "moduleResolution": "node",
 "sourceMap": true,
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true,
 "strict": true,
 "noImplicitAny": true,
 "noImplicitThis": true,
 "noImplicitReturns": true,
 "noFallthroughCasesInSwitch": true,
 "esModuleInterop": true
  },
  "include": [
 "src/**/*.ts"
  ],
  "exclude": [
 "node_modules"
  ]
}

TypeScript 파일 추가: src 디렉토리에 .ts 확장자를 가진 TypeScript 파일들을 추가합니다.
Aurelia와 TypeScript 통합: Aurelia의 ViewModel 또는 커스텀 컴포넌트에서 TypeScript를 사용할 수 있습니다. TypeScript 파일 내에서 Aurelia의 @autoinject 데코레이터 및 의존성 주입을 이용하여 Aurelia 기능을 사용할 수 있습니다.

import { autoinject } from 'aurelia-framework';

@autoinject
export class MyViewModel {
  message: string = 'Hello from TypeScript';
  
  constructor() {
    console.log(this.message);
  }
}

이제 Aurelia앱을 TypeScript로 작성하여 런타임 중에 발생할 수 있는 타입 관련 에러를 컴파일 시간에 잡을 수 있습니다.

위의 단계에 따라 프로젝트를 설정하면 TypeScript를 사용하여 Aurelia 앱을 더욱 견고하고 안정적으로 만들 수 있습니다.

Aurelia 프로젝트에 TypeScript 추가하기

참고 자료