JavaScript IntelliSenseJavaScript IntelliSense

Visual Studio 2017Visual Studio 2017에서는 즉시 사용 가능한 강력한 JavaScript 편집 환경을 제공합니다. provides a powerful JavaScript editing experience right out of the box. TypeScript 기반 언어 서비스로 제공되는 Visual Studio는 더 다양한 IntelliSense, 최신 JavaScript 기능 지원 및 정의로 이동, 리팩터링 등의 향상된 생산성 기능을 제공합니다.Powered by a TypeScript based language service, Visual Studio delivers richer IntelliSense, support for modern JavaScript features, and improved productivity features such as Go to Definition, refactoring, and more.

참고

Visual Studio 2017Visual Studio 2017의 JavaScript 언어 서비스에는 새로운 언어 서비스용 엔진("salsa")이 사용됩니다.The JavaScript language service in Visual Studio 2017Visual Studio 2017 uses a new engine for the language service ("salsa"). 자세한 내용은 이 항목에 포함되어 있고 이 블로그 게시물을 참조할 수 있습니다.Details are included here in this topic, and you might also want to read this blog post. 새 편집 환경은 일반적으로 VS 코드에서도 적용됩니다.The new editing experience also mostly applies in VS Code. 자세한 내용은 VS 코드 문서를 참조하세요.See the VS Code docs for more info.

Visual StudioVisual Studio의 일반 IntelliSense 기능에 대한 자세한 내용은 IntelliSense 사용을 참조하세요.For more information about the general IntelliSense functionality of Visual StudioVisual Studio, see Using IntelliSense.

Visual Studio 2017Visual Studio 2017 JavaScript 언어 서비스의 새로운 기능What's New in the JavaScript language service in Visual Studio 2017Visual Studio 2017

Visual Studio 2017Visual Studio 2017의 JavaScript IntelliSense는 이제 매개 변수 및 멤버 목록에 대한 훨씬 더 많은 정보를 표시합니다.JavaScript IntelliSense in Visual Studio 2017Visual Studio 2017 will now display a lot more information on parameter and member lists. 이 새로운 정보는 코드를 더 잘 이해하도록 내부에서 정적 분석으로 사용하는 TypeScript 언어 서비스를 통해 제공됩니다.This new information is provided by the TypeScript language service, which uses static analysis behind the scenes to better understand your code. TypeScript는 여러 소스를 사용하여 이 정보를 구성합니다.TypeScript uses several sources to build up this information:

형식 유추 기반 IntelliSenseIntelliSense based on type inference

JavaScript에서는 일반적으로 명시적 형식 정보를 사용할 수 없습니다.In JavaScript, most of the time there is no explicit type information available. 다행히도 주변 코드 컨텍스트가 있는 경우 일반적으로 형식을 쉽게 알아낼 수 있습니다.Luckily, it is usually fairly easy to figure out a type given the surrounding code context. 이 프로세스를 형식 유추라고 합니다.This process is called type inference.

일반적으로 변수 또는 속성의 형식은 초기화에 사용된 값 또는 가장 최근 값 할당의 형식입니다.For a variable or property, the type is typically the type of the value used to initialize it or the most recent value assignment.

var nextItem = 10;
nextItem; // here we know nextItem is a number

nextItem = "box";
nextItem; // now we know nextItem is a string

함수의 반환 형식은 return 문에서 유추할 수 있습니다.For a function, the return type can be inferred from the return statements.

함수 매개 변수의 경우 현재 유추가 없지만 JSDoc 또는 TypeScript .d.ts 파일을 사용하여 이 문제를 해결할 수 있습니다(이후 섹션 참조).For function parameters, there is currently no inference, but there are ways to work around this using JSDoc or TypeScript .d.ts files (see later sections).

또한 다음에 대한 특수 유추가 있습니다.Additionally, there is special inference for the following:

  • "ES3-style" 클래스 - 프로토타입 속성에 대한 생성자 함수 및 할당을 사용하여 지정됩니다."ES3-style" classes, specified using a constructor function and assignments to the prototype property.
  • CommonJS-style 모듈 패턴 - exports 개체의 속성 할당 또는 module.exports 속성에 대한 할당으로 지정됩니다.CommonJS-style module patterns, specified as property assignments on the exports object, or assignments to the module.exports property.
function Foo(param1) {
    this.prop = param1;
}
Foo.prototype.getIt = function () { return this.prop; };
// Foo will appear as a class, and instances will have a 'prop' property and a 'getIt' method.

exports.Foo = Foo;
// This file will appear as an external module with a 'Foo' export.
// Note that assigning a value to "module.exports" is also supported.

JSDoc 기반 IntelliSense IntelliSense based on JSDoc

형식 유추에서 원하는 형식 정보(또는 지원 문서 정보)가 제공되지 않으면 JSDoc 주석을 통해 명시적으로 형식 정보를 제공할 수 있습니다.Where type inference does not provide the desired type information (or to support documentation), type information may be provided explicitly via JSDoc annotations. 예를 들어 부분적으로 선언된 개체에 특정 형식을 제공하려면 다음과 같이 @type 태그를 사용할 수 있습니다.For example, to give a partially declared object a specific type, you can use the @type tag as shown below:

