TypeScript 리팩토링

소스 코드 리팩토링은 런타임 동작을 수정하지 않고 코드를 재구성하여 프로젝트의 품질과 유지 관리성을 향상시킬 수 있습니다. Visual Studio Code는 메서드 추출 및 변수 추출과 같은 리팩토링 작업을 지원하여 편집기 내에서 코드베이스를 개선합니다.

Visual Studio Code는 TypeScript 언어 서비스를 통해 TypeScript 리팩토링을 위한 기본 지원을 제공하며, 이 토픽에서는 TypeScript 언어 서비스를 사용하여 리팩토링 지원을 시연합니다.

이름 변경

가장 간단한 리팩토링 중 하나는 메서드 또는 변수의 이름을 바꾸는 것입니다. 커서 아래의 기호를 TypeScript 프로젝트 전체에서 바꾸려면 F2를 누릅니다.

Renaming a method

리팩터링

사용 가능한 TypeScript 리팩토링을 보려면 소스 코드 영역에 커서를 놓고 마우스 오른쪽 버튼을 클릭하여 편집기 컨텍스트 메뉴를 열고 **리팩토링**을 선택하거나 ⌃⇧R (Windows, Linux Ctrl+Shift+R)을 직접 누릅니다.

TypeScript refactoring

리팩토링에서 리팩토링에 대한 자세한 정보와 개별 리팩토링에 대한 바로가기 키를 구성하는 방법을 확인하십시오.

사용 가능한 TypeScript 리팩토링은 다음과 같습니다.

메서드 또는 함수로 추출 - 선택한 문 또는 식을 파일의 새 메서드 또는 새 함수로 추출합니다.

메서드로 추출 또는 함수로 추출 리팩토링을 선택한 후 추출된 메서드/함수의 이름을 입력합니다.
상수로 추출 - 선택한 식을 파일의 새 상수로 추출합니다.
인터페이스 또는 타입 별칭으로 타입 추출 - 선택한 복잡한 타입을 인터페이스 또는 타입 별칭으로 추출합니다.
새 파일로 이동 - 파일의 최상위 범위에 있는 하나 이상의 클래스, 함수, 상수 또는 인터페이스를 새 파일로 이동합니다. 새 파일의 이름은 선택한 기호의 이름을 기반으로 추론됩니다.
명명된 가져오기 및 네임스페이스 가져오기 간 변환 - 명명된 가져오기(import { Name } from './foo')와 네임스페이스 가져오기(import * as foo from './foo') 간에 변환합니다.
기본 내보내기 및 명명된 내보내기 간 변환 - export default를 사용하고 명명된 내보내기(export const Foo = ...)가 있는 경우를 변환합니다.
매개변수를 구조화된 객체로 변환 - 긴 인자 목록을 받는 함수를 단일 인자 객체를 받는 함수로 다시 작성합니다.
getter 및 setter 접근자 생성 - 선택한 클래스 속성에 대한 getter와 setter를 생성하여 캡슐화합니다.
함수 반환 타입 추론 - 함수에 명시적인 반환 타입 주석을 추가합니다.
화살표 함수에 중괄호 추가/제거 - 단일 줄 화살표 함수를 여러 줄로 변환하거나 그 반대로 변환합니다.

빠른 수정

빠른 수정은 간단한 코딩 오류를 해결하는 제안된 편집입니다. 빠른 수정 예시는 다음과 같습니다.

멤버 액세스에 누락된 this 추가.
오타가 있는 속성 이름 수정.
도달할 수 없는 코드 또는 사용되지 않는 가져오기 제거
선언

TypeScript 오류에 커서를 올리면 VS Code에 빠른 수정이 가능함을 나타내는 전구 아이콘이 표시됩니다. 전구를 클릭하거나 ⌘. (Windows, Linux Ctrl+.)를 눌러 사용 가능한 빠른 수정 및 리팩토링 목록을 표시합니다.

또한 코드 동작 위젯: 주변 빠른 수정 포함 (editor.codeActionWidget.includeNearbyQuickFixes)은 기본적으로 활성화된 설정으로, 해당 줄의 어느 위치에 커서가 있든 관계없이 ⌘. (Windows, Linux Ctrl+.) (명령 ID editor.action.quickFix)에서 가장 가까운 빠른 수정을 활성화합니다.

