[TypeScript] TypeScript의 기본 개념과 설정

현대 웹 개발에서 TypeScript는 이제 선택이 아닌 필수로 자리 잡고 있습니다. 최근 Stack Overflow 설문에 따르면 TypeScript는 개발자들이 가장 선호하는 언어 중 하나로 꾸준히 상위권에 오르고 있습니다.
많은 기업들이 TypeScript 사용 경험을 요구하거나 우대하며, 효율적이고 안전한 코드 작성을 위해 점점 더 많은 팀에서 도입하고 있습니다.
이번 포스팅에서는 TypeScript가 무엇인지, 기본 개념과 설정 방법에 대해 함께 알아보겠습니다.

💡 TypeScript란 ?

TypeScript는 JavaScript의 상위 집합 언어로, JavaScript 코드에 정적 타입 시스템과 최신 문법 기능을 추가한 언어입니다. Microsoft에서 개발했으며, JavaScript의 유연함을 유지하면서도 더 안전하고 유지보수하기 쉬운 코드를 작성하도록 돕습니다.

TypeScript = JavaScript + Type

기본 개념

1. 타입 선언

• TypeScript에서는 변수를 선언할 때 타입을 지정할 수 있습니다.

let age: number = 27; 
let name: string = "MinJae";

2. 인터페이스와 타입

• 객체의 구조를 정의하는데 사용됩니다.

interface User {
  name: string;
  age: number;
}

const user: User = { name: "MinJae", age: 27 };

3. 함수

• 함수의 매개변수와 반환값에 타입을 지정할 수 있습니다.

function add(x: number, y: number): number {
  return x + y;
}

4. 유니온 타입

• 여러 타입 중 하나를 허용합니다.

let value: string | number = "Hello";
value = 42; 

---

설정과 컴파일

TypeScript 프로젝트는 보통 tsconfig.json 파일로 설정을 관리합니다.

1. tsconfig.json 생성

tsc --init

2. 주요 설정 옵션

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "ES2020",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "dist",
    "noUncheckedIndexedAccess": false
    // "lib": ["ES2022", "DOM"]
  },
  "include": ["src/**/*"]
}

tsconfig.json에 대해서는 정리하여 따로 포스팅을 할 예정입니다.

3. 컴파일 실행

tsc

---

TypeScript의 인기

이미지출처

위 이미지에서 보이듯 TypeScript는 Stack Overflow 설문조사에서 많이 사용되는 언어 상위권에 위치합니다.
기업에서는 유지보수성과 협업 효율성이 중요한데, TypeScript는 이 점에서 JavaScript보다 우수합니다. React, Angular, Express 등 주요 프레임워크와 라이브러리에서 널리 사용되고 있어, 개발자들 사이에서도 그 인기가 계속 상승하고 있습니다.

---

결론

TypeScript는 JavaScript의 유연함을 유지하면서도 더 안전하고 생산적인 개발 환경을 제공합니다.

---

✅ 참고

• TypeScript_docs
• React_docs
• [TS] 타입스크립트(TypeScript)란? (feat. 써야하는 이유)_Fomagran