타입스크립트 입문 – JavaScript에 타입 더하기

byCode Keeper •

타입스크립트 입문 – JavaScript에 타입 더하기


타입스크립트(TypeScript)는 JavaScript의 슈퍼셋으로, 정적 타입을 추가하여 코드의 안정성과 가독성을 높여줍니다. 타입스크립트를 사용하면 컴파일 타임에 타입 오류를 발견할 수 있어, 런타임 오류를 줄이고 유지보수성을 향상시킬 수 있습니다. 이번 포스팅에서는 "타입스크립트", "TypeScript 입문", "JavaScript 타입"을 중심으로 타입스크립트의 주요 개념과 활용법을 설명하겠습니다. 고급 개발자를 대상으로 상세히 설명하고, 예제를 통해 실습해 보겠습니다.


타입스크립트란?


타입스크립트는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript에 정적 타입을 추가합니다. 타입스크립트는 기존 JavaScript 코드를 포함하며, 컴파일러를 통해 JavaScript로 변환됩니다. 이를 통해 기존 JavaScript 프로젝트에 타입스크립트를 점진적으로 도입할 수 있습니다.


타입스크립트의 장점


  1. 정적 타입 검사: 컴파일 타임에 타입 오류를 발견하여 런타임 오류를 줄입니다.
  2. IDE 지원: 풍부한 코드 자동 완성, 리팩토링, 네비게이션 기능을 제공합니다.
  3. 향상된 코드 가독성: 타입 정보를 통해 코드의 의도를 명확히 하고, 유지보수성을 향상시킵니다.
  4. JavaScript와의 호환성: 기존 JavaScript 코드와 완벽히 호환되며, 점진적으로 도입할 수 있습니다.

타입스크립트 설치 및 설정


타입스크립트를 시작하려면 먼저 타입스크립트 컴파일러를 설치해야 합니다. Node.js와 npm이 설치되어 있다고 가정합니다.


npm install -g typescript

프로젝트 디렉토리를 생성하고, 타입스크립트 설정 파일(tsconfig.json)을 생성합니다.


mkdir typescript-example
cd typescript-example
tsc --init

tsconfig.json 파일은 타입스크립트 컴파일러 옵션을 설정하는 파일입니다. 기본 설정을 사용하더라도 충분히 시작할 수 있습니다.


타입스크립트 기본 문법


변수와 타입


타입스크립트에서는 변수 선언 시 타입을 명시할 수 있습니다.


let name: string = 'John';
let age: number = 25;
let isStudent: boolean = true;

console.log(name, age, isStudent);

함수와 타입


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


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

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

배열과 객체


배열과 객체에도 타입을 지정할 수 있습니다.


let numbers: number[] = [1, 2, 3, 4, 5];

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

let john: Person = {
  name: 'John',
  age: 25
};

console.log(numbers);
console.log(john);

유니언 타입


유니언 타입을 사용하면 변수에 여러 타입을 허용할 수 있습니다.


let id: number | string;
id = 123;
id = 'ABC';

function printId(id: number | string) {
  console.log(`ID: ${id}`);
}

printId(123);
printId('ABC');

타입 별칭


타입 별칭을 사용하면 복잡한 타입을 단순화할 수 있습니다.


type UserID = number | string;

let userId: UserID;
userId = 123;
userId = 'ABC';

console.log(userId);

고급 타입스크립트 문법


인터페이스


인터페이스는 객체의 구조를 정의하며, 클래스나 객체에 구현할 수 있습니다.


interface Animal {
  name: string;
  age: number;
  speak(): void;
}

class Dog implements Animal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  speak() {
    console.log('Woof! Woof!');
  }
}

let myDog = new Dog('Buddy', 3);
myDog.speak(); // Woof! Woof!

제네릭


제네릭은 함수나 클래스를 다양한 타입으로 재사용할 수 있게 해줍니다.


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

console.log(identity<string>('Hello')); // Hello
console.log(identity<number>(123)); // 123

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = (x, y) => x + y;

console.log(myGenericNumber.add(5, 10)); // 15

타입 가드


타입 가드는 런타임에 타입을 좁히는 방법으로, 유니언 타입에서 특정 타입을 구별할 수 있게 해줍니다.


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

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

printValue(123); // Number: 123
printValue('Hello'); // String: Hello

타입 추론


타입스크립트는 변수의 초기값을 바탕으로 타입을 자동으로 추론할 수 있습니다.


let message = 'Hello, TypeScript!'; // 타입은 string으로 추론
console.log(message);

let count = 123; // 타입은 number로 추론
console.log(count);

모듈


타입스크립트는 ES6 모듈 시스템을 지원하며, 파일 간에 코드를 모듈화할 수 있습니다.


모듈 내보내기


math.ts 파일에서 모듈을 내보냅니다.


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

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

모듈 가져오기


main.ts 파일에서 모듈을 가져옵니다.


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

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

타입 선언 파일


타입 선언 파일(.d.ts)은 JavaScript 라이브러리의 타입 정보를 타입스크립트에 제공하는 파일입니다. 예를 들어, jQuery 라이브러리의 타입 선언 파일을 설치하고 사용합니다.


npm install @types/jquery


// index.ts
import * as $ from 'jquery';

$(document).ready(() => {
  $('body').html('<h1>Hello, jQuery with TypeScript!</h1>');
});

타입스크립트 프로젝트 설정


타입스크립트를 사용하여 프로젝트를 설정하는 방법을 살펴보겠습니다. 간단한 타입스크립트 프로젝트를 설정하고, 컴파일 및 실행하는 방법을 설명합니다.


tsconfig.json 설정


tsconfig.json 파일을 생성하고, 컴파일러 옵션을 설정합니다.


{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

예제 프로젝트


src 디렉토리를 생성하고, 간단한 타입스크립트 코드를 작성합니다.


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

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


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

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

컴파일 및 실행


타입스크립트 코드를 컴파일하고 실행합니다.


tsc
node dist/index.js

컴파일된 JavaScript 파일은 dist 디렉토리에 생성됩니다. node 명령어를 사용하여 컴파일된 파일을 실행할 수 있습니다.


결론


타입스크립트는 JavaScript에 정적 타입을 추가하여 코드의 안정성과 가독성을 높여주는 강력한 도구입니다. 이번 포스팅에서는 타입스크립트의 기본 문법과 고급 문법, 그리고 프로젝트 설정 방법을 살펴보았습니다. 타입스크립트를 사용하면 컴파일 타임에 타입 오류를 발견하여 런타임 오류를 줄이고, 유지보수성을 향상시킬 수 있습니다. 이러한 기능을 잘 활용하면 더 안전하고 효율적인 코드를 작성할 수 있습니다.

이 포스팅이 타입스크립트를 이해하고 활용하는 데 도움이 되길 바랍니다. 질문이나 추가 정보가 필요하시면 언제든지 댓글로 남겨주세요.

Tags:
다음 이전