이 명령은 리팩토링되거나 빠른 수정을 통해 수정될 소스 코드를 강조 표시합니다. 일반 코드 작업 및 수정이 아닌 리팩토링은 여전히 커서 위치에서 활성화할 수 있습니다.

사용되지 않는 변수 및 도달할 수 없는 코드

if 문의 항상 true인 else 블록이나 참조되지 않은 가져오기와 같이 사용되지 않는 TypeScript 코드는 편집기에서 흐릿하게 표시됩니다.

Unreachable source code faded out

이 사용되지 않는 코드를 빠르게 제거하려면 커서를 그 위에 놓고 빠른 수정 명령(⌘. (Windows, Linux Ctrl+.))을 트리거하거나 전구를 클릭합니다.

사용되지 않는 코드의 흐리게 표시를 비활성화하려면 "editor.showUnused"를 false로 설정합니다. TypeScript에서만 사용되지 않는 코드의 흐리게 표시를 비활성화하려면 다음을 설정할 수도 있습니다.

"[typescript]": {
    "editor.showUnused":  false
},
"[typescriptreact]": {
    "editor.showUnused":  false
},

가져오기 정리

가져오기 정리 소스 코드 동작은 TypeScript 파일의 가져오기를 정렬하고 사용되지 않는 가져오기를 제거합니다.

소스 작업 컨텍스트 메뉴에서 또는 ⇧⌥O (Windows, Linux Shift+Alt+O) 바로가기 키를 사용하여 **가져오기 정리**를 실행할 수 있습니다.

TypeScript 파일을 저장할 때 가져오기 정리를 자동으로 수행할 수도 있습니다.

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

파일 이동 시 가져오기 업데이트

다른 파일에서 가져온 파일을 TypeScript 프로젝트에서 이동하거나 이름을 바꾸면 VS Code가 이동한 파일을 참조하는 모든 가져오기 경로를 자동으로 업데이트할 수 있습니다.

typescript.updateImportsOnFileMove.enabled 설정은 이 동작을 제어합니다. 유효한 설정 값은 다음과 같습니다.

"prompt" - 기본값입니다. 각 파일 이동 시 경로를 업데이트할지 묻습니다.
"always" - 항상 경로를 자동으로 업데이트합니다.
"never" - 경로를 자동으로 업데이트하지 않고 묻지도 않습니다.

저장 시 코드 작업

editor.codeActionsOnSave 설정을 통해 파일을 저장할 때 실행되는 코드 동작 세트를 구성할 수 있습니다. 예를 들어, 다음을 설정하여 저장 시 가져오기 정리를 활성화할 수 있습니다.

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

현재까지 지원되는 열거형은 다음과 같습니다.

"explicit" (기본값): 저장 시 명시적으로 코드 동작을 트리거합니다. true와 동일합니다.
always: 명시적으로 저장할 때와 창 또는 포커스 변경으로 인한 자동 저장 시 코드 작업을 트리거합니다.
never: 저장 시 코드 작업을 트리거하지 않습니다. false와 동일합니다.

editor.codeActionsOnSave를 실행할 코드 동작 배열로 설정하여 순서대로 실행할 수도 있습니다.

다음은 몇 가지 소스 동작입니다.

"organizeImports" - 저장 시 가져오기 정리를 활성화합니다.
"fixAll" - 저장 시 자동 수정은 모든 제공자(ESLint 포함)에 대해 한 번의 라운드에서 가능한 모든 수정을 계산합니다.
"fixAll.eslint" - ESLint에 대한 자동 수정만 수행합니다.
"addMissingImports" - 저장 시 누락된 모든 가져오기를 추가합니다.

자세한 내용은 TypeScript를 참조하십시오.

코드 제안

VS Code는 promise의 .then 호출 체인을 async 및 await를 사용하도록 변환하는 등 일반적인 코드 단순화를 자동으로 제안합니다.

제안을 비활성화하려면 "typescript.suggestionActions.enabled"를 false로 설정합니다.

다음 단계

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

TypeScript 편집 - VS Code의 TypeScript 편집 기능에 대해 알아봅니다.
TypeScript 디버깅 - TypeScript 프로젝트에 대한 디버거를 구성합니다.

12/10/2025