Skip to main content

타입스크립트 기초

· 7 min read
hwayoung kim
hwayoung kim
소주같은 개발자

타입스크립트는 자바스크립트의 상위 집합 언어로, 정적 타입을 지원합니다. 이는 개발자가 코드를 작성할 때 변수의 데이터 타입을 명시해주어 코드의 안정성과 가독성을 높이는 장점이 있습니다.

변수 선언​

타입스크립트에서 변수를 선언할 때는 다음과 같은 방법을 사용합니다.

let 변수이름: 데이터타입 = 값;

예를 들어, 문자열을 저장하는 변수를 선언하고 값을 할당하려면 다음과 같이 작성할 수 있습니다.

let myString: string = "안녕하세요!";

타입스크립트에서는 변수에 저장되는 값이 데이터 타입과 일치하지 않는 경우 컴파일 에러가 발생합니다. 이를 통해 개발자가 미리 타입 에러를 방지할 수 있습니다.

함수 선언​

타입스크립트에서 함수를 선언할 때는 다음과 같은 방법을 사용합니다.

function 함수이름(매개변수: 데이터타입): 반환타입 {
  // 함수 내용
}

예를 들어, 숫자를 두 개 받아서 더한 결과를 반환하는 함수를 작성하려면 다음과 같이 작성할 수 있습니다.

function addNumbers(num1: number, num2: number): number {
  return num1 + num2;
}

마찬가지로, 함수의 매개변수와 반환값의 데이터 타입이 일치하지 않는 경우 컴파일 에러가 발생합니다.

인터페이스​

타입스크립트에서 인터페이스는 다음과 같이 작성합니다.

interface 인터페이스이름 {
  속성이름: 데이터타입;
}

예를 들어, 다음과 같은 구조를 가진 데이터를 다루는 인터페이스를 작성할 수 있습니다.

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

인터페이스는 객체의 구조를 정의합니다. 위의 예시에서는 이름, 나이, 이메일 주소를 가진 객체가 Person 인터페이스의 규격에 맞아야 한다는 것을 의미합니다.

클래스​

타입스크립트에서 클래스를 작성할 때는 다음과 같은 방법을 사용합니다.

class 클래스이름 {
  속성이름: 데이터타입;

  constructor(매개변수: 데이터타입) {
    // 생성자 내용
  }

  메서드이름() {
    // 메서드 내용
  }
}

예를 들어, 다음과 같은 속성과 메서드를 가진 클래스를 작성할 수 있습니다.

class Car {
  brand: string;
  speed: number;

  constructor(brand: string) {
    this.brand = brand;
    this.speed = 0;
  }

  accelerate() {
    this.speed += 10;
  }
}

위의 예시에서 Car 클래스는 brand와 speed라는 속성을 가지고 있으며, accelerate라는 메서드를 실행하면 speed 속성의 값을 10 증가시킵니다.

데코레이터​

타입스크립트에서 데코레이터는 클래스, 메서드, 속성 등에 추가적인 기능을 부여할 수 있습니다. 데코레이터를 사용하면 코드의 가독성을 높이고 중복된 로직을 줄일 수 있습니다.

다음은 데코레이터를 사용하여 클래스에 로그를 추가하는 예시입니다.

function log(target: any) {
  console.log(target);
}

@log
class MyClass {
  // 클래스 내용
}

위의 예시에서 log 함수는 MyClass 클래스를 인자로 받아 로그를 출력합니다. @log 데코레이터는 MyClass 클래스에 로그를 추가하는 역할을 합니다.

제네릭​

타입스크립트에서 제네릭은 다양한 타입의 데이터를 다룰 수 있도록 타입을 매개변수화하는 기능입니다. 이를 통해 중복 코드를 줄이고 재사용성을 높일 수 있습니다.

다음은 제네릭을 사용하여 배열의 요소를 출력하는 함수를 작성하는 예시입니다.

function printArray<T>(arr: T[]) {
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
}

let myArray = [1, 2, 3, 4, 5];
printArray<number>(myArray);

위의 예시에서 printArray 함수는 제네릭 타입 T를 매개변수로 받아 T 타입의 배열을 출력합니다. myArray 변수는 숫자 타입의 배열이므로 printArray 함수에 number 타입을 제네릭 매개변수로 전달합니다.

결론​

타입스크립트는 자바스크립트의 상위 집합 언어로, 정적 타입을 지원하며 개발자가 코드의 안정성과 가독성을 높일 수 있습니다. 변수, 함수, 인터페이스, 클래스 등을 작성하는 방법에 대해 간단히 소개하였으며, 데코레이터를 사용하여 코드의 가독성과 유지보수성을 높이는 방법에 대해서도 알아보았습니다. 또한, 제네릭을 사용하여 중복 코드를 줄이고 재사용성을 높이는 방법에 대해서도 알아보았습니다. 이제 타입스크립트를 사용하여 안정적이고 가독성이 높은 코드를 작성해보세요!