본문 바로가기

JavaScript

[TypeScript] 타입스크립트 알아보기

자바스크립트는 동적 타입 언어이기 때문에 유연하게 코드를 작성할 수 있다는 장점이 있습니다.
이런 유연성은 때로는 오류를 발생하기도 합니다.
타입스크립트는 이 점을 보완하여 컴파일 단계에서 타입 오류를 발견할 수 있도록 합니다.


정적 타입 지원

타입스크립트의 가장 큰 특징은 함수의 인자, 반환값 등에 타입을 지정할 수 있다는 것입니다.

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

console.log(add(5, 3)); // 8 출력
console.log(add('5', 3)); // 오류 발생

예시처럼 숫자만 인수로 받을 수 있게 작성하면 잘못된 데이터가 들어왔을 때 컴파일러가 오류를 미리 알려줍니다.

 

기본 타입

  • number: 숫자형 타입입니다. 정수, 실수, 양수, 음수 등 모든 숫자를 포함합니다.
  • string: 문자열 타입입니다.
  • boolean: 논리 타입입니다. true와 false를 값으로 가집니다.
  • array: 동일한 타입의 값들을 갖는 배열 타입입니다. 예를 들어, 숫자 배열은 number[] 혹은 Array<number>로 선언합니다.
  • tuple: 고정된 개수와 타입을 가지는 배열입니다.
  • enum: 열거형 타입으로, 여러 상수 값을 선언하고 사용할 수 있습니다.
  • any: 어떤 타입이든 할당할 수 있는 타입입니다. 타입스크립트의 장점을 해치므로 최소한으로 사용하는 것이 좋습니다.
  • void: 주로 반환값이 없을 때 사용합니다.
  • undefinednull: undefined와 null 값을 가지는 타입입니다.
  • never: 오류를 발생시킬 때 사용합니다.

 

인터페이스

인터페이스는 객체의 구조를 정의할 때 사용합니다.
특정 속성과 타입을 가진 객체를 선언할 수 있어 코드의 일관성을 유지하는 데 유용합니다.

interface User {
  name: string;
  age: number;
  isAdmin?: boolean;
}

let user: User = {
  name: 'Jane',
  age: 28
};

User 인터페이스는 name과 age 속성을 갖는 객체를 의미합니다.
여기서 isAdmin은 속성으로 지정해도 되고 안 해도 되는 선택적 속성을 의미합니다.

function greetUser(user: User): void {
  console.log(`Hello ${user.name}!`);
}

const newUser: User = { name: 'Subin', age: 24 };
greetUser(newUser); // Hello Subin 출력

작성한 인터페이스는 함수 인자의 타입으로 활용할 수 있습니다.


글을 끝까지 읽어주셔서 감사합니다.
틀린 내용이 있다면 댓글로 지적 부탁드립니다.