[TypeScript] 기본 타입 정리

©2012-2020 Microsoft

[TypeScript] 기본 타입 정리

(TypeScript 버전 : 3.8.3, 글쓴날 : 2020.04.18)

 

---

* 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다.

* 글의 내용은 공식 홈페이지 사용 설명서 기반으로 공부하여 작성하였습니다.

* 글의 맨 아래에 재미로 적용해본 연습용 예제 코드가 있습니다.

---

 

 

TypeScript 기본 타입

---

1) Boolean

맨 아래 예제 코드의 4, 23번 라인에서 사용하였으며,

JavaScript의 Boolean 값(true, false)을 지정합니다.

ex)

let isLoading: boolean = true;

---

2) Number

맨 아래 예제의 9, 28, 29, 33, 37번 라인 등에서 사용하였으며,

JavaScript의 모든 숫자(10진수, 2진수, 16진수 등의 모든 부동 소수점 수)를 지정합니다.

아마 제일 많이 사용되는 타입 중 하나이지 않을까 싶습니다.

ex)

let integer: number = 7;
let double: number = 7.777;

---

3) String

맨 아래 예제의 3, 7, 8, 22, 33번 라인 등에서 사용하였으며,

String은 Java에도 존재하다시피, JavaScript의 문자열을 지정합니다.

ex)

let lastName: string = "Jung";
let fullName: string = `${lastName}Minchan`;

---

4) Array

맨 아래 예제의 29, 97번 라인에서 사용하였으며,

JavaScript의 배열을 지정하며, 2가지 방법으로 사용이 가능합니다.

첫 번째로는, 요소의 타입 뒤 []를 작성하여 사용하는 방법,

두 번째로는, 제네렉을 이용한 Array<요소의 타입>을 작성하여 사용하는 방법입니다.

ex)

let fruit: string[] = ["apple", "banana", "grape"];
let food: Array<string> = ["chicken", "pizza", "hamburger"];

---

5) Tuple

맨 아래 예제의 37번 라인에서 바로 위의 Array 형태로 사용하였으며,

Tuple은 [요소의 타입, 요소의 타입]과 같이 배열에서 고정된 개수의 요소의 타입을 지정합니다.

ex)

let nameAndAge: [string, number] = ["Minchan", 24];

---

6) Enum

맨 아래 예제에서는 사용하지 않았습니다. (의식의 흐름대로 만드느라 사용할 곳을 억지로 찾진 않았습니다...)

기능 자체는 C언어의 열거형을 떠올리시면 될 것 같으며,

사용법은 enum 이름 {요소, 요소, 요소 등...}과 같이 열거 타입 생성 후,

위의 기존 타입들처럼 사용해 주시면 됩니다.

ex)

enum subject {
  Korean = 1,
  English,
  Math,
}
 
let study: subject = subject.Math;

---

7) Any

이번에도 맨 아래 예제에서 사용하지 않았는데, 이는 일부러 사용하지 않은 것으로,

any는 그 자체의 뜻처럼 어떤 타입도 허용하는 타입이며 지정할 타입을 도저히 모르겠을 때 사용합니다.

(따라서, any는 TypeScript 사용 시 지양해야 하며, 무분별한 any 사용 시 JavaScript와 다를 게 없어집니다...)

ex)

let whatIsThis: any = "I don't know";

---

8) Void

맨 아래 예제의 64, 104번 라인에서 사용하였으며

void는 바로 위의 any와 반대로 아무것도 허용하지 않는 타입입니다.

주로 반환값이 없는 함수의 반환 타입으로 사용됩니다.

ex)

const voidReturn = (): Void => {
  console.log("I don't have return!");
};

---

9) Never

맨 아래 예제에서 사용하지 않았으며,

never는 얼핏 void와 비슷해 보일 수 있으나, 사용 조건이 완전히 다릅니다.

void는 반환값이 없을 때 사용하지만, never는 절대 없을 때 사용합니다. (말이 조금 이상한데..)

예를 들자면, 무한 루프를 도는 함수이거나, 오직 에러만을 throw 하는 함수에 사용할 수 있습니다.

ex)

// 무한 루프를 도는 함수
const pointlessFunc = (): never => {
  while (true) {}
};
 
// 에러를 발생시키는 함수
const littlePointlessFunc = (message: string): never => {
  throw new Error(message);
};

---

10) Null, Undefined

마지막으로, 역시 맨 아래 예제에서 사용하지 않은 null과 undefined입니다.