/**
 * @type {{a: boolean, b: boolean, c: number}}
 */
var x = {a: true};
x.b = false;
x. // <- "x" is shown as having properties a, b, and c of the types specified

설명한 것처럼 함수 매개 변수는 유추되지 않습니다.As mentioned, function parameters are never inferred. 그러나 JSDoc @param 태그를 사용하여 함수 매개 변수에 형식을 추가할 수도 있습니다.However, using the JSDoc @param tag you can add types to function parameters as well.

/**
 * @param {string} param1 - The first argument to this function
 */
function Foo(param1) {
    this.prop = param1; // "param1" (and thus "this.prop") are now of type "string".
}

현재 지원되는 JsDoc 주석은 이 문서를 참조하세요.See this doc for the JsDoc annotations currently supported.

TypeScript 선언 파일 기반 IntelliSense IntelliSense based on TypeScript Declaration Files

JavaScript 및 TypeScript는 이제 같은 언어 서비스에 기반을 두므로 더 다양한 방법으로 조작할 수 있습니다.Because JavaScript and TypeScript are now based on the same language service, they are able to interact in a richer way. 예를 들어 JavaScript IntelliSense는 .d.ts 파일에 선언된 값에 대해 제공될 수 있고(추가 정보) TypeScript에 선언된 인터페이스 및 클래스 등의 형식은 JsDoc 주석에서 형식으로 사용할 수 있습니다.For example, JavaScript IntelliSense can be provided for values declared in a .d.ts file (more info), and types such as interfaces and classes declared in TypeScript are available for use as types in JsDoc comments.

다음 내용은 JsDoc 태그를 사용하는 같은 프로젝트에서 인터페이스를 통해 이 형식 정보를 JavaScript 파일에 제공하는 TypeScript 정의 파일의 간단한 예제입니다.Below, we show a simple example of a TypeScript definition file providing such type information (via an interface) to a JavaScript file in the same project (using a JsDoc tag).

JavaScript에서 사용되는 TypeScript 선언TypeScript declarations used in JavaScript

형식 정의의 자동 획득 Automatic acquisition of type definitions

TypeScript 환경에서 가장 인기 있는 JavaScript 라이브러리에는 .d.ts 파일을 통해 설명되는 API가 있고 해당 정의의 가장 일반적인 리포지토리는 DefinitelyTyped에 있습니다.In the TypeScript world, most popular JavaScript libraries have their APIs described by .d.ts files, and the most common repository for such definitions is on DefinitelyTyped.

기본적으로 Salsa 언어 서비스는 어떤 JavaScript 라이브러리가 사용 중인지 검색하고, 더 다양한 IntelliSense를 제공하기 위해 라이브러리를 설명하는 해당 .d.ts 파일을 자동으로 다운로드하여 참조합니다.By default, the Salsa language service will try to detect which JavaScript libraries are in use and automatically download and reference the corresponding .d.ts file that describes the library in order to provide richer IntelliSense. 파일은 %LOCALAPPDATA%\Microsoft\TypeScript의 사용자 폴더 아래에 있는 캐시에 다운로드됩니다.The files are downloaded to a cache located under the user folder at %LOCALAPPDATA%\Microsoft\TypeScript.

참고

tsconfig.json 구성 파일을 사용할 경우 이 기능은 기본적으로 사용되지 않지만 아래 추가로 설명된 대로 사용되도록 설정할 수 있습니다.This feature is disabled by default if using a tsconfig.json configuration file, but may be set to enabled as outlined further below).

현재 자동 검색은 npm에서 다운로드된 종속성(package.json 파일 읽기 수행), Bower(bower.json 파일 읽기 수행) 및 대략 상위 400개의 가장 인기 있는 JavaScript 라이브러리 목록과 일치하는 프로젝트의 느슨한 파일에 적용됩니다.Currently auto-detection works for dependencies downloaded from npm (by reading the package.json file), Bower (by reading the bower.json file), and for loose files in your project that match a list of roughly the top 400 most popular JavaScript libraries. 예를 들어 프로젝트에 jquery-1.10.min.js가 있는 경우 더 나은 편집 환경을 제공하기 위해 jquery.d.ts 파일이 페치 및 다운로드됩니다.For example, if you have jquery-1.10.min.js in your project, the file jquery.d.ts will be fetched and loaded in order to provide a better editing experience. .d.ts 파일은 프로젝트에 영향을 미치지 않습니다.This .d.ts file will have no impact on your project.

자동 획득을 사용하지 않으려면 다음 설명대로 구성 파일을 추가하여 기능을 사용하지 않도록 설정합니다.If you do not wish to use auto-acquisition, disable it by adding a configuration file as outlined below. 사용할 정의 파일을 직접 프로젝트 내에 수동으로 배치할 수 있습니다.You can still place definition files for use directly within your project manually.