tsconfig.json
1.target 및 lib 옵션
TypeScript의 lib 옵션은 컴파일러에게 프로젝트에서 사용할 수 있는 기본 라이브러리의 집합을 지정하는 데 사용됩니다.
기본적으로 lib 옵션을 설정하지 않으면, TypeScript는 프로젝트의 target 옵션에 따라 적절한 라이브러리를 포함합니다.
예를 들어, target이 es6로 설정되어 있으면, TypeScript는 ES6와 DOM API를 기본적으로 포함합니다.
이제 이 내용을 예제와 함께 정리하겠습니다
예제 시나리오
HTML 파일에 "Click Me" 버튼이 있고, 이 버튼을 클릭하면 메시지를 출력하는 TypeScript 코드를 작성한다고 가정합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TypeScript Example</title> </head> <body> <button id="myButton">Click Me</button> <script src="app.js"></script> </body> </html>
TypeScript 파일 app.ts에서 버튼을 선택하고 클릭 이벤트 리스너를 추가합니다:
const button = document.querySelector('button')!;
button.addEventListener('click', () => {
console.log('Clicked!');
});
위 코드는 document.querySelector로 버튼을 선택하고, 클릭 이벤트 리스너를 추가합니다. document.querySelector('button')!에서 느낌표(!)는 TypeScript에게 이 요소가 존재한다고 확신하게 합니다.
문제와 해결
TypeScript는 document와 console 객체를 어떻게 알 수 있을까요? 이는 기본 라이브러리 설정 덕분입니다. TypeScript는 lib 옵션을 통해 이러한 전역 객체를 사용할 수 있습니다.
기본값
기본적으로 lib 옵션이 설정되지 않으면, TypeScript는 target에 따라 적절한 기본 라이브러리를 포함합니다. 예를 들어 target이 es6로 설정되어 있으면, ES6와 DOM API를 포함합니다.
명시적 설정
lib 옵션을 명시적으로 설정할 수도 있습니다. 예를 들어, tsconfig.json에서 다음과 같이 설정할 수 있습니다:
{
"compilerOptions": {
"target": "es6",
"lib": ["dom", "es6"]
}
}
이 설정은 TypeScript가 DOM API와 ES6 기능을 모두 사용할 수 있도록 합니다.
주요 포인트 요약
- 기본 라이브러리: TypeScript는 target에 따라 기본 라이브러리를 포함합니다. 예를 들어 target이 es6로 설정되어 있으면, ES6와 DOM API를 포함합니다.
- lib 옵션: lib 옵션을 사용하면 TypeScript가 포함할 라이브러리를 명시적으로 지정할 수 있습니다. 예를 들어 lib: ["dom", "es6"]로 설정하면 DOM API와 ES6 기능을 사용할 수 있습니다.
- 느낌표(!): document.querySelector('button')!에서 느낌표는 TypeScript에게 이 요소가 존재한다고 확신하게 합니다.
이러한 설정을 통해 TypeScript가 DOM API 및 ES6 기능을 인식하고 사용할 수 있도록 합니다.
공식 문서에서 lib 옵션에 대한 자세한 설명을 확인할 수 있습니다.
2.TypeScript의 allowJs 및 checkJs 옵션
allowJs 옵션
- 기능: allowJs 옵션을 사용하면 TypeScript 컴파일러가 .js 파일을 컴파일할 수 있습니다.
- 용도: TypeScript 파일뿐만 아니라 JavaScript 파일도 컴파일하고자 할 때 유용합니다.
{
"compilerOptions": {
"allowJs": true
}
}
- 효과: .js 파일을 포함하여 컴파일합니다.
checkJs 옵션
- 기능: checkJs 옵션은 JavaScript 파일의 구문을 검사하고 잠재적인 오류를 보고합니다.
- 용도: TypeScript로 변환하지 않고도 JavaScript 파일의 오류를 검출하고자 할 때 유용합니다.
{
"compilerOptions": {
"checkJs": true
}
}
allowJs 및 checkJs의 활용 예
{
"compilerOptions": {
"allowJs": true,
"checkJs": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
종합 예제
{
"compilerOptions": {
"target": "es6", // 코드를 ES6 표준으로 컴파일합니다.
"lib": ["dom", "es6"], // 컴파일 시 DOM 및 ES6 라이브러리 기능을 사용하도록 설정합니다.
"allowJs": true, // 프로젝트 내의 JavaScript 파일도 컴파일할 수 있게 허용합니다.
"checkJs": true, // JavaScript 파일의 구문을 검사하여 잠재적 오류를 보고합니다.
"jsx": "react", // React JSX 구문을 사용할 수 있게 합니다.
"declaration": true, // 타입 선언 파일(.d.ts)을 생성합니다. 이는 프로젝트를 다른 사람에게 라이브러리로 배포할 때 중요합니다.
"declarationMap": true, // 선언 맵 파일을 생성하여 .d.ts 파일의 소스 맵을 포함합니다.
"sourceMap": true // 소스 맵 파일을 생성하여 디버깅 시 원본 소스 코드를 참조할 수 있게 합니다.
},
"include": ["src/**/*"], // src 폴더 내의 모든 파일을 컴파일에 포함시킵니다.
"exclude": ["node_modules"] // node_modules 폴더는 컴파일에서 제외합니다.
}
3.소스맵
"sourceMap": true
소스 맵 파일을 생성하여 디버깅 시 원본 소스 코드를 참조할 수 있게 합니다.
sourceMap 옵션을 활성화하면, 브라우저의 개발자 도구에서 TypeScript 파일을 직접 확인하고 디버깅할 수 있습니다.
컴파일된 JavaScript 파일만 보는 대신, 원본 TypeScript 파일을 보고 중단점을 설정할 수 있습니다.
이로 인해 디버깅 프로세스가 훨씬 간편해집니다.
4.rootDir 및 outDir
- outDir: 생성된 파일을 저장할 디렉터리를 지정합니다. 예를 들어, dist 폴더에 자바스크립트 파일이 저장됩니다.
- rootDir: 입력 파일이 저장된 디렉터리를 지정합니다. 예를 들어, src 폴더에 타입스크립트 파일이 저장됩니다.
기타 설명
- include: src 폴더 내의 모든 파일을 컴파일에 포함시킵니다.
- exclude: node_modules 폴더는 컴파일에서 제외합니다.
5.컴파일 오류시 파일 방출 중지하기
noEmitOnError 옵션은 타입스크립트 컴파일러에서 중요한 옵션입니다. 이 옵션을 true로 설정하면 컴파일 중 오류가 발생한 경우에는 어떠한 파일도 생성되지 않습니다. 기본값은 false로 설정되어 있어서, 오류가 있더라도 자바스크립트 파일이 생성됩니다.
상세 설명
- noEmitOnError: 오류가 발생한 경우 자바스크립트 파일을 생성하지 않습니다. 예를 들어, 타입스크립트 파일에 있는 코드가 HTML 문서에 존재하지 않는 요소를 쿼리할 때, 컴파일러는 해당 요소를 찾지 못해 오류를 반환합니다. 이때 noEmitOnError이 설정되어 있다면 자바스크립트 파일을 생성하지 않고, 오류를 해결해야 다시 컴파일할 수 있습니다.
장단점
- 장점: 오류가 있는 코드가 자바스크립트 파일로 컴파일되지 않아서, 문제가 있는 코드를 빠르게 찾고 해결할 수 있습니다.
- 단점: 프로덕션 환경에서는 오류가 있더라도 최소한의 기능이라도 동작하길 원할 때 이 옵션을 끄는 것이 좋을 수 있습니다. 또한, 개발 과정에서 오류를 무시하고 진행할 수 있게 해줍니다.
사용 시 고려 사항
- 개발자 별 선호도: 프로젝트의 필요에 따라 다를 수 있지만, 보통 개발 초기에는 이 옵션을 true로 설정하여 오류를 빠르게 해결하는 것이 좋습니다.
- 프로덕션 환경: 릴리즈 전에는 이 옵션을 고려하여야 합니다. 오류가 있더라도 기능이 동작해야 할 필요가 있을 때도 있습니다.
따라서, 프로젝트의 목표와 상황에 따라 noEmitOnError 옵션을 적절히 설정하여 타입스크립트 컴파일 시의 행동을 결정할 수 있습니다.
6.Strict 컴파일
strict 옵션 요약
"strict": true 옵션은 TypeScript 설정 파일(tsconfig.json)에서 사용할 수 있는 설정 중 하나입니다. 이 옵션을 활성화하면 TypeScript 컴파일러가 모든 엄격한 타입 체크 옵션을 활성화합니다. 이 옵션은 다음과 같은 개별 옵션들을 모두 포함합니다:
- noImplicitAny: 암시적 any를 허용하지 않음.
- strictNullChecks: null 및 undefined에서의 타입 체크 강화.
- strictFunctionTypes: 함수 타입의 일관성 강화.
- strictBindCallApply: bind, call, apply 사용 시 타입 일치 강제.
- strictPropertyInitialization: 클래스 속성 초기화 강제.
- noImplicitThis: this의 암시적 any를 허용하지 않음.
- alwaysStrict: 생성된 자바스크립트 파일이 항상 strict mode로 실행되도록 함.
이 모든 옵션들이 함께 활성화되어 프로젝트의 타입 안전성을 높이고 오류를 줄이는 데 도움을 줍니다.
noImplicitAny: 암시적 any를 허용하지 않음. 모든 매개변수와 반환값에 명시적인 타입 선언을 요구합니다.
// 예제 1: 매개변수와 반환값에 명시적인 타입 선언
function multiply(a: number, b: number): number {
return a * b;
}
// 예제 2: any 타입을 사용하지 않는 선언
function processValue(value: string): void {
console.log(value.toUpperCase());
}
strictNullChecks: null 및 undefined에서의 타입 체크 강화. 이 옵션이 켜져 있으면 null 및 undefined에 대한 접근을 엄격히 제한합니다.
// 예제 1: 매개변수와 반환값에 명시적인 타입 선언
function multiply(a: number, b: number): number {
return a * b;
}
// 예제 2: any 타입을 사용하지 않는 선언
function processValue(value: string): void {
console.log(value.toUpperCase());
}
strictFunctionTypes: 함수 타입의 일관성 강화. 함수의 매개변수와 반환값 타입을 더 엄격히 검사합니다.
// 예제: strictFunctionTypes 적용
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
interface Cat extends Animal {
color: string;
}
// Animal 타입을 인자로 받는 함수
function printAnimal(animal: Animal): void {
console.log(animal.name);
}
// Dog 타입을 인자로 받는 함수
function printDog(dog: Dog): void {
console.log(dog.name, dog.breed);
}
// 함수 타입이 엄격히 일치하지 않으면 에러
let animalFunc: (a: Animal) => void = printDog; // 컴파일 오류 발생
strictBindCallApply: bind, call, apply 사용 시 타입 일치 강제. 이 메서드들을 사용할 때 인자 타입을 엄격히 체크합니다.
// 예제: strictBindCallApply 적용
let obj = {
num: 10,
increment: function(this: { num: number }, value: number) {
this.num += value;
}
};
let func = obj.increment;
func(5); // 컴파일 오류 발생: 'this' 타입은 'any'가 아닌 '{ num: number }'이어야 합니다
strictPropertyInitialization: 클래스 속성 초기화 강제. 클래스의 모든 속성이 생성자에서 초기화되었는지 확인합니다.
// 예제: strictPropertyInitialization 적용
class Person {
name: string; // 초기화되지 않은 속성
constructor(name: string) {
// this.name = name; // 이 줄을 추가하여 속성 초기화
}
}
noImplicitThis: this의 암시적 any를 허용하지 않음. this가 명시적으로 선언되지 않은 곳에서의 사용을 방지합니다.
// 예제: noImplicitThis 적용
function sayName(this: { name: string }) {
console.log(`My name is ${this.name}`);
}
// sayName(); // 컴파일 오류 발생: 'this'는 '{ name: string }' 타입이어야 합니다
alwaysStrict: 생성된 자바스크립트 파일이 항상 strict mode로 실행되도록 합니다.
// 예제: alwaysStrict 옵션에 영향을 주지 않는 TypeScript 코드
function logMessage(message: string) {
'use strict'; // JavaScript strict mode
console.log(message);
}
각 옵션의 활용
- 개별 설정: 각 옵션을 개별적으로 설정하여 타입스크립트가 코드를 엄격하게 검사하도록 할 수 있습니다.
- strict 옵션 사용: strict: true로 설정하면 모든 strict 옵션이 활성화됩니다. 이는 코드의 안전성을 높이고 일관성을 유지하는 데 도움이 됩니다.
- 옵션 조정: 특정 상황에서는 일부 옵션을 끄거나 조정하여 유연성을 확보할 수 있습니다. 예를 들어, strictNullChecks를 끄고 싶은 경우도 있을 수 있습니다.
이러한 옵션들은 개발 초기에 코드 품질을 높이고, 특히 대규모 프로젝트에서 협업 시에 유용하게 사용될 수 있습니다. 각 옵션의 적절한 사용은 코드의 안정성과 유지 보수성을 크게 향상시킬 수 있습니다.
7. 고품질 옵션
타입스크립트에서는 다양한 컴파일 옵션을 설정하여 코드의 품질을 향상시킬 수 있습니다. 여기에는 noUnusedLocals, noUnusedParameters, noImplicitReturns 등이 포함됩니다.
noUnusedLocals: 사용하지 않는 로컬 변수에 대해 경고를 표시합니다. 예를 들어 함수 내에서 선언된 변수가 사용되지 않으면 IDE에서 경고를 통해 알려줍니다.
function greet(name: string) {
let message = `Hello, ${name}!`; // 사용되지 않는 로컬 변수 message
console.log(`Hello, ${name}!`);
}
noUnusedParameters: 사용되지 않는 매개변수에 대해 경고를 표시합니다. 함수에 정의된 매개변수가 실제로 사용되지 않을 때, 컴파일러는 이를 알려줍니다.
function greet(name: string, age: number) {
console.log(`Hello, ${name}!`);
// age 매개변수는 사용되지 않음
}
noImplicitReturns: 함수가 값을 반환하는 모든 분기에서 명시적으로 return 키워드를 사용하도록 요구합니다. 함수가 값을 반환할 수 있는 경우, 모든 분기에서 반환을 보장해야 합니다.
function divide(a: number, b: number): number {
if (b === 0) {
throw new Error('Cannot divide by zero');
}
return a / b;
// 모든 분기에서 반환되는 값이 명시되어 있음
}
이 옵션들은 코드의 실수를 줄이고 일관된 스타일을 유지하는 데 도움이 됩니다. 예를 들어, 함수에서 정의한 매개변수나 변수를 적절하게 사용하지 않거나, 반환을 누락하는 경우를 사전에 방지할 수 있습니다.
또한, 전역 변수는 다른 스크립트 파일에서 필요할 수 있기 때문에 사용되지 않아도 오류가 발생하지 않습니다. 이는 타입스크립트가 모듈 간의 의존성을 고려하여 컴파일하도록 설계되어 있기 때문입니다.
이러한 옵션들은 개발자가 코드의 품질을 높이고 버그를 줄이는 데 매우 유용합니다. 따라서 프로젝트 설정에서 이 옵션들을 활성화하여 코드 검사와 유지보수를 효율적으로 진행할 수 있습니다.
8. Visual Studio Code 로 디버깅하기
프로젝트를 디버깅하는 방법과 훌륭한 개발 흐름을 만드는 방법에 대해 다루었습니다. 여기서는 주로 Visual Studio Code를 기준으로 설명하였습니다.
IDE 및 확장 프로그램 설정: 타입스크립트 개발을 위한 올바른 IDE 설정과 확장 프로그램 설치를 확인했습니다. 이는 코드 작성 시 도움을 줄 뿐만 아니라 코드 품질을 높이는 데 기여합니다.
ESLint와 Prettier: ESLint를 사용하여 코드 린팅을 수행하고, Prettier를 이용해 코드 포맷팅을 자동화하여 일관된 코드 스타일을 유지할 수 있습니다.
크롬 디버거 확장 프로그램: Visual Studio Code 내에서 크롬 디버거를 활용하여 TypeScript 코드를 디버깅할 수 있습니다. 이를 통해 소스 맵을 활성화하고, 중단점을 설정하여 코드 실행을 멈추고 변수 값을 검사할 수 있습니다.
디버깅 설정 (launch.json): 프로젝트의 launch.json 파일을 통해 디버깅 환경을 설정하고, 로컬 서버를 실행하거나 브라우저에서 애플리케이션을 실행할 수 있습니다.
디버깅 과정: VS Code의 디버깅 도구를 사용하여 변수 추적, 호출 스택 검사, 코드 실행 단계별 확인 등을 수행할 수 있습니다. 이를 통해 코드의 동작을 이해하고 오류를 신속히 해결할 수 있습니다.
이 모든 요소들을 조합하여 효율적이고 정확한 개발 환경을 구축할 수 있으며, 프로젝트의 생산성과 코드 품질을 크게 향상시킬 수 있습니다.
https://code.visualstudio.com/docs/typescript/typescript-debugging
댓글 ( 0)
댓글 남기기