본문 바로가기
FrontEnd/TypeScript

아직도 이거 모르니? 예시코드와 함께 알아보는 Typescript 타입 정의방법

by Fathory 2023. 6. 23.
title

소개

Typescript는 자바스크립트의 상위 집합 언어로, 정적 타입을 지원하여 개발자가 코드를 더욱 안정적으로 작성할 수 있게 도와줍니다. 하지만 Typescript의 타입 정의 방법은 처음 접하는 사람들에게는 낯설 수 있습니다. 이 블로그 포스트에서는 Typescript의 타입 정의 방법을 예시 코드와 함께 자세히 알아보겠습니다.

본문

1. 기본 타입 정의

Typescript에서 변수의 타입을 정의하는 가장 기본적인 방법은 콜론(:)을 사용하는 것입니다. 예를 들어, 다음과 같이 변수의 타입을 명시할 수 있습니다.

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

2. 배열 타입 정의

배열의 타입을 정의할 때는 변수명 뒤에 대괄호([])를 사용합니다. 예를 들어, 다음과 같이 배열의 타입을 명시할 수 있습니다.

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ['John', 'Jane', 'Alice'];

3. 객체 타입 정의

객체의 타입을 정의할 때는 중괄호({})를 사용합니다. 예를 들어, 다음과 같이 객체의 타입을 명시할 수 있습니다.

let person: { name: string, age: number } = {
  name: 'John',
  age: 25
};

4. 함수 타입 정의

함수의 타입을 정의할 때는 매개변수와 반환값의 타입을 명시합니다. 예를 들어, 다음과 같이 함수의 타입을 명시할 수 있습니다.

function add(x: number, y: number): number {
  return x + y;
}

5. 인터페이스를 이용한 타입 정의

인터페이스를 사용하여 복잡한 타입을 정의할 수도 있습니다. 예를 들어, 다음과 같이 인터페이스를 이용하여 객체의 타입을 정의할 수 있습니다.

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

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

6. 제네릭 타입 정의

제네릭을 사용하여 타입을 동적으로 정의할 수도 있습니다. 예를 들어, 다음과 같이 제네릭을 이용하여 배열의 타입을 정의할 수 있습니다.

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

7. 유니온 타입 정의

유니온 타입을 사용하여 여러 타입 중 하나를 선택할 수 있습니다. 예를 들어, 다음과 같이 유니온 타입을 이용하여 변수의 타입을 정의할 수 있습니다.

let value: string | number = 'Hello';
value = 10;

8. 타입 별칭 정의

타입 별칭을 사용하여 타입에 이름을 부여할 수 있습니다. 예를 들어, 다음과 같이 타입 별칭을 이용하여 객체의 타입을 정의할 수 있습니다.

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

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

9. 클래스 타입 정의

클래스의 타입을 정의할 때는 클래스 이름을 사용합니다. 예를 들어, 다음과 같이 클래스의 타입을 명시할 수 있습니다.

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

let person: Person = new Person();
person.name = 'John';
person.age = 25;

10. 모듈 타입 정의

모듈의 타입을 정의할 때는 export 키워드를 사용합니다. 예를 들어, 다음과 같이 모듈의 타입을 명시할 수 있습니다.

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

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

결론

이 블로그 포스트에서는 Typescript의 타입 정의 방법을 예시 코드와 함께 알아보았습니다. 기본 타입부터 복잡한 타입까지 다양한 방법을 사용하여 변수, 배열, 객체, 함수 등의 타입을 정의할 수 있습니다. Typescript의 타입 정의 방법을 숙지하면 코드의 가독성과 안정성을 높일 수 있으며, 개발 과정에서 발생할 수 있는 오류를 사전에 방지할 수 있습니다.

반응형