TypeScript 편집

Visual Studio Code는 TypeScript에 대한 훌륭한 편집 지원을 제공합니다. 이 문서에서는 VS Code에 내장된 편집 및 프로그래밍 언어 기능에 대해 자세히 알아봅니다. 키보드 단축키, 다중 커서, 검색, 찾기 및 바꾸기와 같은 VS Code의 일반적인 편집 기능에 대해 더 알고 싶다면 기본 편집을 읽어보세요.

IntelliSense

IntelliSense는 지능형 코드 완성, 호버 정보 및 서명 도움말을 제공하여 코드를 더 빠르고 정확하게 작성할 수 있도록 합니다.

VS Code는 개별 TypeScript 파일 및 TypeScript tsconfig.json 프로젝트에 대한 IntelliSense를 제공합니다.

호버 정보

TypeScript 기호 위로 마우스를 가져가면 유형 정보 및 관련 문서를 빠르게 확인할 수 있습니다.

⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) 키보드 단축키를 사용하여 현재 커서 위치에서 호버 정보를 표시할 수도 있습니다.

시그니처 도움말

TypeScript 함수 호출을 작성하면 VS Code는 함수 서명에 대한 정보를 표시하고 현재 완성 중인 매개변수를 강조 표시합니다.

함수 호출 내에서 ( 또는 ,를 입력하면 서명 도움말이 자동으로 표시됩니다. ⇧⌘Space (Windows, Linux Ctrl+Shift+Space)를 사용하여 서명 도움말을 수동으로 트리거합니다.

코드 조각

VS Code에는 입력 시 제안되는 기본 TypeScript 스니펫이 포함되어 있습니다.

확장 프로그램을 설치하여 추가 스니펫을 가져오거나 TypeScript에 대한 자체 스니펫을 정의할 수 있습니다. 자세한 내용은 사용자 정의 스니펫을 참조하세요.

인라인 힌트

Inlay 힌트는 소스 코드에 추가적인 인라인 정보를 추가하여 코드가 무엇을 하는지 이해하는 데 도움을 줍니다.

매개변수 이름 Inlay 힌트는 함수 호출에서 매개변수 이름을 표시합니다.

이를 통해 각 인수의 의미를 한눈에 이해하는 데 도움이 되며, 특히 부울 플래그를 사용하거나 매개변수를 혼동하기 쉬운 함수에 유용합니다.

매개변수 이름 힌트를 활성화하려면 typescript.inlayHints.parameterNames.enabled를 설정하세요. 세 가지 가능한 값이 있습니다.

• none — 매개변수 Inlay 힌트를 비활성화합니다.
• literals — 리터럴(문자열, 숫자, 부울)에 대해서만 Inlay 힌트를 표시합니다.
• all — 모든 인수에 대해 Inlay 힌트를 표시합니다.

변수 타입 인라인 힌트는 명시적인 타입 주석이 없는 변수의 타입을 표시합니다.

설정: typescript.inlayHints.variableTypes.enabled

속성 타입 인라인 힌트는 명시적인 타입 주석이 없는 클래스 속성의 타입을 표시합니다.

설정: typescript.inlayHints.propertyDeclarationTypes.enabled

매개변수 타입 힌트는 암시적으로 타입이 지정된 매개변수의 타입을 표시합니다.

설정: typescript.inlayHints.parameterTypes.enabled

반환 타입 인라인 힌트는 명시적인 타입 주석이 없는 함수의 반환 타입을 표시합니다.

설정: typescript.inlayHints.functionLikeReturnTypes.enabled

참조 CodeLens

TypeScript 참조 CodeLens는 클래스, 인터페이스, 메서드, 속성 및 내보낸 개체에 대한 참조 수를 인라인으로 표시합니다.

사용자 설정 파일에서 "typescript.referencesCodeLens.enabled": true를 설정하여 이 기능을 활성화할 수 있습니다.

참조 수를 클릭하면 참조 목록을 빠르게 탐색할 수 있습니다.

구현 CodeLens

TypeScript 구현 CodeLens는 인터페이스 구현자 수를 표시합니다.

"typescript.implementationsCodeLens.enabled": true를 설정하여 이 기능을 활성화할 수 있습니다.

참조 CodeLens와 마찬가지로 구현 수를 클릭하면 모든 구현 목록을 빠르게 탐색할 수 있습니다.

자동 가져오기

자동 가져오기는 사용 가능한 기호를 찾는 데 도움을 주고 자동으로 가져오기를 추가하여 코딩 속도를 높입니다.

입력을 시작하면 현재 프로젝트에서 사용 가능한 모든 TypeScript 기호에 대한 제안이 표시됩니다.

다른 파일이나 모듈의 제안을 선택하면 VS Code가 자동으로 해당 가져오기를 추가합니다. 이 예에서는 VS Code가 파일 상단에 Hercules에 대한 가져오기를 추가합니다.

"typescript.suggest.autoImports": false를 설정하여 자동 가져오기를 비활성화할 수 있습니다.

붙여넣을 때 가져오기 추가

편집기 간에 코드를 복사하여 붙여넣을 때 VS Code는 코드가 붙여넣어질 때 자동으로 가져오기를 추가할 수 있습니다. 정의되지 않은 기호를 포함하는 코드를 붙여넣으면 붙여넣기 컨트롤이 표시되어 일반 텍스트로 붙여넣거나 가져오기를 추가하는 옵션을 선택할 수 있습니다.

이 기능은 기본적으로 활성화되어 있지만 typescript.updateImportsOnPaste.enabled 설정을 토글하여 비활성화할 수 있습니다.

text.updateImports.jsts 또는 text.updateImports를 포함하여 붙여넣을 때 항상 가져오기를 추가하도록 editor.pasteAs.preferences 설정을 구성하여 붙여넣기 제어 없이 가져오기로 붙여넣기를 기본 동작으로 만들 수 있습니다.

JSX 및 자동 닫기 태그

VS Code의 TypeScript 기능은 JSX에서도 작동합니다. TypeScript에서 JSX를 사용하려면 일반 *.ts 대신 *.tsx 파일 확장자를 사용하세요.

VS Code에는 TypeScript에서 JSX 태그 자동 닫기와 같은 JSX별 기능도 포함되어 있습니다.

"typescript.autoClosingTags"를 false로 설정하여 JSX 태그 닫기를 비활성화합니다.

JSDoc 지원

VS Code의 TypeScript IntelliSense는 많은 표준 JSDoc 주석을 이해하고 이를 사용하여 제안, 호버 정보 및 서명 도움말에서 유형 정보 및 문서를 표시합니다.

TypeScript 코드에 JSDoc을 사용할 때는 유형 주석을 포함하지 않아야 합니다. TypeScript 컴파일러는 TypeScript 유형 주석만 사용하고 JSDoc의 주석은 무시합니다.

TypeScript에서 JSDoc 주석 제안을 비활성화하려면 "typescript.suggest.completeJSDocs": false를 설정하세요.

코드 탐색

코드 탐색을 통해 TypeScript 프로젝트를 빠르게 탐색할 수 있습니다.

• 정의로 이동 F12 - 기호 정의의 소스 코드로 이동합니다.
• 정의 보기 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - 기호 정의를 보여주는 보기 창을 엽니다.
• 참조로 이동 ⇧F12 (Windows, Linux Shift+F12) - 기호에 대한 모든 참조를 표시합니다.
• 타입 정의로 이동 - 기호를 정의하는 타입으로 이동합니다. 클래스 인스턴스의 경우 인스턴스가 정의된 위치가 아닌 클래스 자체를 표시합니다.
• 구현으로 이동 ⌘F12 (Windows, Linux Ctrl+F12) - 인터페이스 또는 추상 메서드의 구현으로 이동합니다.

기호로 이동 명령을 사용하여 기호 검색을 통해 탐색할 수 있습니다. 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서.

• 파일 내 기호로 이동 ⇧⌘O (Windows, Linux Ctrl+Shift+O)
• 작업 영역 내 기호로 이동 ⌘T (Windows, Linux Ctrl+T)

서식

VS Code에는 합리적인 기본값으로 기본적인 코드 서식을 제공하는 TypeScript 서식 지정 도구가 포함되어 있습니다.

typescript.format.* 설정을 사용하여 기본 서식 지정 도구를 구성할 수 있습니다. 예를 들어 중괄호를 별도의 줄에 표시할 수 있습니다. 또는 기본 서식 지정 도구가 방해가 되는 경우 "typescript.format.enable"을 false로 설정하여 비활성화할 수 있습니다.

더 전문적인 코드 서식 지정 스타일을 원하면 VS Code 마켓플레이스에서 서식 지정 확장 프로그램 중 하나를 설치해 보세요.

구문 강조 및 의미론적 강조

구문 강조 외에도 TypeScript 및 JavaScript는 의미론적 강조도 제공합니다.

구문 강조는 어휘 규칙에 따라 텍스트의 색상을 지정합니다. 의미론적 강조는 언어 서비스의 해결된 기호 정보를 기반으로 구문 색상을 보강합니다.

의미론적 강조 표시가 보이는지 여부는 현재 색상 테마에 따라 다릅니다. 각 테마는 의미론적 강조 표시를 표시할지 여부와 의미론적 토큰의 스타일을 지정하는 방법을 구성할 수 있습니다.

의미론적 강조 표시가 활성화되어 있고 색상 테마에 해당 스타일 규칙이 정의되어 있으면 다른 색상과 스타일을 볼 수 있습니다.

의미론적 강조 표시는 다음과 같은 내용에 따라 색상을 변경할 수 있습니다.

• 기호의 해결된 유형: 네임스페이스, 변수, 속성, 변수, 클래스, 인터페이스, 유형 매개변수.
• 변수/속성이 읽기 전용(const)인지 수정 가능한지 여부.
• 변수/속성 유형이 호출 가능한지(함수 유형) 여부.

다음 단계

자세한 내용은 계속 읽어보세요.

• TypeScript 리팩터링 - TypeScript에서 사용할 수 있는 유용한 리팩터링에 대해 알아봅니다.
• TypeScript 디버깅 - TypeScript 프로젝트에 대한 디버거를 구성합니다.