타입스크립트 기본타입

벨·2022년 9월 3일

typescript

TypeScript

목록 보기

2/7

타입 소개

타입스크립트는 자바스크립트와 거의 동일한 데이터 타입들을 지원하며, 그 외 다양한 타입들을 사용하여 더 편리하게 사용하는 것이 가능합니다.

boolean

let isDone: boolean = false;

number

자바스크립트에서 처럼 타입스크립트의 모든 숫자 역시 부동 소수 값입니다. 타입스크립트 역시 자바스크립트와 동일하게 2진수, 8진수, 10진수, 16진수 리터럴을 지원합니다.

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

string

타입스크립트는 텍스트 데이터 타입을 string 으로 표현합니다. 자바스크립트와 동일하게, 큰따옴표" 작은따옴표' 안의 값 모두가 string 으로 정의되며, 백틱 `` 을 통한 문자열 리터럴 역시 string 으로 규정할 수 있습니다.

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;

array

배열 타입은 두 가지 방법으로 쓸 수 있습니다. 첫 번째 방법은, 배열 요소들을 나타내는 타입 뒤에 [] 를 쓰는 것입니다.

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

tuple

우리가 아는 자바스크립트의 배열은, 타입을 고정하지 않은 체, 다양한 값을 저장하는 것이 가능합니다.

const arr = [1,2,"beberiche",true];

하지만 타입스크립트의 배열 타입은 들어오는 값이 모두 동일하게 고정되어 쓰이게 되죠. 만약 하나의 배열에 다양한 타입을 넣어야 하는 경우에는 tuple 을 통해 문제를 해결 할 수 있습니다.

튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다. 예를 들어, number , string 이 쌍으로 있는 값을 나타내고 싶을 수 있습니다

// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 성공
// 잘못된 초기화
x = [10, "hello"]; // 오류

enum

enum 은 enumerated type 의 줄임말입니다. 말 그대로 열거하는 타입이라는 의미를 가집니다. 상수 값 중에서 비슷한 종류들을 묶어두기 위한 용도로 자주 사용합니다. 자바스크립트에서 enum 타입을 내장하고 있지는 않지만, 해당 자료형과 비슷하게 구현하는 것은 가능합니다.

타입스크립트에서는 가독성과 좀 더 편리한 타입 정의를 위해 표준 자료형 집합인 enum 을 타입으로 정의하는 것이 가능합니다.

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

enum Color2 {Red = 1, Green = 2, Blue = 4}
let c2: Color2 = Color.Green;

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

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

any

애플리케이션을 만들 때, 알지 못하는 타입을 표현해야 할 수도 있습니다. 이 값들은 사용자로부터 받은 데이터나 서드 파티 라이브러리 같은 동적인 컨텐츠에서 올 수도 있습니다. 이 경우 타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하길 원합니다. 이를 위해, any 타입을 사용할 수 있습니다

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 성공, 분명히 부울입니다.

any 타입은 기존에 JavaScript 로 작업할 수 있는 강력한 방법으로, 컴파일 중에 점진적으로 타입 검사를 하거나 하지 않을 수 있습니다. 혹 다른 언어에서 그렇듯, Object 가 비슷한 역할을 할 수 있을 것 같다고 생각할 수도 있습니다. 그런데, Object 로 선언된 변수들은 오직 어떤 값이든 그 변수에 할당할 수 있게 해주지만 실제로 메서드가 존재하더라도, 임의로 호출할 수는 없습니다. 임의의 값에 대한 타입을 Object 로 정의하지 마세요!

let notSure: any = 4;
notSure.ifItExists(); // 성공, ifItExists 는 런타임엔 존재할 것입니다.
notSure.toFixed(); // 성공, toFixed는 존재합니다. (하지만 컴파일러는 검사하지 않음)

let prettySure: Object = 4;
prettySure.toFixed(); // 오류: 프로퍼티 'toFixed'는 'Object'에 존재하지 않습니다.

tuple 에서 말했던 것 처럼 여러 다른 타입이 섞인 배열을 만드는 것도 가능합니다.

let list: any[] = [1, true, "free"];

list[1] = 100;

void

어떤 타입도 존재하지 않는다는 의미에서 any 와 정반대 성향의 타입이라 할 수 있습니다. 보통 함수에서 반환 값이 없을 때 반환 타입을 지정하기 위해 쓰입니다.

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

null, undefined

자바스크립트의 null, undefined 은 타입스크립트에서 동일하게 null 과 undefined 으로 정의합니다. 기본적으로 null 과 undefined 는 모든 타입의 하위 타입입니다. 예를들어 number 타입을 가진 변수에 null 혹은 undefined 를 할당하는 것이 가능합니다. 이러한 부분은 많은 일반적인 에러를 방지하는데 도움을 줍니다.

let u: undefined = undefined;
let n: null = null;

never

never 타입은 절대 발생할 수 없는 타입을 나타냅니다. 예를 들어, never 는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰입니다. 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 될 수 있습니다.

never 타입은 모든 타입에 할당 가능한 하위 타입입니다. 하지만 어떤 타입도 never 에 할당할 수 있거나, 하위 타입이 아닙니다.(never 자신은 제외) 심지어 any 도 never 에 할당할 수 없습니다.

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

// 반환 타입이 never로 추론된다.
function fail() {
    return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
    while (true) {
    }
}

object

object 는 원시 타입이 아닌 타입을 나타냅니다. number, string, boolean , bigint , symbol, null, 또는 undefined 이 아닌 나머지를 의미합니다.

declare function create(o: object | null): void;

create({ prop: 0 }); // 성공
create(null); // 성공

create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

test

// Primitives
let age: number;
age = 12;

let userName: string;
userName = "Max";

let isInstructor: boolean;
isInstructor = true;


// More complex types
// 배열
let hobbies: string[];
hobbies = ["Sports", "Cooking"];

// 객체
let person: {
  name: string;
  age: number;
};

person = {
  name: "Max",
  age: 32
}

// 배열 + 객체 [{},{}]
let people: {
  name: string;
  age: number;
}[];