다음을 통해 공유

JavaScript IntelliSense

  • 아티클

Visual Studio는 즉시 강력한 JavaScript 편집 환경을 제공합니다. TypeScript 기반 언어 서비스에서 제공하는 Visual Studio는 풍부한 IntelliSense, 최신 JavaScript 기능 지원, 정의로 이동, 리팩터링 등의 생산성 기능을 제공합니다.

Visual Studio의 일반적인 IntelliSense 기능에 대한 자세한 내용은 IntelliSense 사용하는참조하세요.

JavaScript IntelliSense는 매개 변수 및 멤버 목록에 대한 정보를 표시합니다. 이 정보는 코드의 이해를 높이기 위해 백그라운드에서 정적 분석을 사용하는 TypeScript 언어 서비스에서 제공합니다.

TypeScript는 여러 원본을 사용하여 이 정보를 빌드합니다.

형식 유추를 기반으로 하는 IntelliSense

JavaScript에서는 대부분의 경우 사용 가능한 명시적 형식 정보가 없습니다. 다행히 주변 코드 컨텍스트를 고려할 때 형식을 쉽게 파악할 수 있습니다. 이 프로세스를 형식 유추라고 합니다.

변수 또는 속성의 경우 형식은 일반적으로 초기화하는 데 사용되는 값의 형식 또는 가장 최근의 값 할당입니다.

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

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

함수의 경우 반환 문에서 반환 형식을 유추할 수 있습니다.

함수 매개 변수의 경우 현재 유추가 없지만 JSDoc 또는 TypeScript .d.ts 파일을 사용하여 이를 해결하는 방법이 있습니다(이후 섹션 참조).

또한 다음과 같은 특별한 유추가 있습니다.

  • 생성자 함수 및 프로토타입 속성에 대한 할당을 사용하여 지정된 "ES3 스타일" 클래스입니다.
  • exports 개체의 속성 할당 또는 module.exports 속성에 대한 할당으로 지정된 CommonJS 스타일 모듈 패턴입니다.
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

형식 유추가 원하는 형식 정보(또는 설명서 지원)를 제공하지 않는 경우 형식 정보는 JSDoc 주석을 통해 명시적으로 제공될 수 있습니다. 예를 들어 부분적으로 선언된 개체에 특정 형식을 지정하려면 아래와 같이 @type 태그를 사용할 수 있습니다.

/**
 * @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

언급했듯이 함수 매개 변수는 유추되지 않습니다. 그러나 JSDoc @param 태그를 사용하여 함수 매개 변수에도 형식을 추가할 수 있습니다.

/**
 * @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 주석에 대한 내용을 보시려면 JavaScript 파일 형식 검사의 JSDoc 정보를 참조하세요.

TypeScript 선언 파일을 기반으로 하는 IntelliSense

JavaScript 및 TypeScript는 동일한 언어 서비스를 기반으로 하므로 풍부한 방식으로 상호 작용할 수 있습니다. 예를 들어 javaScript IntelliSense는 .d.ts 파일에 선언된 값(TypeScript 설명서참조)에 대해 제공될 수 있으며 TypeScript에 선언된 인터페이스 및 클래스와 같은 형식은 JSDoc 주석의 형식으로 사용할 수 있습니다.

아래에서는 인터페이스를 통해 이러한 형식 정보를 동일한 프로젝트의 JavaScript 파일(JSDoc 태그 사용)에 제공하는 TypeScript 정의 파일의 간단한 예제를 보여 줍니다.

typeScript 정의 파일TypeScript definition fileTypeScript definition file

형식 정의 자동 획득

TypeScript 세계에서 가장 인기 있는 JavaScript 라이브러리에는 .d.ts 파일에서 설명하는 API가 있으며, 이러한 정의에 대한 가장 일반적인 리포지토리는 DefinitelyTyped있습니다.

기본적으로 언어 서비스는 사용 중인 JavaScript 라이브러리를 검색한 다음, 더 풍부한 IntelliSense를 제공하기 위해 라이브러리를 설명하는 해당 .d.ts 파일을 자동으로 다운로드하고 참조합니다. 파일은 %LOCALAPPDATA%\Microsoft\TypeScript있는 사용자 폴더 아래에 있는 캐시에 다운로드됩니다.

메모

이 기능은 tsconfig.json 구성 파일을 사용하는 경우 기본적으로 사용하지 않도록 있지만 아래에 설명된 대로 사용하도록 설정할 수 있습니다.

현재 자동 검색은 npm에서 다운로드한 종속성(package.json 파일을 읽음), Bower(bower.json 파일을 읽음) 및 가장 인기 있는 약 400개의 JavaScript 라이브러리 목록과 일치하는 프로젝트의 느슨한 파일에 대해 작동합니다. 예를 들어 프로젝트에 jquery-1.10.min.js이 있는 경우, 더 나은 편집 환경을 제공하기 위해 파일 jquery.d.ts를 가져와서 로드됩니다. 이 .d.ts 파일은 프로젝트에 영향을 주지 않습니다.

관련 콘텐츠