다음을 통해 공유


Visual Studio의 JavaScript 및 TypeScript

Visual Studio 2022는 JavaScript를 직접 사용할 뿐 아니라 특히 대규모로 프로젝트를 개발하는 경우 생산성과 효율성이 더 높은 JavaScript 개별 환경을 제공하도록 개발된 TypeScript 프로그래밍 언어를 사용하는 JavaScript 개발을 위한 풍부한 지원을 제공합니다. Visual Studio에서 다양한 애플리케이션 형식 및 서비스의 JavaScript 또는 TypeScript 코드를 작성할 수 있습니다.

JavaScript 언어 서비스

Visual Studio 2022의 JavaScript 환경은 TypeScript 지원을 제공하는 동일한 엔진으로 구동됩니다. 이 엔진은 향상된 기능 지원, 다양성 및 통합 기능을 즉시 제공합니다.

레거시 JavaScript Language Service로 복원하는 옵션은 더 이상 사용할 수 없습니다. 사용자는 새로운 JavaScript Language Service를 즉시 사용할 수 있습니다. 새 언어 서비스는 정적 분석으로 구동되는 TypeScript 언어 서비스만 기반으로 합니다. 이 서비스를 통해 향상된 도구를 제공할 수 있으므로, JavaScript 코드에서 형식 정의를 기반으로 하는 더 풍부한 IntelliSense의 이점을 활용할 수 있습니다. 새 서비스는 가볍고 레거시 서비스보다 더 적은 메모리를 사용하므로 코드 크기 조정에 따라 더 나은 성능을 제공합니다. 또한 더 큰 프로젝트를 처리하는 언어 서비스의 성능을 개선했습니다.

TypeScript 지원

기본적으로 Visual Studio 2022에서는 특정 프로젝트 구성 없이 IntelliSense를 지원하는 JavaScript 및 TypeScript 파일의 언어 지원을 제공합니다.

TypeScript를 컴파일하기 위해 Visual Studio는 프로젝트별로 사용할 TypeScript 버전을 선택할 수 있는 유연성을 제공합니다.

ASP.NET Core와 같은 MSBuild 컴파일 시나리오에서 TypeScript NuGet 패키지는 TypeScript 컴파일 지원을 프로젝트에 추가하는 데 권장되는 방법입니다. Visual Studio는 프로젝트에 TypeScript 파일을 처음 추가할 때 이 패키지를 추가하는 옵션을 제공합니다. 이 패키지는 NuGet 패키지 관리자를 통해 언제든지 사용할 수 있습니다. NuGet 패키지를 사용하는 경우 해당 언어 서비스 버전이 프로젝트의 언어 지원에 사용됩니다. 참고: 이 패키지의 지원되는 최소 버전은 3.6입니다.

Node.js 프로젝트와 같은 npm용으로 구성된 프로젝트는 TypeScript npm 패키지를 추가하여 TypeScript 언어 서비스의 고유한 버전을 지정할 수 있습니다. 지원되는 프로젝트에서 npm 관리자를 사용하여 버전을 지정할 수 있습니다. 참고: 이 패키지의 지원되는 최소 버전은 2.1입니다.

TypeScript SDK는 Visual Studio 2022에서 더 이상 사용되지 않습니다. SDK를 사용하는 기존 프로젝트는 NuGet 패키지를 사용하도록 업그레이드해야 합니다. 즉시 업그레이드할 수 없는 프로젝트의 경우 SDK는 Visual Studio Marketplace에서 계속 사용할 수 있으며 Visual Studio 설치 관리자에서 선택적 구성 요소로 사용할 수 있습니다.

Visual Studio 2022에서 개발된 프로젝트의 경우 다양한 플랫폼과 환경에서 이식성을 높이려면 TypeScript NuGet 또는 TypeScript npm 패키지를 사용하는 것이 좋습니다. 자세한 내용은 NuGet을 사용하여 TypeScript 코드 컴파일tsc를 사용하여 TypeScript 코드 컴파일을 참조하세요.

프로젝트 템플릿

Visual Studio 2022부터 JSPS(JavaScript 프로젝트 시스템)라는 새로운 JavaScript/TypeScript 프로젝트 유형(.esproj)이 제공됩니다. 이를 통해 Visual Studio에서 독립 실행형 Angular, React 및 Vue 프로젝트를 만들 수 있습니다. 프런트 엔드 프로젝트는 로컬 컴퓨터에 설치한 프레임워크 CLI 도구를 사용하여 생성되므로 템플릿 버전은 사용자에게 달려 있습니다. 기존 Node.js 프로젝트에서 새 프로젝트 시스템으로 마이그레이션하려면 Node.js 프로젝트 마이그레이션을 참조하세요. 새 프로젝트 유형에 대한 MSBuild 정보는 JSPS에 대한 MSBuild 속성을 참조하세요.

