행복을 담는 블로그

[Typescript] Typescript의 기본 타입 본문

FrontEnd/Typescript

[Typescript] Typescript의 기본 타입

hyun0zin 2024. 3. 6. 00:04

타입을 왜 제대로 알아야 하는가?

📌 변수란?
: 프로그래밍 언어에서 데이터를 저장하는 공간

  • 변수에 저장되는 데이터는 여러가지 타입을 가진다.
  • 숫자, 문자열, 논리값, 배열, 객체 등


✅ 타입을 잘 못 사용하는 경우?

  • 잘못된 타입을 사용하면 오류가 발생한다.
  • 컴파일 타임에 오류가 발생하지 않고, 실행 시간에 발생하여 오류 발생 시점을 찾기가 어렵다.

✅ 타입 안정성과 코드 품질

  • 타입 안정성이란 예상한 타입대로 코드가 동작함을 보장한다.
  • 타입 안정성이 높을수록 코드 품질이 좋아지며 오류를 줄 일 수 있다.
  • 코드 안정성이 향상되며, 테스트와 디버깅 시간을 줄일 수 있다!

✅ 원활한 협업에도 도움!

  • 타입을 명확하게 명시하면 코드의 가독성이 높아진다.
  • 다른 개발자들이 이해하기 쉽고, 유지보수가 용이하다.

기본 타입 알아보기

1. Boolean

: true 또는 false를 나타내는 값. 조건문, 비교 연산 등에서 주로 사용

🚨
2가지 상태 (꺼짐/켜짐, 유효함/유효하지않음) 를 표현하고 싶을 때 : boolean 타입 사용
3가지 이상의 상태 표현하고 싶을 때 : enum 또는 string 사용

2. Number

: typescript에서 사용하는 모든 숫자를 나타낸다.

ex) 일반적인 프로그래밍 언어에서 숫자 유형

  • 정수 : short, int, long
  • 실수 : float, double

3. String

: 텍스트 데이터를 나타낸다. / 작은 따옴표(''), 큰 따옴표(""), 백틱(``) 사용하여 문자열 표현

4. 배열

: 기본 타입에 []가 붙은 타입을 말한다.

5. 튜플

: 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특별한 형태의 배열

const person : [string, number, boolean] = ['Spartan', 25, false];

▶️ 정의된 데이터 타입의 개수와 순서에 맞추어 저장하는 것이 중요하다!

🔥 튜플에 데이터를 저장할 수는 있으나, 억지로 데이터를 넣어 튜플 자체의 구조를 변경하는 것은 좋은 방법이 아니다.

6. enum

: 열거형 데이터 타입이다.
다양한 상수를 보다 이해하기 쉬운 문자열 이름으로 접근하여 사용할 수 있는 타입.

  • enum 안에 각 요소는 값이 설정되지 않으면, 기본적으로 숫자 0으로 시작한다.
  • enum 안에 있는 요소는 number 또는 string 타입의 값만 할당할 수 있다.

ex)

enum UserRole {
  ADMIN = "ADMIN",
  EDITOR = "EDITOR",
  USER = "USER",
}

enum UserLevel {
  NOT_OPERATOR, // 0
  OPERATOR // 1
}

변수 선언하기

1. let

: let으로 변수를 선언하면 값을 변경할 수 있다.

let num = 5;
console.log(num); // 5

num = 10;
console.log(num); // 10

2. const

: 변수가 아닌 상수를 선언한다.
한 번 const로 선언한 값은 변경할 수 없다.

const num: number = 5;
console.log(num);  //  5

num = 10;  // 에러: 'num'은 const로 선언되었으므로 다시 할당될 수 없음!

3. readonly

: Typescript에서만 등장한 키워드!
객체의 속성을 불변으로 만드는데 사용한다.
주로, 클래스의 속성이나 인터페이스의 속성을 변경할 수 없게 만든다.

class Person { 
  readonly name: string; //readonly 속성을 줌으로써 불변 상태로 만든다. 
  readonly age: number;

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

const person = new Person('Spartan', 30);

console.log(person.name);  // 'Spartan'
console.log(person.age);   //  30

person.name = 'Jane';  // error : 'name'은 readonly 속성이므로 다시 할당할 수 없다!
person.age = 25;       // error : 'age'은 readonly 속성이므로 다시 할당할 수 없다!