새 TypeScript 프로젝트를 설정하는 방법

소개

시작 프로젝트 또는 Angular CLI와 같은 도구를 사용하기 전에 TypeScript로 작업했을 수 있습니다. 이 자습서에서는 초보자의 도움 없이 TypeScript 프로젝트를 설정하는 방법을 배웁니다. 또한 TypeScript에서 컴파일이 작동하는 방식과 TypeScript 프로젝트에서 linter를 사용하는 방법을 배웁니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

컴퓨터에 설치된 최신 버전의 Node. Node.js를 설치하고 로컬 개발 환경을 만드는 방법 튜토리얼을 따라 이를 수행할 수 있습니다.
npm에 익숙합니다. npm은 Node.js와 함께 제공됩니다. npm 작업에 대해 자세히 알아보려면 이 npm 및 package.json 튜토리얼과 함께 Node.js 모듈을 사용하는 방법을 확인하세요.

1단계 — TypeScript 프로젝트 시작

TypeScript 프로젝트를 시작하려면 프로젝트용 디렉토리를 생성해야 합니다.

mkdir typescript-project

이제 프로젝트 디렉터리로 변경합니다.

cd typescript-project

프로젝트 디렉토리가 설정되면 TypeScript를 설치할 수 있습니다.

npm i typescript --save-dev

TypeScript를 개발 종속성으로 저장하기 때문에 --save-dev 플래그를 포함하는 것이 중요합니다. 즉, TypeScript는 프로젝트 개발에 절대적으로 필요합니다.

TypeScript가 설치된 상태에서 다음 명령을 사용하여 TypeScript 프로젝트를 초기화할 수 있습니다.

npx tsc --init

npm에는 실행 가능한 패키지를 실행하는 npx라는 도구도 포함되어 있습니다. npx를 사용하면 전역적으로 설치하지 않고도 패키지를 실행할 수 있습니다.

tsc 명령은 내장 TypeScript 컴파일러이기 때문에 여기에서 사용됩니다. TypeScript로 코드를 작성할 때 tsc를 실행하면 코드가 JavaScript로 변환되거나 컴파일됩니다.

위의 명령에서 --init 플래그를 사용하면 typescript-project 프로젝트 디렉토리에 tsconfig.json 파일을 생성하여 프로젝트를 초기화합니다. 이 tsconfig.json 파일을 사용하면 TypeScript와 tsc 컴파일러가 상호 작용하는 방식을 추가로 구성하고 사용자 정의할 수 있습니다. 필요에 가장 잘 맞도록 이 파일에서 구성을 제거, 추가 및 변경할 수 있습니다.

편집기에서 tsconfig.json을 엽니다.

nano tsconfig.json

당신과 당신은 기본 구성을 찾을 수 있습니다. 많은 옵션이 있으며 대부분은 주석 처리되어 있습니다.

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

    /* Projects */
    // "incremental": true,                              /* Enable incremental compilation */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
    
    . . .
  }
}

TypeScript 구성을 사용자 지정할 수 있습니다. tsconfig.json 파일에서. 예를 들어 outDir 항목의 주석을 제거하고 \./build\로 설정하면 컴파일된 모든 TypeScript 파일이 해당 디렉터리에 저장됩니다.

TypeScript가 설치되고 tsconfig.json 파일이 제자리에 있으면 이제 TypeScript 앱 코딩 및 컴파일로 이동할 수 있습니다.

참고: 아래의 3단계는 많은 구성을 합리적인 기본값으로 바꾸지만 이러한 변경으로 바로 시작할 수 있습니다.

2단계 — TypeScript 프로젝트 컴파일

이제 TypeScript 프로젝트 코딩을 시작할 수 있습니다. 편집기에서 index.ts라는 새 파일을 엽니다. index.ts에 다음 TypeScript 코드를 작성합니다.

const world = 'world';

export function hello(who: string = world): string {
  return `Hello ${who}! `;
}

이 TypeScript 코드가 있으면 프로젝트를 컴파일할 준비가 된 것입니다. 프로젝트 디렉토리에서 tsc를 실행합니다.

npx tsc

다음과 같은 경우 컴파일된 JavaScript index.js 파일과 index.js.map 소스맵 파일이 모두 build 폴더에 추가되었음을 알 수 있습니다. tsconfig.js 파일에서 지정했습니다.

index.js를 열면 다음과 같이 컴파일된 JavaScript 코드를 찾을 수 있습니다.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
    return `Hello ${who}! `;
}
exports.hello = hello;

변경할 때마다 TypeScript 컴파일러를 실행하는 것은 지루할 수 있습니다. 이 문제를 해결하기 위해 컴파일러를 감시 모드로 설정할 수 있습니다. 컴파일러를 감시 모드로 설정하면 TypeScript 파일이 변경될 때마다 다시 컴파일됩니다.

