[TypeScript] ep.2 기본타입

모리스·2022년 6월 9일
0

TypeScript

목록 보기
2/2
post-thumbnail

📌 개요

이번 노트에서는 타입스크립트에서 가장 중요하다고 볼 수 있는 기본 타입에 대해서 기술하려 한다.

📌 기본 타입

타입스크립트는 자바스크립트와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용하여 더 편리하게 사용할 수 있다.
기술 노트인 만큼 어느정도의 타입 지식은 알고있다고 생각하여 다른 언어들과 공통되는 타입들은 간단하게 넘어가려한다.

📒 Boolean

  • boolean 값은 참/거짓(true/false)를 나타내는 타입이다.
let isDone: boolean = false;

📒 Number

  • 타입스크립트의 모든 숫자는 부동 소수의 값이다. 부동 소수에는 number라는 타입이 붙혀진다. 타입스크립트는 16진수, 10진수, 8진수, 2진수를 지원한다.
let decimal: number = 6; // 10
let hex: number = 0xf00d; // 16
let octal: number = 0o744; // 8
let binary: number = 0b1010; // 2

📒 String

  • 텍스트 데이터 타입이다. 자바스크립트처럼 타입스크립트도 큰따움표(")작은따움표(')로 문자열을 감싸서 사용한다.
let color: string = "blue";
let fullName: string = 'Morris An';

또한 자바스크립트와 같이 벡틱(`)을 사용하여 다음과 같이 사용할 수 있다.

let name: string = 'Morris';
let age: number = 27;
let sentence: string: `Hello, my name is ${name}. I'm ${age} years old.`

📒 Array

타입스크립의 배열도 자바스크립트의 배열과 동일하다. 배열 선언 타입은 두 가지 방법으로 쓸 수 있다.

let list: number[] = [1, 2, 3];
let list Array<number> = [1, 2, 3];

📒 Tuple

튜플 타입은 요소의 타입과 개수가 고정된 배열을 뜻한다. 단 요소들의 모든 타입이 같이 않아도 된다.

let x: [string, number, boolean]; // x라는 튜플 선언
x = ['morris', 27, true]; // 초기화
x = [10, false, 'morris]; // error

튜플은 정해진 인덱스에 접근하여 값을 읽을 수 있다.

console.log(x[0]); // morris
console.log(x[1]); // 27

정해진 인덱스 이외에 다른 인덱스에 접근하면, 오류가 난다.

x[3] = 'an'; // error
console.log(x[5].toString()); // error

📒 Enum (열거)

자바스크립트의 표준 자료형 집합과 사용하면 도움이 되는 데이터 타입은 enum이다. enum은 값은 집합에 더 나은 이름을 붙여줄 수 있다.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

기본적으로 enum0부터 시작하여 멤버들의 번호를 매긴다. 멤버 중 하나의 값을 수동으로 설정하여 번호를 바꿀 수 있다.
아래 예제에서 Red1로 설정하면 그 뒤의 Green2, Blue3이 된다.

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

또, 모든 값을 수동으로 적용할 수 있다.

enum Color {Red = 1, Green = 4, Blue = 5}
let c: Color = Color.Green;

enum의 유용한 기능 중 하나는 매겨진 값을 사용해 enum 멤버의 이름을 알아 낼 수 있다는 것이다.
아래 예에서 2라는 값이 위의 어떤 Color enum 멤버와 매칭되는지 알 수 없을 때, 이에 일치하는 이름을 알아낼 수 있다.

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName); // 값이 2인 'Green'이 출력된다.

📒 Any

타입스크립트 작성 시 알지 못하는 타입을 표현햐야 할 경우가 있다. 이 값들은 사용자로부터 받은 데이터서드 파티 라이브러리 같은 동적인 컨텐츠에서 올 수 있다. 이 경우 타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하도록 한다. 다시말해 any타입은 기존 자바스크립트로 작업할 수 있는 강력한 방법이다.
But, 타입이 불문명한 경우 사용하되, any를 남발하게 된다면 타입스크립트를 쓰는 의미가 없을 것이다.

let notSure: any = 4;
notSure = 'Maybe a string instead';
notSure = false;

또한, any타입은 타입의 일부만 알고 전체는 알지 못할 때 유용하다. 예를 들어, 여러 다른 타입이 섞인 배열을 다룰때 유용하다.

let list: any[] = [1, ture, 'free'];
list[1] = 100; 
// list 배열의 1번째에는 boolean 타입이 있으나,
//list를 any 타입으로 지정하여 list 1번째 인덱스에 100이 정상적으로 들어간다.

📒 Void

void는 어떠한 타입도 존재하지 않을 때 사용한다. void는 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰인다.

function warnUser(): void {
  console.log('This is my warning message');
}

void는 타입 변수로 선언하는 것은 유용하지 않은데, 그 이유는 타입이 없기 때문에 null 또는 undefined만 할당할 수 있기 때문이다.

📒 Null & Undefined

타입스크립트는 undefinednull 둘 다 각각 자신의 타입 이름으로 undefined, null을 사용한다. 다시말해, undefinednull 타입으로 변수를 선언하면 undefinednull 밖에 값을 할당할 수 있다.

let unde: undefined = undefined;
let nul: null = null;

📒 Never

never 타입은 절대 발생할 수 없는 타입을 나타낸다. 예를 들어, never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다.
never 타입은 모든 타입에 할당 가능한 하위 타입이다. 그러나 어떠한 타입도 never에 할당할 수 있거나, 하위 타입이 아니다.

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
  throw new Error(message);
}

// 반환 타입이 never로 타입 추론
function fail() {
  return error('something failed');
}

📌 참조

https://typescript-kr.github.io/pages/basic-types.html

profile
모바일 앱 개발 노트 :)

2개의 댓글

comment-user-thumbnail
2022년 6월 9일

좋은 정리 감사합니다!

1개의 답글