Ch.12 IDE 기능 사용

타입스크립트의 가장 큰 장점은 코드를 위한 강력한 개발 도우미 제품군을 제공한다는 것이다.

12.1 코드 탐색

타입스크립트에서 제공하는 많은 기능은 코드 학습에 맞춰져 있다. (? 뭔말이누)

12.1.1 정의 찾기

타입스크립트는 타입 정의 또는 값에 대한 참조에서 시작해 코드의 원래 위치로 다시 이동할 수 있다. VS Code는 이러한 방식으로 역추적하는 몇 가지 방법을 제공한다.

[Go to Type Definition]은 [Go to Definition]의 특수 버전으로, 값의 타입을 나타내는 정의로 이동한다. 클래스 또는 인터페이스의 인스턴스에 이 기능을 실행하는 경우, 인스턴스가 정의된 위치 대신 클래스 또는 인터페이스 자체를 표시한다.

12.1.2 참조 찾기

[Go to Reference]를 선택하면 마우스 오른쪽으로 클릭한 이름 바로 아래에 확장 가능한 Peek 상자가 나타나고, 해당 타입 정의 또는 값의 참조 목록을 보여준다.

12.1.3 구현 찾기

[Go to Implementations]와 [Find All Implementations]는 인터페이스와 추상 클래스 메서드를 위해 만들어진 [Go to Reference]와 [Find All Reference]의 특수 버전이다. 코드에서 인터페이스 또는 추상 메서드의 모든 구현을 찾는다. 이 두 메뉴는 클래스 또는 인터페이스와 같은 타입으로 입력된 값이 어떻게 사용되는지를 구체적으로 검색할 때 특히 유용하다.

12.2 코드 작성

VS Code와 같이 IDE 언어 서비스는 편집기의 백그라운드에서 실행되고 파일에서 수행된 작업에 반응한다.

IDE는 변경 내용을 파일에 저장하기 전 사용자가 입력한 파일의 편집 내용을 볼 수 있는데 이를 통해 일반적인 작업의 자동화에 도움이 되는 다양한 기능을 제공한다.

12.2.1 이름 완성하기

타입스크립트의 API를 이용하면 동일한 파일에 존재하는 이름을 자동 완성할 수 있다. 타입스크립트는 일치하는 이름을 가진 변수 목록으로 자동 완성을 제안한다.

또한 패키지 의존성에 대해서도 자동 가져오기를 제공한다.

자동 가져오기는 자동 완성을 통해 이것이 어디에서 왔는지 파악할 수 있고, 직접 입력하는 수고로운 과정도 크게 단축시켜준다. 마찬가지로 타입이 지정된 값에서 속성 이름을 입력하기 시작하면 편집기는 해당 타입의 알려진 속성을 자동완성하도록 제안한다.

12.2.2 자동 가져오기 업데이트

파일 이름을 바꾸거나 다른 폴더로 파일을 이동하는 경우, 파일과 관련된 많은 import 문을 업데이트해야 한다.

VS Code 파일 탐색기를 사용해 파일을 드래그 앤 드롭하거나 중첩된 폴더 경로로 이름을 바꾸면, VS Code에서 타입스크립트를 사용해 파일 경로를 업데이트하도록 제안한다.

12.2.3 코드 액션

타입스크립트의 많은 IDE 유틸리티는 직접 실행할 수 있는 액션으로 제공된다. 현재 편집 중인 파일만 수정하는 액션도 있고, 한 번에 많은 파일을 수정할 수 있는 액션도 있다. 이러한 코드 액션을 사용하면 import 경로를 계산하거나 리팩터링 같은 많은 수작업을 타입스크립트가 수행하도록 지시할 수 있다.

이름 바꾸기

함수, 인터페이스 또는 변수의 이름처럼 이미 존재하는 이름을 수동으로 변경하는 작업은 상당히 번거롭다. 타입스크립트는 이름에 대한 모든 참조를 업데이트하는 이름 바꾸기를 수행할 수 있다.

메뉴의 [Rename Symbol] 옵션을 선택하면 새 이름을 선택할 수 있는 텍스트 상자가 나타난다. 이 상자에 새 이름을 적고 Enter를 누르면 입력된 이름이 적용된다.

사용하지 않는 코드 제거

많은 IDE는 사용되지 않는 코드를 시각적으로 미묘하게 다르게 나타내곤 한다. 타입스크립트는 사용하지 않는 코드를 삭제하는 코드 액션을 제공한다.

기타 빠른 수정

대부분의 타입스크립트 오류 메시지는 키워드 또는 변수 이름 오타처럼 빠르게 수정할 수 있는 사소한 코드에 대한 내용이다. 그 외 유용한 타입스크립트의 빠른 수정 기능은 다음과 같다.

• 클래스 또는 인터페이스에서 누락된 속성 선언하기

• 잘못 입력된 필드 이름 수정하기

• 타입으로 선언된 변수의 누락된 속성 채우기

12.3 오류를 효과적으로 처리하기

12.3.1 언어 서비스 오류

편집기는 타입스크립트 언어 서비스에서 보고한 모든 오류를 코드 아래 빨간 물결선으로 표시한다. 해당 문자 위로 마우스를 올리면 오류 텍스트를 담은 호버 상자가 나타난다.

또한 VS Code는 패널 영역의 [PROBLEMS] 탭에 열려 있는 모든 파일에 대한 오류도 보여준다.

오류를 클릭하면 텍스트 커서가 문제가 되는 행과 열로 이동한다.

이를 참고해 오류를 확인하고 수정하자.

터미널 컴파일러 실행

타입스크립트 프로젝트에서 작업하는 동안 터미널에서 타입스크립트 컴파일러 watch 모드로 실행하는 것이 좋다. 그렇게하면 모든 오류에 대한 실시간 업데이트 목록이 제공된다.

터미널을 열고, tsc-w를 입력하면 실행할 수 있다.

타입 이해

때로는 타입이 명확하지 않은 방식으로 설정된 무언가의 타입을 알아야 하는 경우가 있다. 모든 값에 대해 이름 위로 마우스를 가져가면 해당 타입을 보여주는 호버 정보가 나타난다. 이름이 선언된 위치를 표시하려면 [Ctrl]을 누른 상태로 마우스를 가져간다.

호버 상자는 타입 별칭 같은 타입에서도 사용 가능하다.

복잡한 타입의 구성 요소를 이해할 때 유용한 한 가지 전략은 타입의 한 구성 요소를 나타내는 타입 별칭을 만드는 것이다. 그 다음 타입 별칭 위로 마우스를 가져가 해당 타입 결과가 무엇인지 확인한다.

12.4 마치며

• 타입과 값에서 사용 가능한 다양한 명령어

• 정의, 참조, 구현을 찾아 코드 탐색하기

• 이름 완성 및 자동 가져오기로 코드 작성 자동화하기

• 이름 바꾸기와 리팩터링을 포함한 추가 코드 액션

• 언어 서비스 오류를 확인하고 이해할 때 유용한 전략 소개

• 타입 이해에 유용한 전략 소개