다음 명령을 사용하여 감시 모드를 활성화할 수 있습니다.

npx tsc -w

TypeScript 컴파일러의 작동 방식을 배웠고 이제 TypeScript 파일을 성공적으로 컴파일할 수 있습니다. 작업 흐름에 linter를 도입하여 TypeScript 프로젝트를 한 단계 끌어올릴 수 있습니다.

3단계 — Google TypeScript 스타일을 사용하여 코드 린트 및 수정

코딩할 때 linter를 사용하면 코드에서 불일치, 구문 오류 및 누락을 빠르게 찾는 데 도움이 됩니다. 또한 스타일 가이드는 코드가 올바르고 일관성이 있는지 확인하는 데 도움이 될 뿐만 아니라 추가 도구를 사용하여 해당 스타일을 적용할 수 있도록 합니다. 이를 위한 일반적인 도구는 eslint로, 많은 IDE와 잘 작동하여 개발 프로세스 동안 도움을 줍니다.

이제 프로젝트가 설정되면 TypeScript 에코시스템의 다른 도구를 사용하여 tsconfig.json 파일에서 수동으로 Linting 및 구성을 설정하지 않아도 됩니다. Google TypeScript Style은 그러한 도구 중 하나입니다. GTS로 알려진 Google TypeScript 스타일은 스타일 가이드, 린터 및 자동 코드 수정기가 하나로 통합되어 있습니다. GTS를 사용하면 새로운 TypeScript 프로젝트를 신속하게 부트스트랩하고 작고 조직적인 세부 사항에 집중하지 않고 프로젝트 설계에 집중할 수 있습니다. GTS는 또한 독자적인 기본 구성을 제공합니다. 즉, 많은 구성 사용자 지정을 수행할 필요가 없습니다.

GTS를 설치하여 시작합니다.

npm i gts --save-dev

여기에서 다음 명령을 사용하여 GTS를 초기화합니다.

npx gts init

위의 명령은 tsconfig.json 파일 및 linting 설정을 포함하여 TypeScript를 시작하는 데 필요한 모든 것을 생성합니다. package.json 파일이 아직 없는 경우에도 생성됩니다.

npx gts init를 실행하면 package.json 파일에 유용한 npm 스크립트도 추가됩니다. 예를 들어 이제 npm run compile을 실행하여 TypeScript 프로젝트를 컴파일할 수 있습니다. Linting 오류를 확인하려면 이제 npm run check를 실행할 수 있습니다.

참고: GTS를 설치하기 전에 TypeScript를 설치하면 애플리케이션을 개발할 때 가장 최신 버전의 TypeScript를 사용할 수 있습니다. GTS 개발이 TypeScript보다 더 느리게 진행된 결과 개발 종속성에서 TypeScript를 다운그레이드할 것을 제안할 수 있습니다. 새로운 기능이 필요한 경우 이 값을 덮어쓰지 않도록 GTS에 지시할 수 있습니다.

또한 eslint TypeScript 린터에는 지원되는 TypeScript 버전이 있으므로 최신 버전의 언어는 이 범위를 벗어날 수 있습니다. 이 경우 eslint는 이에 대해 경고합니다. 계속해서 잘 작동할 가능성이 높지만 문제가 발생하면 설치할 때 지정하여 TypeScript 버전을 다운그레이드할 수 있습니다. 예: npm i typescript@4.4.2 --save-dev.

이제 GTS가 설치되어 TypeScript 프로젝트에 제대로 통합되었습니다. 향후 프로젝트에서 GTS를 사용하면 필요한 구성을 갖춘 새로운 TypeScript 프로젝트를 신속하게 설정할 수 있습니다.

GTS는 독단적이고 구성이 필요 없는 접근 방식을 제공하므로 자체적인 보푸라기 및 고정 규칙을 사용합니다. 이들은 많은 모범 사례를 따르지만 어떤 식으로든 규칙을 수정해야 하는 경우 기본 eslint 규칙을 확장하여 수정할 수 있습니다. 이렇게 하려면 스타일 규칙을 확장하는 .eslintrc라는 이름의 파일을 프로젝트 디렉토리에 만듭니다.

---
extends:
  - './node_modules/gts'

이를 통해 GTS에서 제공하는 스타일 규칙을 추가하거나 수정할 수 있습니다.

결론

이 자습서에서는 사용자 지정된 구성으로 TypeScript 프로젝트를 시작했습니다. 또한 Google TypeScript 스타일을 TypeScript 프로젝트에 통합했습니다. GTS를 사용하면 새로운 TypeScript 프로젝트를 빠르게 시작하고 실행할 수 있습니다. GTS를 사용하면 구성을 수동으로 설정하거나 워크플로에 linter를 통합할 필요가 없습니다.

추가 단계로 Visual Studio Code에서 TypeScript로 작업하는 방법을 배우는 데 관심이 있을 수 있습니다.