[JavaScript] TypeScript 기본 문법 가이드, 꼭 알아야 할 사용법

TypeScript는 자바스크립트의 정적 타입 버전으로, 코드 작성 시간에 오류를 찾아내어 높은 수준의 안정성을 제공하는 프로그래밍 언어입니다. 이 글에서는 TypeScript의 기본 문법을 자세하게 다루어 보겠습니다.

변수 선언 및 타입 지정

TypeScript의 변수 선언은 JavaScript와 동일한 방식으로 사용되지만, 변수 타입이 추가로 지정되어야 합니다. 변수 타입은 명시적으로 지정할 수 있으며, 별도로 지정하지 않으면 타입 추론에 의해 결정됩니다.

let 이름: 타입 = 값;
const 이름: 타입 = 값;

예시:

let num: number = 10;
const text: string = 'Hello, TypeScript!';

기본 타입

TypeScript에서는 다음과 같은 기본 타입을 제공합니다.

• number: 숫자 (정수, 실수)
• string: 문자열
• boolean: 참/거짓
• array: 배열
• tuple: 순서가 지정된 요소의 집합
• enum: 열거형
• any: 모든 타입
• void: 반환 값이 없음
• null: 값이 없음
• undefined: 값이 할당되지 않음
• never: 절대 발생하지 않음

함수

TypeScript에서 함수를 정의하는 방식은 JavaScript와 비슷하며, 매개변수의 타입과 반환 타입을 지정해야 합니다.

function 함수명(매개변수: 타입): 반환 타입 {
  // 함수 구현
}

예시:

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

인터페이스

인터페이스는 객체의 구조를 정의할 때 사용되며, 객체가 특정 속성과 메소드를 갖도록 강제할 수 있습니다.

interface 인터페이스명 {
  속성명: 타입;
  메소드명(): 반환 타입;
}

예시:

interface Person {
  name: string;
  age: number;
  greet(): void;
}

클래스

클래스는 객체 지향 프로그래밍의 기본 구조로, 상태와 메소드를 모아 관리합니다. TypeScript에서는 접근 제한자와 생성자, 멤버 변수 및 메소드를 지원합니다.

class 클래스명 {
  // 접근 제한자: public, private, protected
  // 멤버 변수 private 변수명: 타입;

  // 생성자
  constructor(매개변수: 타입) { 
    // 초기화 
  } 

  // 멤버 메소드
  public 메소드명(): 반환 타입 {
    // 메소드 구현
  }
}

예시:

class User {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
  public greet(): void {
    console.log(`Hello, ${this.name}`);
  }
}

제네릭

제네릭은 함수, 클래스, 인터페이스 등에서 재사용 가능한 코드를 생성할 때 사용되며, 타입을 미리 지정하지 않고 나중에 설정할 수 있게 해줍니다.

function 함수명<타입변수>(매개변수: 타입변수): 타입변수 {
  // 함수 구현
}

예시:

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

타입 가드

타입 가드는 특정 조건에 따라 코드 내에서 변수의 타입을 좁혀 사용할 수 있게 도와주는 기능입니다. 타입 가드는 사용자 정의 타입 보호 함수나 typeof, instanceof 키워드를 활용하여 구현할 수 있습니다.

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

타입 별칭

타입 별칭은 기존 타입에 새로운 이름을 붙여 재사용할 수 있게 해주는 방법입니다. 타입 별칭을 사용하면 길고 복잡한 타입을 간략하게 표현할 수 있습니다.

type 별칭 = 기존 타입;

예시:

type User = {
  name: string;
  age: number;
};

유니온 타입과 인터섹션 타입

유니온 타입은 여러 타입 중 하나로 선언된 변수로 사용할 수 있게 해주며, 인터섹션 타입은 여러 타입을 모두 만족하는 변수로 사용할 수 있게 해줍니다. 각각 ‘|’와 ‘&’ 연산자를 사용하여 표기합니다.

type 유니온 타입 = 타입1 | 타입2;
type 인터섹션 타입 = 타입1 & 타입2;

예시:

type StringOrNumber = string | number;
type NameAndAge = { name: string } & { age: number };

이 가이드를 참고하여 TypeScript의 기본 문법을 익혀 보세요. 가장 기본이 되는 것들을 적어놨으니 능숙하게 다룰 줄 알게 되신다면 타입스크립트로 간단한 메소드나 로직을 구현하는 데에는 큰 무리가 없을 것 같습니다. 본 포스팅에서 소개한 문법 외에도 더 다양한 문법이 있으니, 공식 문서를 통해 더 깊게 탐구해 보시기 바랍니다.