TypeScript 기본 타입

안녕하세요. Humanscape의 개발자 David입니다.

이전 글인 TypeScript를 사용하는 이유에 이어 TypeScirpt 문서의 Handbook 을 살펴보겠습니다.

Handbook은 크게 두 가지 세션(The Handbook: TypeScript에 대한 포괄적인 개념, The Handbook Referance: TypeScript 작동 개념에 대한 풍부한 이해)으로 나누어져있습니다. 오늘을 The Handbook의 기본타입 내용을 다루겠습니다.

Handbook을 공부하고 나면 아래와 같은 능력이 생기게됩니다.

일반적으로 사용하는 TypeScript 구문 및 패턴을 읽고 이해하기

중요한 컴파일러 옵션의 효과 설명하기

대부분의 경우에서 타입 시스템 동작을 올바르게 예측하기

간단한 함수, 객체 또는 클래스에 대한 .d.ts 선언 작성하기

기본타입

Boolean, Number, String, Array, Tuple, Enum, Any, Void, Null and Undefined, Never, Object, Type assertions, let

Boolean

let isDone: boolean = false;

Number

JavaScript처럼, TypeScript의 모든 숫자는 부동 소수 값입니다.

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

String

let color: string = 'blue'; // '', '' 모두 가능
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;

// sentence1과 sentence2의 결과는 같다.
let sentence1: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;

let sentence2: 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 = [1, 2, 3];

위 두 가지 선언은 완전 같을까?

number[]는 Array의 축약형이기 때문에 의미적으로 완전히 같다.

Despite its appearance, the readonly type modifier can only be used for syntax on array types and tuple types. It is not a general-purpose type operator.

그러나 readonly modifier에서는 아래와 같은 차이가 있다. (참고PR링크, 참고질문링크)

let err1: readonly Array; // error!    
let okay: readonly boolean[]; // works fine
let okay2: ReadonlyArray; // works fine

Tuple

튜플 타입 변수는 Array와는 달리 정확히 명시된 개수 만큼의 원소만을 가질 수 있습니다.

let x: [string, number];
x = ['hello', 10]; // 성공
x = [10, 'hello']; // 오류
console.log(x[0].substring(1)); // 성공
console.log(x[1].substring(1)); // 오류, 'number'에는 'substring' 이 없습니다.
x[3] = 'world'; // 오류, '[string, number]' 타입에는 프로퍼티 '3'이 없습니다.
console.log(x[5].toString()); // '[string, number]' 타입에는 프로퍼티 '5'가 없습니다.
// 단, Array 타입의 프로토 타입 매소드로의 접근은 허용
const validNameAndHeight: [string, number] = ['다비드', 182];
validNameAndHeight.push(123); // 성공

Enum

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

// 기본적으로 Enum은 0부터 시작, 아래와 같이 1부터 시작하도록 바꿔줄 수 있음
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

// 수동 지정도 가능
enum Color {Red = 1, Green = 2, Blue = 4}
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

알지 못하는 타입을 표현해야할 때, 컴파일에서 오류를 잡고 싶지않을 때 사용합니다. 3rd 라이브러리 같은 동적인 콘텐츠를 핸들링 할 때 쓰일 수 있습니다.

let notSure: any = 4;
notSure = 'maybe a string instead';
notSure = false; // 성공

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

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

let list: any[] = [1, true, 'free'];
list[1] = 100; // 성공

Void

void는 어떤 타입도 존재할 수 없음을 나타내기 때문에, any의 반대 타입 같습니다.

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

let unusable: void = undefined;
unusable = null; // 성공  `--strictNullChecks` 을 사용하지 않을때만

(참고) JS의 void 사용 케이스

Null, Undefined

기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입니다. 이건, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미합니다.

// 이 밖에 이 변수들에 할당할 수 있는 값이 없습니다! 
let u: undefined = undefined;
let n: null = null;

하지만, --strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능합니다. (예외적으로 undefined는 void에 할당 가능합니다) 이건 많은 일반적인 에러를 방지하는 데 도움을 줍니다. 이 경우, string 또는 null 또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined를 사용할 수 있습니다. 유니언 타입은 상급 주제로, 이후 챕터에서 다룹니다.

// As a note: 가능한 경우 --strictNullChecks를 사용할 것을 권장합니다. 하지만 핸드북의 목적에 따라, 사용하지 않는다고 가정합니다.

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) {}
}

위 fail 함수는 타입이 없지만 논리적으로 끝까지 실행될 수 없으니 never 타입추론됩니다.

타입 추론이란? 타입스크립트는 타입 표기가 없는 경우 타입 정보를 제공하기 위해 한다고 합니다.

// x는 타입이 없지만 number로 추론합니다. 
// 이러한 추론은 변수와 멤버를 초기화하고, 매개변수의 기본값를 설정하며, 함수의 반환 타입을 결정할 때 발생합니다.
let x=3;

Object

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

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

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

// object vs Object vs {}
// object: 원시형이 아닌 모든 값들을 받을 수 있다. 
// 여기서 원시형은 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 7가지 이다.
// Object: 자바스크립트에 포함된 모든 생성자들은 Object를 extend한다. 따라서 Object에는 모든 객체가 할당될 수 있다.
function foo1(bar:object){console.log(bar);}
function foo2(bar:Oject){console.log(bar);}
function foo2(bar:{}){console.log(bar);}

foo1([1,2,3]); // OK
foo1({a:1, b:2}); // OK
foo1(123); // Error!!

foo2([1,2,3]); // OK
foo2({a:1, b:2}); // OK
foo2(123); // OK

foo3([1,2,3]); // OK
foo3({a:1, b:2}); // OK
foo3(123); // OK

Object vs any

let foo: any;
let bar: Object;
console.log(foo.customMethod()); // 1. error
console.log(bar.customMethod()); // 2. error

foo 의 타입이 any 이기 때문에 어떠한 값이 들어와도 된다. 즉 customMethod가 있는지 없는지는 트랜스파일 단계에서는 문제가 되지 않습니다.

트랜스파일 단계에서 에러가 난다. Object 타입에 customMethod 라는 메서드가 정의 되어있지 않기 때문이다.

Type assertions(타입 단언)

개발자가 더 타입에 대해 잘 알 때, Type assertions은 컴파일러에게 '날 믿어, 난 내가 뭘 하고 있는지 알아'라고 말해주는 방법입니다. 다른 언어의 타입 변환(형 변환)과 유사하지만, 다른 특별한 검사를 하거나 데이터를 재구성하지는 않습니다.

이는 런타임에 영향을 미치지 않으며, 온전히 컴파일러만 이를 사용합니다.

// 사용 예시1: angle-bracket 문법
let someValue: any = 'this is a string';
let strLength: number = (someValue).length;

// 사용 예시2: as 문법
let someValue: any = 'this is a string';
let strLength: number = (someValue as string).length;

감사합니다.

Get to know us better! Join our official channels below.

Telegram(EN) : t.me/Humanscape KakaoTalk(KR) : open.kakao.com/o/gqbUQEM Website : humanscape.io Medium : medium.com/humanscape-ico Facebook : www.facebook.com/humanscape Twitter : twitter.com/Humanscape_io Reddit : https://www.reddit.com/r/Humanscape_official Bitcointalk announcement : https://bit.ly/2rVsP4T Email : support@humanscape.io