[TypeScript] Type + JavaScript - (1) 기본 타입

---

 1. 기본 타입

 자바스크립트의 원시 타입을 대부분 지원하며 추가적으로 Enum(열거)타입과 기타 여러 유용한 타입을 지원한다. 다만 원시값을 래핑하는 Boolean, Number, String 내장 객체타입도 지원하지만 매우 드물게 사용되므로 웬만해선 소문자로 시작하는 원시 타입을 사용하자.

 

boolean(불리언)

true/false값

const a : boolean = false;
const b : boolean = 1;
// Error : Type 'number' is not assignable to type 'boolean'.ts(2322)

 

number(숫자)

JavaScript와 같이 TypeScript에서도 모든 숫자는 부동 소수점 값이다. 모든 부동 소수에는 number라는 타입이 붙여진다. TypeScript는 16,10, 2, 8진수 리터럴도 지원한다.

const decimal: number = 6;
// compiled: var decimal = 6;
const hex: number = 0xf00d;
// compiled: var hex = 0xf00d;
const binary: number = 0b1010;
// compiled: var binary = 10;
const octal: number = 0o744;
// compiled: var octal = 484;
const floatingPoint: number = 0.1;
// compiled: var floatingPoint = 0.1;
const square: number = 2 ^ 2;
// compiled: var square = 2 ^ 2;

 

 

string (문자열)

일반적인 문자열 데이터 타입

let username: string = "churnobyl";
username = "bbb";
// OK
username = 5;
// Error : Type 'number' is not assignable to type 'string'.ts(2322)

const age: number = 20;
const sentence = `Hello, I'm ${age} years old`;
// compiled: var sentence = "Hello, I'm ".concat(age, " years old");

 

 

Array (배열)

TypeScript에서 배열 타입은 두 가지 방법으로 쓸 수 있다. 타입 뒤에 []를 쓰거나, 제네릭 배열 타입을 쓰거나.

const list: number[] = [1, 5, 7];
const list2: Array<number> = [1, 5, 7];

 

 

Tuple (튜플)

요소의 타입과 개수가 고정된 배열을 표현하기 위해서 튜플 타입을 사용할 수 있다. 다만 튜플 안의 요소의 타입이 모두 같을 필요는 없고 순서만 지켜주면 된다.

let x: [string, string, number];

x = ["Hi", "MyAgeIs", 5];
// OK

x = ["Hi", "MyAgeIs"];
// Error: Type '[string, string]' is not assignable to type '[string, string, number]'.
//  Source has 2 element(s) but target requires 3.ts(2322)

console.log(x[0].toLowerCase());
// OK

console.log(x[2].toLowerCase());
// Error: Property 'toLowerCase' does not exist on type 'number'.ts(2339)

x[5] = "New Element";
// Error: Type '"New Element"' is not assignable to type 'undefined'.ts(2322)

 

 

Enum (열거)

자바나 C#같이 TypeScript는 Enum 타입을 지원한다. 어떤 값의 집합에 이름을 부여해 사용할 수 있다.

// 기본적으로 enum은 0부터 시작해 멤버들의 번호를 매김
enum ButtonType {
  Small,
  Medium,
  Big,
}

const submitButton: ButtonType = ButtonType.Big;

console.log(submitButton);
// 2

// 첫번째 멤버를 수동으로 바꾸면 해당 숫자부터 번호를 매김
enum Role {
  Common = 1,
  Admin,
}

console.log(Role[0]);
// undefined
console.log(Role[2]);
// Admin

 

 열거형은 JavaScript에는 존재하지 않는 개념이므로 이를 컴파일하면 자바스크립트의 객체로 변환한다. 예를 들어 ButtonType은 컴파일될 때, Small, Medium, Big 멤버가 추가되고 각각 0, 1, 2 값을 가진다. 다시 반대로도 접근할 수 있도록 0, 1, 2 멤버도 추가되고 각각 Small, Medium, Big 값을 가진다.

 

컴파일된 Enum

var ButtonType;
(function (ButtonType) {
  ButtonType[(ButtonType["Small"] = 0)] = "Small";
  ButtonType[(ButtonType["Medium"] = 1)] = "Medium";
  ButtonType[(ButtonType["Big"] = 2)] = "Big";
})(ButtonType || (ButtonType = {}));

결과

 

 컴파일된 결과를 보면 ButtonType 변수를 선언한 뒤, 괄호로 쌓인 블럭에 함수를 넣어 즉시 실행하는 즉시실행함수(IIFE, Immediately Invoked Function Expression)을 사용해 안에 멤버들을 추가해준다.

 

 

any

 애플리케이션을 만들 때, 알지 못하는 타입을 표현해야 할 수도 있다.이 때 any 타입을 사용할 수 있다. any타입을 사용하면 컴파일 시간에 검사를 하지 않고 통과한다. 즉, 자바스크립트처럼 작업할 수 있는 방법이지만 그럼 타입스크립트를 사용하는 이유가 없으므로 초기 개발시에만 해놓고 추후에 확실한 타입으로 대체해야 한다.

// Like JavaScript
let a: any = 4;
a = "Gamja";
a = [1, 2, 3];
a = false;
// OK

const b: any = 4;
b.ifItExists();
b.toFixed();
// OK

 

 

void

어떤 타입도 존재할 수 없음을 나타낸다. any타입과 정반대의 역할을 한다. 변수에 이 타입을 지정했을 때, undefined 혹은 strictNullChecks옵션이 false일 때 null만 지정할 수 있으므로 그다지 유용하지 않다. 따라서 일반적으로 어떤 함수의 리턴값이 없을 때 void를 지정한다.

// 변수에 타입을 지정했을 시 오직 undefined만 가능
let unusable: void = undefined;
// OK

// tsconfig.json에서 strictNullChecks옵션이 false일 때는 null도 가능 
unusable = null;
// OK

 

 

null & undefined

null, undefined도 역시 그 자체만으로는 유용하지 않으며, 다른 모든 타입의 하위타입이다.

// 얘만 됨
let un: undefined = undefined;
let nu: null = null;

// 다른 모든 타입의 하위타입
let a: number = undefined;
let b:string = null;

 

 

never

절대 발생할 수 없는 타입을 나타낸다. never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환타입으로 사용된다. never타입은 모든 타입에 할당 가능한 하위 타입이지만, 어떤 타입도 never에 할당할 수 없고 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

원시 타입이 아닌 타입을 나타낸다. 예를 들어, 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); // 오류

 

 

타입 단언 (Type assertions)

개발자가 타입스크립트보다 값에 대해서 더 잘 알고 있을 때, 해당 값을 확정지어줄 수 있다. 타입 단언도 두가지 형태로 사용할 수 있다.

 

let a: any = "이건 문자열";

// angle-bracket 문법
let aLength: number = (<string>a).length;

let b: any = 5555;

// as 문법
let bToFixed = (b as number).toFixed();