JavaScript로 프로그래밍하다 흔히 만나는 null 타입과 undefined 타입을 지정합니다.

ex)

let itIsNull: null = null;
let itIsUndefined: undefined = undefined;

---

예제 코드

아래의 예제 코드는 타입 스크립트를 처음 공부하며 즉석에서 적용해 보기 위해, 아무 생각 없이 재미로 작성한 코드이니 참고 용도로만 봐 주시면 되겠습니다!

(컴파일 후, 기본 HTML 템플릿에 script 태그 삽입만 하면 실행됩니다.)

 

* PC방 선불 결제 시스템

// string, boolean, number 타입 사용
class Member {
  fullName: string;
  isAdult: boolean;
 
  constructor(
    public firstName: string,
    public lastName: string,
    public age: number
  ) {
    this.fullName = lastName + firstName;
    if (age > 19) {
      this.isAdult = true;
    } else {
      this.isAdult = false;
    }
  }
}
 
// string, boolean 타입 사용
interface MemberInfo {
  fullName: string;
  isAdult: boolean;
}
 
// number, Array<number> 타입 사용
interface UsableCouponInfo {
  totalBill: number;
  CouponList: Array<number>;
}
 
// string, boolean 타입 사용
const getRemainingTime = (name: string, time: number): string =>
  `${name}님의 남은시간은 ${time}시간입니다.`;
 
// string, number, UsableCouponInfo 타입 사용
const getUsableCoupon = (bills: [string, number][]): UsableCouponInfo => {
  let totalBill: number =
    1000 * bills[0][1] + 5000 * bills[1][1] + 10000 * bills[2][1];
  let CouponList: number[] = [];
 
  if (Math.floor(totalBill / 10000)) {
    CouponList.push(10);
  }
  if (Math.floor(totalBill / 5000)) {
    CouponList.push(5);
  }
  if (Math.floor(totalBill / 3000)) {
    CouponList.push(3);
  }
  if (Math.floor(totalBill / 1000)) {
    CouponList.push(1);
  }
 
  let usableCouponInfo: UsableCouponInfo = {
    totalBill: totalBill,
    CouponList: CouponList,
  };
 
  return usableCouponInfo;
};
 
// MemberInfo, void, HTMLHeadingElement, string, UsableCouponInfo, Array<string>, number 타입 사용
const login = (person: MemberInfo): void => {
  let greeting: HTMLHeadingElement = document.createElement("h1");
  let notification: HTMLHeadingElement = document.createElement("h2");
 
  if (!person.isAdult) {
    greeting.innerHTML = "안녕하세요, " + person.fullName + "님";
    notification.innerHTML =
      "에러! : 미성년자는 10시 이후로 결제가 불가능합니다.";
    document.body.append(greeting);
    document.body.append(notification);
    return;
  }
 
  greeting.innerHTML = "안녕하세요, " + person.fullName + "님";
  notification.innerHTML = "알림! : 성인은 10시 이후에도 결제가 가능합니다.";
 
  let remainingTimeInfo: HTMLHeadingElement = document.createElement("h1");
  let remainingTime: string = getRemainingTime(person.fullName, 1);
 
  remainingTimeInfo.innerHTML = remainingTime;
 
  let totalBillInfo: HTMLHeadingElement = document.createElement("h2");
  let usableCouponInfo: HTMLHeadingElement = document.createElement("h3");
 
  let usableCoupon: UsableCouponInfo = getUsableCoupon([
    ["1000won", 3],
    ["5000won", 0],
    ["10000won", 1],
  ]);
 
  console.log(usableCoupon);
  totalBillInfo.innerHTML = `투입 금액 : ${usableCoupon.totalBill}원`;
 
  let list: Array<string> = [];
  usableCoupon.CouponList.map((coupon: number) =>
    list.push(coupon + "시간 쿠폰")
  );
 
  usableCouponInfo.innerHTML = "선택 가능 쿠폰 : " + list.join(", ");
 
  document.addEventListener("DOMContentLoaded", (): void => {
    document.body.append(greeting);
    document.body.append(notification);
    document.body.append(remainingTimeInfo);
    document.body.append(totalBillInfo);
    document.body.append(usableCouponInfo);
  });
};
 
// Member 타입 사용
let member: Member = new Member("민찬", "정", 24);
 
login(member);

 

* 예제 코드 실행 결과

예제 코드 실행 결과

---

 

 

---

 

 

여기까지, TypeScript 기본 타입 정리였습니다.

감사합니다!