타입스크립트의 기본 타입

타입스크립트의 기본 타입

 

1. boolean

참, 거짓 값을 나타낸다.

세 가지 이상의 상태를 표현하고 싶을 때는 enum이나 string을 사용하는 것이 좋다.

 

2. number 

말 그대로 숫자를 나타낸다.

 

3. string

텍스트 데이터를 나타낸다.

 

4. 배열

기본 타입에 대괄호가 붙은 형태이다.

 

5. 튜플

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

배열은 같은 타입의 원소만 가질 수 있다면, 튜플은 다양한 타입의 원소를 가질 수 있다.

const person: [string, number, boolean] = ['Spartan', 25, false];
// const person2: [string, number, boolean] = [25, 'Spartan', false]; // 오류!

튜플에 데이터를 더 저장하고 싶다면 타입 안전성을 위해 정의된 타입과 순서에 맞춰 저장해야 한다.

 

6. Enum

명확하게 관련된 상수 값들을 그룹화 할 때 사용한다.

열거형 데이터 타입이라고도 하고, 다양한 상수를 이해하기 쉬운 문자열 이름으로 접근하고, 사용할 수 있게 한다.

number, string 타입의 값만 할당할 수 있다.

값의 수가 많지 않고 값들 사이의 관계가 뚜렷하지 않으면 사용하지 않는 것이 좋다.

// 사용자 역할을 나타내는 열거형(enum)
enum UserRole {
  ADMIN = "ADMIN", // 관리자
  USER = "USER",   // 일반 사용자
}

// 사용자 레벨을 나타내는 열거형(enum)
enum UserLevel {
  BASIC,   // 기본 회원 (0)
  PREMIUM  // 프리미엄 회원 (1)
}

// 사용자의 역할을 출력하는 함수
function showUserRole(userRole: UserRole): void {
  // 만약 사용자가 관리자라면
  if (userRole === UserRole.ADMIN) {
    console.log("관리자입니다.");
  } else {
    // 그렇지 않다면 (일반 사용자라면)
    console.log("일반 사용자입니다.");
  }
}

// 사용자의 레벨을 출력하는 함수
function showUserLevel(userLevel: UserLevel): void {
  // 만약 사용자가 기본 회원이라면
  if (userLevel === UserLevel.BASIC) {
    console.log("기본 회원입니다.");
  } else {
    // 그렇지 않다면 (프리미엄 회원이라면)
    console.log("프리미엄 회원입니다.");
  }
}

// 사용자의 역할을 'USER'로 설정
const userRole: UserRole = UserRole.USER;
// 사용자의 레벨을 'PREMIUM'으로 설정
const userLevel: UserLevel = UserLevel.PREMIUM;

// 사용자의 역할을 확인하고 출력
showUserRole(userRole); // 출력: 일반 사용자입니다.
// 사용자의 레벨을 확인하고 출력
showUserLevel(userLevel); // 출력: 프리미엄 회원입니다.

 

---

const, readonly => 불변성 보장

 

1. let

 변수는 값을 변경할 수 있다.

 

2. const

상수는 값을 변경할 수 없다.

 

앞의 두 키워드는 자바스크립트에서 많이 사용되지만 readonly는 타입스크립트에서 등장한 키워드다.

객체의 속성을 불변으로 만드는 데 사용되는 키워드인데, 클래스의 속성이나 인터페이스의 속성을 변경할 수 없게 만들 수 있다.

 

readonly =>

클래스의 속성이나 인터페이스의 속성을 불변으로 만들어 속성 값을 변경할 수 없게 한다.

const 키워드를 사용할 수 없고, 대신 readonly를 사용할 수 없다.

class Person {
  readonly name: string;
  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';  // 에러: 'name'은 readonly 속성이므로 다시 할당할 수 없어요!
// person.age = 25;       // 에러: 'age'은 readonly 속성이므로 다시 할당할 수 없어요!

---

any, unknown, union

 

1. any

모든 타입의 슈퍼 타입으로 어떤 타입의 값이든 저장할 수 있다.

let anything: any;
anything = 5; // 숫자
anything = 'Hello'; // 문자열
anything = { id: 1, name: 'John' }; // 객체

any는 코드 안정성과 유지 보수성을 저해할 수 있으므로 가급적 사용하지 않는 것이 좋다.

 

2. unknown

any 타입과 비슷하지만 더 안전하게 동작한다.

unknwon 타입의 변수에도 모든 타입의 값을 저장할 수 있지만,

다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 한다.

let unknownValue: unknown = '나는 문자열이지롱!';
console.log(unknownValue); // 출력: 나는 문자열이지롱!

let stringValue: string;
// stringValue = unknownValue; // 에러 발생! unknownValue가 string임이 보장이 안되기 때문!
stringValue = unknownValue as string; // 타입 단언을 통해 할당
console.log(stringValue); // 출력: 나는 문자열이지롱!

// typeof 키워드를 이용한 타입 체크
if (typeof unknownValue === 'string') {
  stringValue = unknownValue;
  console.log('unknownValue는 문자열이네요~');
} else {
  console.log('unknownValue는 문자열이 아니었습니다~');
}

 

3. union

unknown 타입은 재할당 시 타입 체크가 되어 안전성을 보장하지만

결국 재할당이 일어나지 않으면 타입 안전성이 보장되지 않는다.

 

union 타입은 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용된다.

| 연산자를 사용하여 여러 타입을 결합하여 포현한다.

type StringOrNumber = string | number;

function processValue(value: StringOrNumber) {
  if (typeof value === 'string') {
    console.log('String value:', value);
  } else if (typeof value === 'number') {
    console.log('Number value:', value);
  }
}

processValue('Hello'); // 출력: String value: Hello
processValue(42); // 출력: Number value: 42

 

주의 => 여러 타입을 하나의 변수로 해결하려는 생각은 지양한다.

 

요약 => 1. any : 모든 타입의 값을 저장할 수 있지만 타입 안정성을 해친다.

2. unknown : any와 비슷하지만, 다른 변수에 할당하려면 타입 체크가 필요하여 더 안전하다.

3. union : 여러 타입을 결합하여 하나의 변수에 사용할 수 있게 한다.