TypeScript 코드 컴파일(Node.js)

npm을 사용하여 TypeScript 지원 추가

TypeScript npm 패키지는 TypeScript 지원을 추가할 있습니다. TypeScript 2.1 이상의 npm 패키지가 프로젝트에 설치되면 해당 버전의 TypeScript 언어 서비스가 편집기에 로드됩니다.

1. Visual Studio 또는 Node.js 런타임에 대한 개발 워크로드를 설치해야 하는지 확인합니다.

   JSPS(JavaScript Project System) 또는 .esproj사용하여 만든 프로젝트의 경우 추가 워크로드가 필요하지 않습니다. Node.js에 포함된 npm(https://www.npmjs.com/)을 설치하기만 하면 됩니다.

   이전 프로젝트 유형(.njsproj)의 경우 Node.js 개발 워크로드 및 Node.js 런타임을 설치해야 합니다.

   지침에 따라 Node.js포함된 Node.js 개발 워크로드와 npm(https://www.npmjs.com/)을 설치합니다.

   간단한 Visual Studio 통합을 위해 빈 Node.js 웹 애플리케이션 템플릿과 같은 Node.js TypeScript 템플릿 중 하나를 사용하여 프로젝트를 만듭니다. 그렇지 않으면 Visual Studio에 포함된 Node.js JavaScript 템플릿을 사용하고 여기에 있는 지침을 따릅니다. 또는 폴더 열기 프로젝트를 사용해 보세요.

2. 프로젝트에 아직 포함되지 않은 경우 TypeScript npm 패키지설치합니다.

   솔루션 탐색기(오른쪽 창)에서 프로젝트 루트에서 package.json 엽니다. 나열된 패키지는 솔루션 탐색기의 npm 노드 아래에 있는 패키지에 해당합니다. 자세한 내용은 npm 패키지 관리참조하세요.

   Node.js 프로젝트의 경우 명령줄 또는 IDE를 사용하여 TypeScript npm 패키지를 설치할 수 있습니다. IDE를 사용하여 설치하려면 솔루션 탐색기에서 npm 노드를 마우스 오른쪽 단추로 클릭하고 새 npm 패키지설치를 선택하고 TypeScript검색한 다음 패키지를 설치합니다.

   출력 창에서 npm 옵션을 확인하여 패키지 설치 진행률을 확인합니다. 설치된 패키지는 솔루션 탐색기의 npm 노드 아래에 표시됩니다.

3. 프로젝트에 아직 포함되지 않은 경우 프로젝트 루트에 tsconfig.json 파일을 추가합니다. 파일을 추가하려면 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 추가 > 새 항목선택합니다. TypeScript JSON 구성 파일선택한 다음 추가를 클릭합니다.

   모든 항목 템플릿이 보이지 않으면 모든 템플릿 표시를 선택한 후, 항목 템플릿을 선택하세요.

   Visual Studio는 프로젝트 루트에 tsconfig.json 파일을 추가합니다. 이 파일을 사용하여 TypeScript 컴파일러의 옵션을 구성할 수 있습니다.

4. tsconfig.json 열고 업데이트하여 원하는 컴파일러 옵션을 설정합니다.

   간단한 tsconfig.json 파일의 예는 다음과 같습니다.

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

   이 예제에서는 다음을 수행합니다.

   • 포함 TypeScript(*.ts) 파일을 찾을 수 있는 위치를 컴파일러에 알려줍니다.
   • outDir 옵션은 TypeScript 컴파일러에서 변환되는 일반 JavaScript 파일의 출력 폴더를 지정합니다.
   • sourceMap 옵션은 컴파일러가 sourceMap 파일을 생성하는지 여부를 나타냅니다.

   이전 구성에서는 TypeScript 구성에 대한 기본 소개만 제공합니다. 다른 옵션에 대한 자세한 내용은 tsconfig.json참조하세요.

애플리케이션 빌드

1. TypeScript(.ts) 또는 TypeScript JSX(.tsx) 파일을 프로젝트에 추가한 다음 TypeScript 코드를 추가합니다. TypeScript의 간단한 예제는 다음과 같습니다.

   let message: string = 'Hello World';
   console.log(message);
   

2. package.json다음 스크립트를 사용하여 Visual Studio 빌드 및 정리 명령에 대한 지원을 추가합니다.

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   Webpack과 같은 타사 도구를 사용하여 빌드하려면 package.json 파일에 명령줄 빌드 스크립트를 추가할 수 있습니다.

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

   React 및 Webpack 구성 파일에서 Webpack을 사용하는 예제는 Node.js 및 React사용하여 웹앱 만들기를 참조하세요.

   TypeScript에서 Vue.js 사용하는 예제는 Vue.js 애플리케이션 만들기참조하세요.

3. 시작 페이지, Node.js 런타임 경로, 애플리케이션 포트 또는 런타임 인수와 같은 옵션을 구성해야 하는 경우 솔루션 탐색기에서 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 속성선택합니다.

   메모

   타사 도구를 구성할 때 Node.js 프로젝트는 웹 패키지 관리외부 웹 도구도구옵션프로젝트 및 솔루션에 구성된 경로를 사용하지 않습니다. 이러한 설정은 다른 프로젝트 형식에 사용됩니다.

4. 선택 후 > 빌드,빌드 솔루션.

   앱을 실행하면 앱이 자동으로 빌드됩니다. 그러나 빌드 프로세스 중에 다음이 발생할 수 있습니다.

   원본 맵을 생성한 경우, outDir 옵션에 지정된 폴더를 열고 생성된 *js.map 파일 및 생성된 *.js 파일을 찾을 수 있습니다.

   원본 맵 파일은 디버깅에 필요합니다.

애플리케이션 실행

빌드 작업 자동화

Visual Studio에서 Task Runner Explorer를 사용하여 npm 및 Webpack과 같은 타사 도구에 대한 작업을 자동화할 수 있습니다.

• NPM Task Runner - package.json정의된 npm 스크립트에 대한 지원을 추가합니다. 원사를 지원합니다.
• Webpack Task Runner - Webpack에 대한 지원을 추가합니다.

관련 콘텐츠

속성, React, Angular, Vue