2023 - 07 - 23 타입스크립트 TypeScript - 기본 타입, boolean, number, string, 배열, 템플릿리터럴, 튜플, tuple, enum

 

오늘 배운 것

타입스크립트 TypeScript - 기본 타입

 

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

타입 : 데이터의 타입 (숫자열, 문자열, 논리값, 배열, 객체 등등)

타입을 이해하고 올바르게 사용하면 코드의 가독성과 안정성이 향상된다.

 

잘못된 타입을 사용하거나, 예상치 못한 타입이 사용될 경우에는 오류가 발생할 수 있는데, 이러한 오류는 컴파일 시간에 발생하는 것이 아닌, 실행시간에 발생한다. 

 

타입 안정성: 코드가 예상한 타입대로 동작함을 보장하는 것. 타입 안정성이 높을수록 코드 품질이 좋아지며, 실행시간에 발생할 수 있는 오류를 줄일 수 있다. 또한 타입을 제대로 이해하고 활용하면 코드의 안정성이 향상되며, 테스트와 디버깅 시간을 줄일 수 있다.

 

TypeScript는 정적 타입 시스템을 도입함으로써 이러한 이점들을 제공한다.

---

기본 타입

 

1. 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 => 숫자열

 

보통 일반적인 프로그래밍 언어에서는 

정수 : short, int, long 을 쓰고,

실수 : float, double 을 쓴다.

 

하지만 타입스크립트에서는 number타입이 정수, 실수 뿐 아니라 2, 8. 16진수까지 표현할 수 있다.

 

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 (문자열, 텍스트 데이터)

 

string 타입은 따옴표. 큰따옴표, 백틱 등을 사용해 문자열을 표현할 수 있다.

ES6문법부터 생긴 템플릿 리터럴을 사용할 때 백틱 (백쿼트)를 사용한다.

 

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. 튜플 (tuple)

 

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

 

배열과 튜플의 차이 :

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

예를들어, 배열에 다음과 같이 number[] 라고 명시한 상황에서 마지막에 "88"이라는 문자열을 넣으면 오류가 발생한다.

const testScores: number[] = [90, 85, 78, 92, “88”];

 

하지만, 튜플은 어떤 타입의 원소를 허용할 것인지 정의만 해주면 된다.

아래처럼, 각각 string, number, boolean이라는 3개의 각각 다른 타입의 데이터를 보관하게 정의를 했다.

튜플에서는, 정의된 데이터의 타입의 개수과 순서를 맞추어 저장을 하는 것이 필수다.

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

이러한 튜플에서는 배열과 마찬가지로, push등을 사용해서 데이터를 더 저장할 수는 있으나 이런 것은 정의된 데이터 타입의 개수보다 더 저장하는 것이므로 좋은 선택이 아니다.

 

 

6. 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);