# 자주 사용하는 `tsconfig.json` 속성 정리

타입스크립트 프로젝트에서 `tsconfig.json` 파일은 컴파일러의 동작을 정의하는 중요한 설정 파일입니다. 이 글에서는 `tsconfig.json`에서 자주 사용하는 속성들을 설명하고, 각각의 역할을 알아보겠습니다.

---

## 1. `compilerOptions`
`compilerOptions`는 타입스크립트의 컴파일러 설정을 정의하는 가장 중요한 속성입니다.

### 필수적으로 알아야 할 주요 옵션

#### 1) `target`
컴파일된 자바스크립트 코드가 어떤 ECMAScript 버전을 따를지 설정합니다.
```json
"target": "ES6"
```
- `ES5`, `ES6`(ES2015), `ES2017`, `ES2020` 등의 값을 가질 수 있으며, 최신 기능을 사용하고 싶다면 `ESNext`를 설정할 수도 있습니다.

#### 2) `module`
모듈 시스템을 지정합니다.
```json
"module": "CommonJS"
```
- 브라우저 환경에서는 `ESNext`, `ES6`
- Node.js 환경에서는 `CommonJS`를 주로 사용합니다.

#### 3) `strict`
타입스크립트의 엄격한 타입 체크 기능을 활성화합니다.
```json
"strict": true
```
- `true`로 설정하면 `noImplicitAny`, `strictNullChecks` 등 다양한 엄격한 타입 검사를 적용합니다.

#### 4) `allowJs`
자바스크립트 파일(`.js`)도 타입스크립트 프로젝트에서 사용할 수 있도록 허용합니다.
```json
"allowJs": true
```

#### 5) `outDir`
컴파일된 자바스크립트 파일을 저장할 디렉토리를 지정합니다.
```json
"outDir": "./dist"
```

#### 6) `rootDir`
컴파일할 소스 코드의 루트 디렉토리를 지정합니다.
```json
"rootDir": "./src"
```

#### 7) `noImplicitAny`
암시적으로 `any` 타입이 사용되는 것을 방지합니다.
```json
"noImplicitAny": true
```
- 미리 타입을 명확하게 지정하도록 강제하여 버그를 줄일 수 있습니다.

#### 8) `strictNullChecks`
`null`과 `undefined`를 엄격하게 체크합니다.
```json
"strictNullChecks": true
```

#### 9) `noUnusedLocals`, `noUnusedParameters`
사용하지 않는 변수나 매개변수가 있을 경우 경고를 발생시킵니다.
```json
"noUnusedLocals": true,
"noUnusedParameters": true
```

---

## 2. `include`와 `exclude`
### 1) `include`
컴파일할 파일 또는 디렉토리를 지정합니다.
```json
"include": ["src"]
```

### 2) `exclude`
컴파일에서 제외할 파일 또는 디렉토리를 지정합니다.
```json
"exclude": ["node_modules", "dist"]
```

---

## 3. `extends`
기본 `tsconfig.json`을 확장하여 사용합니다.
```json
"extends": "@tsconfig/recommended"
```

---

## 4. 예제 `tsconfig.json`
일반적인 타입스크립트 프로젝트에서 사용할 수 있는 `tsconfig.json` 예제입니다.

```json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "allowJs": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}
```


타입스크립트 설정

tsconfig.json에 대하여

# 타입스크립트

타입스크립트는  자바스크립트의 슈퍼셋으로 정적 타입 시스템을 추가하여 코드의 안정성과 유지보수성을 높이는 언어입니다. 이번 글에서는 타입스크립트의 기본 개념을 알아보겠습니다.

## 1. 타입스크립트란?

### 타입스크립트의 특징
- **정적 타입 시스템**: 트랜스파일 단계에서 타입을 체크하여 런타임 오류를 사전에 방지할 수 있습니다.
- **ES6+ 지원**: 최신 자바스크립트 문법을 지원하며, 브라우저 호환성을 위해 ES5로 트랜스파일 가능합니다.
- **인터페이스와 제네릭**: 대규모 프로젝트에서도 유지보수성을 높일 수 있는 강력한 기능을 제공합니다.
- **OOP 지원**: 클래스, 인터페이스, 상속 등 객체지향 프로그래밍 개념을 활용할 수 있습니다.

## 2. 타입스크립트 설치 및 설정

### 타입스크립트 설치
```sh
npm install -g typescript
```

### 타입스크립트 컴파일
```sh
tsc filename.ts
```

### `tsconfig.json` 설정
타입스크립트 프로젝트에서는 `tsconfig.json` 파일을 생성하여 설정을 관리할 수 있습니다.
```json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true
  }
}
```

## 3. 기본 타입
타입스크립트는 다양한 기본 타입을 제공합니다.

```ts
let isDone: boolean = false;
let age: number = 30;
let firstName: string = "John";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];
```

## 4. 함수와 인터페이스

### 함수의 타입 지정
```ts
function add(a: number, b: number): number {
  return a + b;
}
```

### 인터페이스
인터페이스를 사용하면 객체의 구조를 정의할 수 있습니다.
```ts
interface Person {
  name: string;
  age: number;
}

let user: Person = {
  name: "Alice",
  age: 25
};
```

## 5. 클래스와 상속
타입스크립트는 ES6의 클래스 문법을 기반으로 하며, 추가적인 기능을 제공합니다.

```ts
class Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }

  makeSound(): void {
    console.log("Some sound");
  }
}

class Dog extends Animal {
  bark(): void {
    console.log("Woof! Woof!");
  }
}

let dog = new Dog("Buddy");
dog.makeSound(); // Some sound
dog.bark(); // Woof! Woof!
```

## 6. 제네릭
제네릭을 사용하면 코드의 재사용성을 높일 수 있습니다.

```ts
function identity<T>(arg: T): T {
  return arg;
}

console.log(identity<number>(10)); // 10
console.log(identity<string>("Hello")); // Hello
```

## 7. 타입스크립트의 장점
- 코드의 **가독성**과 **유지보수성** 향상
- 정적 타입 체크로 **버그 예방**
- **대규모 프로젝트**에서 생산성 향상

## 8. 결론
타입스크립트는 자바스크립트의 강력한 기능을 유지하면서도 정적 타입 시스템을 제공하여 개발 생산성을 높여줍니다.



게시글 리스트

타입스크립트 설정

타입스크립트란?