IDE 기능 사용

VSCode 기준 설명

코드 탐색

정의 찾기

• Go to Definition(F12)는 요청된 이름이 원래 정의된 위치로 즉시 이동
• Cmd / Ctrl + 이름을 클릭하면 정의된 곳으로 이동
• Peek > Peek Definition(Option(맥) / Alt(윈도우) + F12)는 정의를 보여주는 Peek 상자를 불러옴.

참조 찾기

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

• Find All References( Option / Alt + shift + F12)도 참조 목록을 보여주지만, 코드 탐색 후에도 사이드바 뷰에서 확인 가능. 한 번에 둘 이상의 참조를 열거나 수행에 유용.

구현 찾기

• go to Implementations( Cmd / Ctrl + F12) 와 Find All Implementations 는 인터페이스와 추상 클래스 메서드를 위해 만들어진 Go to Refereces와 Find All References의 특수 버전. 코드에서 인터페이스 또는 추상 메서드의 모든 구현을 찾음.

코드 작성

IDE는 변경 내용을 파일에 저장하기도 전에 사용자가 입력한 파일의 편집 내용을 볼 수 있음.

이름 완성하기

타입스크립트 API 이용하여 동일한 파일에 존재하는 이름을 자동 완성할 수 있음.
패키지 의존성에 대해서도 자동 가져오기를 제공.

자동 가져오기 업데이트

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

코드 액션

많은 IDE 유틸리티는 직접 실행할 수 있는 액션으로 제공됨.
편집기에서 코드 액션을 사용할 수 잇다면 VS Code에서는 텍스트 커서 위에 클릭 가능한 전구 아이콘이 나타남.
코드 액션 매뉴를 여는 VS Code의 기본 단축키는 Cmd / Ctrl .

이름 바꾸기

• 함수, 인터페이스 또는 변수의 이름철머 이미 존재하는 이름을 수동을 변경하는 작업은 상당히 번거롭다. 메뉴의 Rename Symbol(F2) 옵션을 선택하면 새 이름을 입력할 수 있는 텍스트 상자가 나타남.
• 새 이름 적용 전 Shift + Enter 를 눌러서 발생할 모든 텍스트 ㅂ녀경 사항을 나열하는 리팩토링 미리보기 창을 열 수 있다.

사용하지 않는 코드 제거

VS Code는 사용하지 않는 코드의 불투명도를 1/3으로 줄여서 보여줌.

기타 빠른 수정

Quick Fix 목록을 확인하는 것이 좋음.

리팩토링

타입스크립트 언어 서비스는 다양한 코드 구조를 지원하는 여러 편리한 코드 변경 기능을 제공 함. 일부는 코드 줄을 이용하는 것처럼 간단하지만, 새로운 함수를 생성하는 것처럼 복잡한 기능도 있음.
코드 영역을 선택하면 VS Code는 선택된 코드 옆에 전구 아이콘을 보여줌. 리팩토링 가능 목록을 보려면 전구 아이콘을 클릭하면 됨.

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

언어 서비스 오류.

모든 오류를 코드 아래 빨간 물결선으로 표시함
해당 문자 옆에 오류 텍스트를 담은 호버 상자가 나타남.
동일한 소스 파일에 여러 문제가 잇는 경우에는 View Problem 디스플레이 우측에 있는 위, 아래쪽 화살표로 오류 전환 가능. 오류 이동 단축키는 F8, Shift + F8 사용

PROBLEMS 탭

• 모든 문제를 나타내는 PROBLEMS 탭이 있음. 탭에서 오류를 클릭하면 텍스트 커서가 문제가 되는 행과 열로 이동함.
• VS Code는 현재 열려 있는 파일에 대한 오류만 나열함. 모든 오류를 실시간 업데이트하고 싶다면 터미널에서 타입스크립트 컴파일러를 실행해야 함.

터미널 컴파일러 실행

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

• VS Code에서 이 작업을 수행하려면, 터미널 패널을 열고 tsc-w를 실행 or 프로젝트 참조를 사용한다면 tsc -b -w를 실행

• Cmd / Ctrl 을 누른 상태에서 파일 이름 클릭시 텍스트 커서가 해당 파일의 잘못된 행과 열로 이동.

타입 이해

Ctrl 을 누른 상태로 마우스를 가져가면 변수에 대한 호버 정보를 보여줌.
호버 상자는 타입 별칭 같은 타입에도 사용 가능.
복잡한 타입의 구성 요소를 이해할 때 유용한 한 가지 전략은 타입의 한 구성 요소를 나타내는 타입 별칭을 만드는 것.

ex)
const fruits = {
	apple : 1,
    broccoli: 2,
    cherry: 3,
    };

export type FruitName = keyof typeof fruits;