TypeScript의 동작 원리 및 d.ts 타입 정의 파일이란?

TypeScript는 JavaScript의 상위 집합(Superset)으로, 정적 타입(static type)을 추가하여 개발자가 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있게 도와주는 언어입니다. 간단히 말해서, TypeScript는 우리가 작성한 코드를 JavaScript로 컴파일(transpile)해주는 트랜스파일러 역할을 합니다. 또한, TypeScript의 강력한 기능 중 하나는 타입 정의 파일(.d.ts)을 통해 타입 정보를 외부 라이브러리나 코드에 제공할 수 있다는 점입니다. React 애플리케이션에서는 d.ts 파일을 활용하여 컴포넌트, 함수, 모듈 등의 타입 정보를 정의할 수 있습니다. 그럼 TypeScript와 d.ts가 실제로 어떻게 동작하는지 살펴보겠습니다.!

---

 

• 코드 작성과 타입 검사

• TypeScript는 .ts 또는 .tsx 파일에서 작성된 코드를 검사합니다.
• 타입 체크는 컴파일 단계에서만 이루어지며, 런타임에서는 사라집니다. 즉, JavaScript로 변환된 후에는 실제 실행 시점에 타입 정보는 남아있지 않습니다.

let message: string = "Hello, TypeScript!";
message = 123;

 

예시 코드는 타입 검사 단계에서 에러를 발생시키지만, JavaScript로 컴파일되면 해당 타입 정보는 제거됩니다!!

 

• 컴파일(Transpilation)
  • TypeScript 컴파일러(tsc)는 TypeScript 코드를 JavaScript 코드로 변환합니다. 이때, 우리가 작성한 타입은 모두 사라지고 순수한 JavaScript 코드만 남습니다.
  • 예를 들어, 예시 코드는 컴파일되면 다음과 같은 JavaScript로 변환됩니다. 즉, :string이 사라지게 됩니다.

let message = "Hello, TypeScript!";
message = 123;

 

 

• 구성 파일(tsconfig.json)
  • TypeScript 프로젝트에서는 tsconfig.json 파일을 사용해 컴파일러 옵션과 프로젝트의 동작 방식을 설정합니다.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

 

 

• target: 변환할 JavaScript의 버전을 지정합니다.
• strict: 모든 엄격한 타입 검사 옵션을 활성화합니다.

---

d.ts 파일의 주요 특징

1. 타입 정보만 포함

• d.ts 파일에는 타입 정의만 포함되며, 실제 실행 코드가 없습니다. 따라서 JavaScript로 변환되지 않습니다.

declare function greet(name: string): string;

greet 함수는 d.ts 파일에 정의된 것으로, TypeScript는 이 정보를 기반으로 타입 검사를 수행하지만, 실제 런타임에는 해당 내용이 포함되지 않습니다.

 

2. React 컴포넌트 타입 정의

 

• React 컴포넌트를 위한 타입 정의는 주로 interface를 활용하여 작성합니다. 예를 들어, 컴포넌트의 props 타입을 정의할 수 있습니다.

 

export interface ButtonProps {
  label: string;
  onClick: () => void;
}

export function Button({ label, onClick }: ButtonProps) {
  return <button onClick={onClick}>{label}</button>;
}

 

ButtonProps라는 인터페이스를 정의해 컴포넌트의 props에 적용하면, 잘못된 props를 전달했을 때 TypeScript가 오류를 발생시켜 안전성을 높일 수 있습니다.

---

 

d.ts 파일을 만드는 방법

1. 직접 작성하기

• 자신이 만든 JavaScript 코드에 대해 타입 정의를 제공하려면 직접 d.ts 파일을 작성할 수 있습니다.
• 정의를 사용하면, TypeScript는 myLibrary 모듈을 인식하고 타입 검사를 수행할 수 있습니다.

2. 자동 생성

• TypeScript는 작성한 TypeScript 코드를 기반으로 타입 정의 파일을 자동으로 생성할 수 있습니다.
• tsconfig.json 파일에서 declaration 옵션을 활성화하면 됩니다 

{
  "compilerOptions": {
    "declaration": true,
    "outDir": "dist"
  }
}

위 설정을 적용하면 컴파일 시 .js 파일과 함께 .d.ts 파일이 생성됩니다.

 

3. @types를 활용하기

• 인기 있는 라이브러리의 타입 정의는 대부분 DefinitelyTyped라는 커뮤니티에서 관리합니다.
• 예를 들어, npm install @types/node를 통해 Node.js의 타입 정의를 설치할 수 있습니다.

declare module "myLibrary" {
	export function add(a: number, b: number): number;
	export function subtract(a: number, b: number): number; 
 }

---

TypeScript는 정적 타입과 강력한 도구들을 통해 React 애플리케이션에서 뿐만 아니라 다른 애플리케이션에서도 개발자의 실수를 줄이고 생산성을 높이는 데 도움을 줍니다. 특히, d.ts 파일과 interface를 활용한 타입 정의는 컴포넌트와 외부 라이브러리의 사용을 더 안전하고 간결하게 만들어줍니다. 이해를 돕기 위해 예시를 많이 넣어봤는데, 실무에서 외부 라이브러리를 다루거나 팀 프로젝트를 진행할 때 유용하게 쓰일 수 있으니 익혀두면 편할 것 같다고 생각이 듭니다.

React를 이용한 고급 프로젝트를 진행하게 되는데 이러한 방식을 적극 활용해, 더욱 견고한 코드를 작성할 예정입니다!