Post

타입스크립트(TypeScript)에 대해 알아보자

Posted
Preview Image
By Jinwoo 9 min read

안녕하세요 오늘은 타입스크립트에 대해 잘 몰라서 알아볼까 합니다.

타입스크립트

타입스크립트(TypeScript)란 무엇인가?

타입스크립트(TypeScript)는 마이크로소프트에서 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트의 상위 집합입니다. 타입스크립트는 자바스크립트에 정적 타입을 추가하여 코드의 품질과 개발 생산성을 높이는 것을 목표로 합니다. 자바스크립트의 문법을 모두 포함하면서도 타입 시스템과 최신 ECMAScript 기능을 제공합니다.

타입스크립트의 주요 특징

  1. 정적 타입 검사(Static Type Checking): 타입스크립트의 가장 큰 특징은 정적 타입 검사입니다. 코드를 작성할 때 변수와 함수의 타입을 명시할 수 있으며, 타입스크립트 컴파일러가 이를 검사하여 타입 오류를 미리 발견할 수 있습니다.

    1
2
3
4
5
6
7

     let isDone: boolean = false;
 let total: number = 10;
 let name: string = 'Alice';

 function add(a: number, b: number): number {
     return a + b;
 }

  2. 타입 추론(Type Inference): 타입스크립트는 명시적으로 타입을 지정하지 않아도 변수의 초기 값에 따라 타입을 추론합니다. 이는 코드의 간결성을 유지하면서도 타입 안전성을 제공합니다.

    1

     let count = 10; // count는 number로 추론됨

  3. 인터페이스(Interface)와 타입 별칭(Type Alias): 인터페이스와 타입 별칭을 사용하여 객체의 구조를 정의할 수 있습니다. 이는 코드의 재사용성과 가독성을 높여줍니다.

    1
2
3
4
5
6
7
8
9

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

 const person: Person = {
     name: 'John',
     age: 30
 };

  4. 제네릭(Generic): 제네릭을 사용하면 다양한 타입에 대해 재사용 가능한 컴포넌트를 만들 수 있습니다. 이는 타입 안전성을 유지하면서도 유연한 코드를 작성할 수 있게 합니다.

    1
2
3
4
5
6

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

 let output = identity<string>('myString'); // output은 string 타입
 let numberOutput = identity<number>(100); // numberOutput은 number 타입

  5. 타입 가드(Type Guards): 타입스크립트는 특정 타입으로 좁히는 메커니즘인 타입 가드를 제공합니다. 이를 통해 코드에서 안전하게 타입을 구별하고 처리할 수 있습니다.

    1
2
3
4
5
6
7
8
9
10
11

     function isString(value: any): value is string {
     return typeof value === 'string';
 }

 function printValue(value: string | number) {
     if (isString(value)) {
         console.log(`String value: ${value}`);
     } else {
         console.log(`Number value: ${value}`);
     }
 }

  6. 모듈(Module) 시스템: 타입스크립트는 ES6 모듈 시스템을 지원하여 코드의 모듈화와 의존성 관리를 쉽게 합니다. import와 export 키워드를 사용하여 모듈을 정의하고 불러올 수 있습니다.

    1
2
3
4
5
6
7
8
9

     // math.ts
 export function add(a: number, b: number): number {
     return a + b;
 }

 // main.ts
 import { add } from './math';

 console.log(add(2, 3)); // 5

타입스크립트의 장점

  1. 타입 안전성: 정적 타입 검사를 통해 타입 관련 오류를 컴파일 타임에 미리 잡을 수 있어 런타임 오류를 줄이고 코드의 안정성을 높입니다.

  2. 개발 생산성 향상: 코드 작성 시 타입스크립트의 강력한 IDE 지원(자동 완성, 타입 검사, 리팩토링 도구 등)을 통해 개발 생산성을 높일 수 있습니다.

  3. 유지보수성: 타입 정보를 통해 코드의 의도를 명확히 하여 팀원 간의 이해를 돕고, 대규모 프로젝트에서 코드의 유지보수성을 높입니다.

  4. 최신 자바스크립트 기능 지원: 타입스크립트는 최신 ECMAScript 표준을 지원하며, 브라우저 호환성을 위해 트랜스파일링(transpiling)을 통해 구 버전의 자바스크립트로 변환할 수 있습니다.

타입스크립트의 단점

  1. 학습 곡선: 자바스크립트에 비해 추가적인 타입 시스템을 배우고 익숙해져야 하므로 초보자에게는 학습 곡선이 있을 수 있습니다.

  2. 컴파일 단계 추가: 타입스크립트는 브라우저에서 직접 실행되지 않으므로 자바스크립트로 컴파일하는 추가 단계가 필요합니다. 이는 빌드 시간과 설정 복잡성을 증가시킬 수 있습니다.

  3. 초기 설정 및 설정 관리: 타입스크립트를 프로젝트에 도입하려면 초기 설정이 필요하며, 프로젝트 규모가 커짐에 따라 설정 관리가 복잡해질 수 있습니다.

타입스크립트 사용 예제

타입스크립트의 실용적인 사용 예제를 통해 그 강력함을 더 잘 이해할 수 있습니다. 다음은 간단한 예제 프로젝트입니다.

1. 타입스크립트 설치 및 설정

1
2

npm install -g typescript
tsc --init

2. 간단한 프로젝트 구조

1
2
3
4
5
6

project
│   tsconfig.json
└───src
    │   index.ts
    └───utils
        │   math.ts

3. math.ts 파일 작성

1
2
3
4
5
6
7
8

// src/utils/math.ts
export function add(a: number, b: number): number {
    return a + b;
}

export function subtract(a: number, b: number): number {
    return a - b;
}

4. index.ts 파일 작성

1
2
3
4
5
6
7
8

// src/index.ts
import { add, subtract } from './utils/math';

const num1: number = 5;
const num2: number = 3;

console.log(`Add: ${add(num1, num2)}`); // Add: 8
console.log(`Subtract: ${subtract(num1, num2)}`); // Subtract: 2

5. 컴파일 및 실행

1
2

tsc
node dist/index.js

결론

타입스크립트는 자바스크립트의 한계를 극복하고자 만들어진 강력한 도구입니다. 타입 시스템을 통해 코드의 안정성과 유지보수성을 높이고, 최신 ECMAScript 기능을 지원하며, 대규모 프로젝트에서 특히 유용합니다. 타입스크립트의 학습 곡선과 초기 설정 복잡성은 있지만, 그만큼 얻을 수 있는 이점이 많습니다. 타입스크립트를 잘 활용하면 더 안전하고 효율적인 코드를 작성할 수 있을 것입니다.

오늘도 필자의 부족한 글을 읽어주셔서 감사합니다.

coding
타입스크립트 TypeScript
This post is licensed under CC BY 4.0 by the author.