TypeScript - 3주차(타입의 종류 1)

기본 타입 훑어보기

1) boolean

• boolean 타입은 참(true)와 거짓(false)값을 나타낸다.
• 이외의 값은 표현 할 수 없다.
• 조건문, 비교 연상 등에서 주로 사용된다. 

 

사용 사례

function isValidPassword(password: string): boolean {
  return password.length >= 8;
}

const password = "q1w2e3r4!";
const valid = isValidPassword(password);

if (valid) {
  console.log("유효한 패스워드입니다!");
} else {
  console.log("유효하지 않은 패스워드입니다!");
}

 

2) number

• number타입은 TypeScript에서 사용하는 모든 숫자를 나타낸다.
• 보통 일반적인 프로그래밍 언어에서는 각 숫자의 유형마다 타입이 다르게 있다.
• 정수는 short, int, long을 쓰고, 실수는 flaot, double을 쓴다.
• 하지만, TypeScript에서는 number 타입이 정수, 실수 뿐 아니라 2,8,16 진수까지 표현할 수 있다.
• 모든 수치 연산에 사용되는 값은 number 타입으로 명시해준다.

 

사용사례

function calculateArea(radius: number): number {
  return Math.PI * radius * radius;
}

const radius = 5;
const area = calculateArea(radius);
console.log(`반지름이 ${radius}인 원의 넓이: ${area}`);

 

Math.PI * radius * radius와 같이 무리수와 정수를 곱한 값도 number로 취급을 할 수 있기 때문에 calculateArea 함수의 리턴 타입도 number 이다.

 

3) string

• 텍스트 데이터를 나타낸다.
• 작은 따옴표(’), 큰 따옴표(”), 백쿼트(`) 를 사용하여 문자열을 표현할 수 있다.
  •   백쿼트는 키보드에서 ~ 와 같은 키이다.
• ES6부터 생긴 템플릿 리터럴을 사용할 때 백쿼트를 써서 사용한다.
• string 타입은 텍스트를 조작하거나 출력할 때 사용한다.

 

사용사례

function greet(name: string): string {
  return `안녕, ${name}!`;
}

const name = "Spartan";
const greeting = greet(name);
console.log(greeting);

 

- return `안녕, ${name}!`; 이 템플릿 리터럴이다.

기존에는 문자열과 표현식을 사요하기 위해서는 + 연산자를 반복해서 붙여야되는 번거로움이 있었지만 템플릿 리터럴이 등장한 이후에는 + 연산자를 사용하지 않아도 된다.

 

4) 배열

• 배열은 기본타입에 []가 붙은 형태의 타입을 말한다.

 

사용사례

function calculateSum(numbers: number[]): number {
  let sum: number = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

const testScores: number[] = [90, 85, 78, 92, 88];
const sumScore = calculateSum(testScores);
console.log(`점수의 총합: ${sumScore}`);

 

5) 튜플

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

 

튜플과 배열의 차이

- 배열은 number[], string[] 처럼 같은 타입의 원소만 가질 수 있다. 

• const testScores: number[] = [90, 85, 78, 92, “88”];
  • 위의 코드처럼 마지막 원소를 string 타입으로 넣으면 에러가 발생하죠!
  • 숫자만 넣어줘야 합니다. 즉, 같은 타입의 원소만 취급할 수 있어요.
• 하지만, 튜플은 어떤 타입의 원소를 허용할 것이지 정의만 해주면 된다.
  • 얼마든지 허 용된 타입의 데이터들을 저장할 수 있다.

 

사용사례

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

 

•  person이라는 튜블에 데이터를 더 저장하고 싶다면?
  • 원칙적으로는 데이터를 더 저장하는 것은 타입 안정성에 위배가 되는 행위이다.
  • 따라서, 정의된 데이터 타입의 개수와 순서에 맞추어 저장을 하는 것이 필수이다.
  • 튜플에서도 배열의 메소드인 push를 사용하여 정의된 데이터 타입의 개수보다 더 저장하할 순 있다.
  • 하지만, 이렇게 억지로 데이터를 넣으면 튜플 구조가 내부적으로 변경이 되니 좋은 선택은 아니다! 

 

6) enum

enum은 명확하게 관련된 상수 값들을 그룹화하고자 할 때 사용하는 게 좋아요. 그러나 값의 수가 많지 않고, 값들 사이의 관계가 뚜렷하지 않으면 사용하지 않는 게 나아요!

 

• enum이란?
  • enum은 열거형 데이터 타입이다. 
  • 다양한 상수를 보다 더 이해하기 쉬운 문자열 이름으로 접근하고 사용할 수 있게 하는 타입이다.
  • enum 안에 있는 각 요소는 값이 설정되어 있지 않으면 기본적으로 숫자 0 으로 시작한다.
  • enum 안에 있는 요소에는 number 혹은 string 타입의 값만을 할당할 수 있다. 

 

사용 사례

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

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

function checkPermission(userRole: UserRole, userLevel: UserLevel): void {
  if (userLevel === UserLevel.NOT_OPERATOR) {
    console.log('당신은 일반 사용자 레벨이에요');
  } else {
    console.log('당신은 운영자 레벨이군요');
  } 

  if (userRole === UserRole.ADMIN) {
    console.log("당신은 어드민이군요");
  } else if (userRole === UserRole.EDITOR) {
    console.log("당신은 에디터에요");
  } else {
    console.log("당신은 사용자군요");
  }
}

const userRole: UserRole = UserRole.EDITOR;
const userLevel: UserLevel = UserLevel.NOT_OPERATOR;
checkPermission(userRole, userLevel);