이러한 새 프로젝트 내에서는 JavaScript 및 TypeScript 단위 테스트를 실행하고, ASP.NET Core API 프로젝트를 쉽게 추가 및 연결하고, npm 관리자를 사용하여 npm 모듈을 다운로드할 수 있습니다. 시작하려면 빠른 시작 및 자습서 중 일부를 체크 아웃하세요. 자세한 내용은 Visual Studio 자습서 | JavaScript 및 TypeScript를 참조하세요.

참고 항목

간소화되고 업데이트된 템플릿은 Visual Studio 2022 버전 17.5부터 사용할 수 있습니다. Visual Studio에서 사용할 수 있는 ASP.NET SPA 템플릿과 비교하여 ASP.NET Core용 .esproj SPA 템플릿은 더 나은 npm 종속성 관리와 더 나은 빌드 및 게시 지원을 제공합니다.

Visual Studio 2019는 JavaScript를 직접 사용할 뿐 아니라 특히 대규모로 프로젝트를 개발하는 경우 생산성과 효율성이 더 높은 JavaScript 개별 환경을 제공하도록 개발된 TypeScript 프로그래밍 언어를 사용하는 JavaScript 개발을 위한 풍부한 지원을 제공합니다. Visual Studio에서 다양한 애플리케이션 형식 및 서비스의 JavaScript 또는 TypeScript 코드를 작성할 수 있습니다.

JavaScript 언어 서비스

Visual Studio 2019의 JavaScript 환경은 TypeScript 지원을 제공하는 동일한 엔진으로 구동됩니다. 이 덕분에 향상된 기능 지원, 다양성 및 통합 기능을 즉시 사용할 수 있습니다.

레거시 JavaScript Language Service로 복원하는 옵션은 더 이상 사용할 수 없습니다. 사용자는 이제 새로운 JavaScript Language Service를 즉시 사용할 수 있습니다. 새 언어 서비스는 정적 분석으로 구동되는 TypeScript 언어 서비스만 기반으로 합니다. 이를 통해 향상된 도구를 제공할 수 있으므로, JavaScript 코드에서 형식 정의를 기반으로 하는 더 풍부한 IntelliSense를 활용할 수 있습니다. 새 서비스는 가볍고 레거시 서비스보다 더 적은 메모리를 사용하므로 코드 크기 조정에 따라 더 나은 성능을 제공합니다. 또한 더 큰 프로젝트를 처리하는 언어 서비스의 성능을 개선했습니다.

TypeScript 지원

Visual Studio 2019는 TypeScript 컴파일을 프로젝트에 통합하는 다음과 같은 여러 가지 옵션을 제공합니다.

  • TypeScript NuGet 패키지. TypeScript 3.2 이상용 NuGet 패키지가 프로젝트에 설치되면 해당 버전의 TypeScript 언어 서비스가 편집기에 로드됩니다.
  • TypeScript npm 패키지. TypeScript 2.1 이상용 npm 패키지가 프로젝트에 설치되면 해당 버전의 TypeScript 언어 서비스가 편집기에 로드됩니다.
  • Visual Studio 설치 관리자에서 기본적으로 제공되고 VS Marketplace에서 독립 실행형 SDK 다운로드로 제공되는 TypeScript SDK.

Visual Studio 2019에서 개발된 프로젝트의 경우 다양한 플랫폼과 환경에서 이식성을 높이려면 TypeScript NuGet 또는 TypeScript npm 패키지를 사용하는 것이 좋습니다. 자세한 내용은 NuGet을 사용하여 TypeScript 코드 컴파일tsc를 사용하여 TypeScript 코드 컴파일을 참조하세요.

프로젝트

UWP JavaScript 앱은 Visual Studio 2019에서 더 이상 지원되지 않습니다. JavaScript UWP 프로젝트(확장명이 .jsproj인 파일)는 만들거나 열 수 없습니다. Windows에서 제대로 실행되는 PWA(프로그레시브 웹앱)를 만드는 방법에 대한 설명서를 사용하여 자세히 알아볼 수 있습니다.