타입스크립트에서의 데이터 타입 사용 방법 - boolean, number, string, array, tuple, enum

타입스크립트에서 데이터 타입 사용

대부분 자바스크립트에서의 사용법과 같다.

 

1. boolean(불리언)

참(true)/거짓(false) 값을 나타낸다.

 

사용 예시

- /src/test.ts

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

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

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

 

컴파일

$ tsc --build

 

- /dist/test.js

"use strict";
function isValidPassword(password) {
    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),

2진수, 8진수, 16진수 모두 'number'로 사용 가능하다.

 

사용 예시

- /src/test.ts

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

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

※ Math.PI는 파이(π)를 나타낼때 사용하는 방법이다.

 

컴파일

$ tsc --build

 

- /dist/test.js

"use strict";
function calculateArea(radius) {
  return Math.PI * radius * radius;
}
const radius = 5;
const area = calculateArea(radius);
console.log(Math.PI);
console.log(`반지름이 ${radius}인 원의 넓이: ${area}`);

 

실행

 

 

3. string(문자열)

자바스크립트와 같이 텍스트 데이터를 정의하기위해 사용되며

일반적인 문자열은 '따옴표', "쌍따옴표"로 감싸고,

${템플릿 리터럴}을 사용할때는 ``(백틱)으로 감싼다

 

사용 예시

- /src/test.ts

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

const userName = "ctrs";
const greeting = greet(userName);
console.log(greeting);

 

컴파일

$ tsc --build

 

- /dist/test.ts

"use strict";
function greet(name) {
  return `안녕, ${name}!`;
}
const userName = "ctrs";
const greeting = greet(userName);
console.log(greeting);

 

실행

 

 

4. array(배열)

배열의 사용법은 자바스크립트와 같다.

 

사용 예시

- /src/test.ts

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}`);

 

컴파일

$ tsc --build

 

- /dist/test.js

"use strict";
function calculateSum(numbers) {
    let sum = 0;
    for (let i = 0; i < numbers.length; i++) {
        sum += numbers[i];
    }
    return sum;
}
const testScores = [90, 85, 78, 92, 88];
const sumScore = calculateSum(testScores);
console.log(`점수의 총합: ${sumScore}`);

 

실행

 

 

5. tuple(튜플)

타입스크립트에서 배열을 선언하려면 내용물이 숫자일때 number[], 문자열일때 string[]로 정의하는데

이 경우 내용물이 사전에 지정해준 데이터 타입과 다를 경우 아래와 같이 에러를 표시한다

 

이 때 튜플을 사용한다면 어떤 타입의 원소를 허용할 것인지 정의만 해주면 사용 가능하다.

하지만 선언했던 데이터 타입과의 순서가 다르다면 에러가 발생하기에

데이터 타입과 개수와 순서를 맞추어야만 한다.

push 등의 배열 메소드를 사용해서 데이터 타입 정의의 수와 내용을 수정할 수는 있으나,

이 경우 해당 변수 혹은 함수를 사용하던 코드들이 모두 에러가 발생할테니 하지 않는 것이 좋다.

 

 

 

6. enum(이넘)

enumeration의 약자이다.

 

열거형 데이터 타입이라고 한다.

다양한 상수를 이해하기 쉽게 문자열 이름으로 접근, 사용할 수 있게 하는 타입이며,

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

 

사용 예시

- /src/test.ts

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

 

컴파일

$ tsc --build

 

- /dist/test.js

"use strict";
var UserRole;
(function (UserRole) {
  UserRole["ADMIN"] = "ADMIN";
  UserRole["EDITOR"] = "EDITOR";
  UserRole["USER"] = "USER";
})(UserRole || (UserRole = {}));
var UserLevel;
(function (UserLevel) {
  UserLevel[(UserLevel["NOT_OPERATOR"] = 0)] = "NOT_OPERATOR";
  UserLevel[(UserLevel["OPERATOR"] = 1)] = "OPERATOR";
})(UserLevel || (UserLevel = {}));
function checkPermission(userRole, userLevel) {
  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.EDITOR;
const userLevel = UserLevel.NOT_OPERATOR;
checkPermission(userRole, userLevel);

 

실행

 

enum은 명확하게 관련된 상수 값들을 그룹화할때 사용하는게 좋지만

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