[타입스크립트 프로그래밍 review] 3장 타입의 모든 것

목차

3.1 타입을 이야기하다 
3.2 타입의 가나다 
3.3 마치며

---

3장에서는 타입스크립트에서 이용할 수 있는 타입을 살펴보고, 각각의 타입으로 무엇을 할 수 있는지를 다루고 있다.

전체 개요

3.1 타입을 이야기하다

타입스크립트는 특정 타입만 와야 할 때 이를 명시할 수 있는 언어다.

 

3.2 타입의 가나다

타입스크립트가 지원하는 각각의 타입을 살펴보며 각 타입이 무엇을 포함할 수 있는지, 어떤 동작을 수행할 수 있는지를 살펴보자. 타입 별칭(type alias), 유니온 타입(union type), 인터섹션 타입(intersection type) 등 여러 가지 언어 기능도 확인한다.

3.2.1 any

any로는 뭐든지 할 수 있지만 꼭 필요한 상황이 아니라면 사용하지 않는 것이 좋다. 타입스크립트에서는 컴파일 타임에 모두가 타입이 있어야 하므로 프로그래머와 타입스크립트 둘 다 타입을 알 수 없는 상황에서는 기본 타입인 any라고 가정한다.
any를 사용하면 값이 자바스크립트처럼 동작하기 시작하면서 타임검사기가 더 이상 작동하지 않게 된다. 따라서 되도록 any를 피하는 것이 좋다.

드문 상황이지만 any가 꼭 필요하다면 다음처럼 사용할 수 있다.

let a: any = 666  // any
let b: any = ['danger']  // any
let c = a + b  // any, 타입스크립트에 두 개의 any를 더하라고 지시했기 때문에 세 번째 줄에서는 에러가 발생하지 않는다.

any를 사용하려면 명시적으로 선언해야 한다. 타입스크립트가 어떤 값을 any로 추론해야 하는 상황이라면 편집기에 빨간 밑줄이 표시되면서 컴파일 타임 예외가 발생할 것이다. a와 b의 타입을 명시적으로 any 타입(: any)으로 설정해 타입스크립트에게 개발자의 의도하는 바를 알려줄 수 있으면 예외는 발생하지 않는다. 

TSC 플래그: nolmplicitAny
타입스크립트의 기본 설정은 자유를 허용하므로 any로 추론되는 값을 발견하더라도 예외를 발생시키지 않는다. 그러니 암묵적인 any가 나타났을 때 예외를 일으키고 싶다면 tsconfig.json 파일에서 noImplicitAny 플래그를 활성화하자.

3.2.2 unknown

타입을 미리 알 수 없는 어떤 값이 있을 때 any 대신 unknown을 사용하자. any처럼 unknown도 모든 값을 대표하지만, unknown의 타입을 검사해 정제(refine)하기 전까지는 타입스크립트가 unknown 타입의 값을 사용할 수 없게 강제한다.

unknown은 비교 연산(==, ===, ||, &&, ?)과 반전(!) 연산을 지원하고 자바스크립트의 typeof, instanceof 연산자로 정제할 수 있다.

let a: unknown = 30  // unknown
let b = a === 123  // boolean
let c = a + 10  // 에러 TS2571: 객체의 타입이 'unknown'임
if (typeof a === 'number') {
	let d = a + 10  // number
}

1. 타입스크립트가 무언가의 타입을 unknown이라고 추론하는 상황은 없다. unknown 타입을 사용하고자 한다면 개발자가 명시적으로 설정해야 한다(a).
2. unknown 타입이 아닌 값과 unknown 타입인 값을 비교할 수 있다(b).
3. 하지만 unknown 값이 특정 타입이라고 가정하고 해당 타입에서 지원하는 동작을 수행할 수는 없다(c). 먼저 타입스크립트에게 해당 값이 특정 타입임을 증명해야 한다(d).

3.2.3 boolean

boolean 타입은 비교 연산(==, ===, ||, &&, ?)과 반전(!) 연산을 지원한다.

let a = true  // boolean
var b = false  // boolean
const c = true  // true
let d: boolean = true  // boolean
let e: true = true  // true
let f: true = false  // error: 'false' 타입을 'true' 타입에 할당할 수 없음

1. 어떤 값이 boolean인지 타입스크립트가 추론하게 한다(a, b).
2. 어떤 값이 특정 boolean인지 타입스크립트가 추론하게 한다(c).
3. 값이 boolean임을 명시적으로 타입스크립트에 알린다(d).
4. 값이 특정 boolean임을 명시적으로 타입스크립트에 알린다(e, f).

실제 프로그래밍에서는 보통 첫 번째, 두 번째 방법을 사용하고 세 번째 방법은 거의 사용할 일이 없다.

두 번째와 네 번째 방법은 직관적이지만 이런 기능을 지원하는 언어가 거의 없다. 이 예제는 값을 타입으로 사용하므로 e와 f에 사용할 수 잇는 값은 boolean 차비이 가질 수 있는 값 중 특정한 하나의 값으로 한정된다. 이 기능을 타입 리터럴이라 부른다.

타입 리터럴(type literal)
오직 하나의 값을 나타내는 타입

네 번쨰 줄에서 변수를 명시적으로 타입 리터럴로 설정했으며 세 번째 줄에서는 var나 let 대신 const를 사요하여 타입스크립트가 자동으로 변수의 타입을 리터럴로 추론했다.(const를 사용했으므로 타입스크립트는 그 변수의 값이 절대 변하지 않을 것임을 알게 되어 가장 좁은 타입으로 추론한거임) 타입 리터럴은 모든 곳에서 일어날 수 있는 실수를 방지해 안전성을 추가로 확보해주는 강력한 언어 기능이다.

3.2.4 number

number 타입은 모든 숫자의 집합이다. 덧셈(+), 뺄셈(-), 모듈로(%), 비교(<) 등의 숫자 관련 연산을 수행할 수 있다.

let a = 1234  // number
var b = infinity * 0.10  // number
const c = 5678  // 5678
let d = a < b  // boolean
let e: number = 100  // number
let f: 26.218 = 26.218  // 26.218
let g: 26.218 = 10  // error: '10' 타입을 '26.218' 타입에 할당할 수 없음

1. 타입스크립트가 값이 number임을 추론하게 한다(a, b). → 개발자 주로 사용
2. const를 이용해 타입스크립트가 값이 특정 number임을 추론하게 한다(c). → 개발자 가끔 사용
3. 값이 number임을 명시적으로 타입스크립트에 알린다(e). → 거의 사용 X
4. 타입스크립트에 값이 특정 number임을 명시적으로 알린다(f, g). → 개발자 가끔 사용

3.2.5 bigint

bigint는 자바스크립트와 타입스크립트에 새로 추가된 타입으로, 이를 이용하면 라운딩 관련 에러 걱정 없이 큰 정수를 처리할 수 있다.(number는 2⁵³까지의 정수를 표현할 수 있지만 bigint를 이용하면 이보다 큰 수도 표현할 수 있음) 또한 bigint 리터럴은 반드시 정수여야 한다.

3.2.6 string

stirng은 모든 문자열의 집합으로 연결(+), 슬라이스(.slice)등의 연산을 수행할 수 있다. boolean이나 number 처럼 string 타입도 네 가지 방법으로 선언할 수 있으며 가능하다면 타입스크립트가 string 타입을 추론하도록 두는 것이 좋다. 

3.2.7 symbol

symbol은 ES2015에 새로 추가된 기능이다. 실무에서는 자주 사용하지 않는 편이며 객체와 맵에서 문자열 키를 대신하는 용도로 사용한다. 심벌키를 사용하면 사람들이 잘 알려진 키만 사용하도록 강제할 수 있으므로 키를 잘못 설정하는 실수를 방지한다. 

let a = Symbol('a')  // symbol
let b:symbol = Symbol('b')  // symbol
let c = a === b  // boolean
let d = a + 'x'  // error: '+'연산을 'symbol'타입에 적용할 수 없음

자바스크립트에서 Symbol('a')는 주어진 이름으로 새로운 symbol을 만든다는 의미다. 만들어진 symbol은 고유(unique)하여 다른 symbol과 == 또는 ===로 비교했을 때 같지 않다고 판단된다.(심지어 같은 이름으로 다른 symbol을 만들어도 마찬가지임) symbol도 symbol 타입으로 추론되거나 명시적으로 unique symbol을 정의할 수 있다. 아래 에시는 unique symbol을 만드는 몇 가지 방법이다.

const e = Symbol('e')  // typeof e
const f: unique symbol = Symbol('f')  // typeof f
let g: unique symbol = Symbol('f')  // 'unique symbol' 타입은 반드시 'const'여야 함
let h = e === e  // boolean
let i = e === f  // error: 'unique symbol'타입은 서로 겹치는 일이 없으므로 이 비교문의 결과는 항상 'false'

1. 새 symbol을 선언하고 const 변수에 할당하면 타입스크립트가 unique symbol타입으로 추론한다. 코드 편집기에서는 unique symbol이 아니라 'typeof 변수명' 형태로 보여줄 것이다.
2. const 변수의 타입을 unique symbol로 명시적으로 정의할 수 있다.
3. 타입스크립트는 컴파일 타임에 unique symbol이 다른 unique symbol과 같지 않을 것이라는 사실을 알 수 있다.

unique symbol도 결국 1, true, "literal" 등 다른 리터럴 타입과 마찬가지로 특정 symbol을 나타내는 타입이다.

3.2.8 객체

타입스크립트의 객체(object) 타입은 객체의 형태(shape)을 정의한다. 타입스크립트 또한 자바스크립트와 마찬가지로 구조 기반 타입(structural type)을 갖도록 설계되어 있다.

구조 기반 타입화
구조 기반 타입화에서는 객체의 이름에 상관없이 객체가 어떤 프로퍼티를 갖고 있는지를 따진다.(이름 기반에서는 이름을 따짐) 일부 언어에서는 덕 타이핑(duck typing)이라고 한다.

타입스크립트에서 객체를 서술하는 데 타입을 이용하는 방법은 다음과 같다.

1) object 타입. 어떤 필드를 가지고 있는지는 관심이 없고, 그저 객체가 필요할 때 사용

let a: object = {
	b: 'x'
}

a.b  // error: 'b' 프로퍼티는 'object'에 존재하지 않음

object는 any보다 조금 더 좁은 타입으로 object는 서술하는 값에 관한 정보를 거의 알려주지 않으며, 값 자체가 자바스크립트 객체라고(그리고 null이 아니라고) 말해줄 뿐이다.

2) 객체 리터럴 또는 형태라 불리는 표기법({a: string}). 객체가 어떤 필드를 포함할 수 있는지 알고 있거나 객체의 모든 값이 같은 타입을 가질 때 사용

타입스크립트가 c의 형태를 추론하게 하거나 중괄호({}) 안에서 명시적으로 타입을 묘사할 수 있다.

// 형태 추론
let a = {
	b: 'x'
}  // {b: string}

a.b  // string

let b = {
	c: {
    	d: 'f'
    }
}  // {c: {d: string}}


// {}안에 명시적으로 타입 묘사
let a: {b: number} = {
	b: 12
}  // {b: number}

객체 리터럴 문법은 '이런 형태의 물건이 있어'라고 말한다. 이 물건은 객체 리터럴 또는 클래스 일 수 있다.

let c: {
	name: string
} = {
	name: 'jaejae'
}

class Person{
	constructor{
    	public name: string  // public은 this.name = name을 단축한 것
    } { }
}
c = new Person('jae')  // OK

{name:string} 은 객체의 형태를 묘사하며 객체 리터럴과 클래스 인스턴스 모두 이 형태를 만족하므로 타입스크립트는 Person을 c로 할당하는 동작을 허용한다.

기본적으로 타입스크립트는 객체 프로퍼티에 엄격한 편인데, 예를 들어 객체에 number 타입의 b라는 프로퍼티가 있어야 한다고 정의하면 타입스크립트는 b를 기대하고 b가 없거나 다른 추가 프로퍼티가 있으면 에러를 발생시킨다. ?나 인덱스 시그니처를 사용해 어떤 프로퍼티는 선택형이고 예정에 없던 프로퍼티가 추가될 수 있다고 타입스크립트에 알려줄 수 있다.

인덱스 시그니처(index signature)
[key: T]: U 같은 문법은 인덱스 시그니처라 부르며 타입스크립에 어떤 객체가 여러 키를 가질 수 있음을 알려준다. "이 객체에서 모든 T 타입의 키는 U 타입을 갖는다"라고 해석할 수 있다. 인덱스 시그니처의 키(T)는 반드시 number나 stirng 타입에 할당할 수 있는 타입이어야 한다. 인덱스 시그니처의 키 이름은 원하는 이름을 가져다 바꿔도 된다(key가 아니어도 된다는 뜻)

let a: {
	b: number
    c?: string  // 선택형(?)
    [key: number]: boolean  // 예정에 없던 프로터피 추가될 수 있음
}

객체 타입을 정의할 때 선택형(?)만 사용할 수 있는 것은 아니다. 필요하다면 readonly 한정자를 이용해 특정 필드를 읽기 전용으로 정의할 수 있다.(정의한 필드에 초깃삾을 할당한 다음에는 그 값을 바꿀 수 없다. 객체 프로퍼티에 const를 적용한 듯한 효과)

let user: {
	readonly name: string
} = {
	name = 'jaejae'
}
user.name  // string
user.name = 
	'jaejae like apple'  // error: 'name'은 읽기 전용 프로퍼티이므로 할당할 수 없음

3) 빈 객체 리터럴 표기법({}).사용하지 않는 것이 좋음

null과 undefined를 제외한 모든 타입은 빈 객체 타입에 할당할 수 잇으나, 이는 사용하기 까다롭게 만들기 때문에 가능한 한 빈 객체를 피하는 것이 좋다

4) Object 타입. 사용하지 않는 것이 좋음

3.2.9 휴식 시간: 타입 별칭, 유니온, 인터섹션

값이 있으면 값의 타입이 무엇인지에 따라 수행할 수 있는 연산이 달라진다. 예를 들어 +로 두 숫자를 더하거나 .yoUpperCase로 문자열을 대문자로 만들 수 있다. 값뿐만 아니라 타입에도 어떤 동작을 수행할 수 있다

타입 별칭

type Age = number
type Person = {
	name: string
    age: Age
}

let age = 55
let driver: Person = {
	name: 'jaejae',
    age: age
}

(let, const, var로) 변수를 선언해서 값 대신 변수로 칭하듯이 타입 별칭으로 타입을 가르킬 수 있다. 타입스크립트는 별칭을 추론하지는 않으므로 반드시 별칭의 타입을 명시적으로 정의해야 한다. 타입 별칭은 프로그램의 논리에 영향을 미치지 않고 별칭이 가리키는 타입으로 대치할 수 있다. 자바스크립트 변수 선언(let, const, var)과 마찬가지로 하나의 타입을 두 번 정의할 수는 없다.

let과 const처럼 타입 별칭도 블록 영역에 적용된다. 모든 블록과 함수는 자신만의 영역을 가지므로 내부에 정의한 타입 별칭이 외부의 정의를 덮어쓴다(shadowing).

타입 별칭은 복잡한 타입을 반복하지 않게 해주며 변수가 어떤 목적으로 사용되었는지 쉽게 이해할 수 있게 도와준다. 값을 변수로 할당할지를 결정하는 것과 같은 기준으로 타입 별칭을 사용할지 여부를 결정할 수 있다.

유니온과 인터섹션 타입

A, B라는 두 사물이 있을 때 이를 유니온(합집합)하면 둘을 합친 결과과 나오며 인터섹션(교집합)하면 둘의 공통 부분이 결과로 나온다. 타입스크립트는 타입에 적용할 수 있는 특별한 연산자인 유니온(|)과 인터섹션(&)을 제공한다. 타입은 집합과 비슷하므로 집합처럼 연산을 수행할 수 있다. 실전에서는 대개 인터섹션보다 유니온을 자주 사용한다.

3.2.10 배열

자바스크립트처럼 타입스크립트 배열과 연결(concatenation), 푸시(pushing), 검색(searching), 슬라이스(slicing) 등을 지원하는 특별한 객체다. 또한 T[]와 Array<T>라는 두 가지 배열 문법을 지원한다. 성능, 의미상 두 표현은 같으므로 자신의 취향대로 원하는 문법을 사용하면 된다.

대개는 배열을 동형(homogeneous)으로 만든다. 즉, 한 배열에 사과, 오렌지, 숫자를 함께 저장하지 않고 배열의 모든 항목이 같은 타입을 갖도록 설계하려 노력한다. 그렇지 않으면 타입스크립트에 배열과 관련한 작업이 안전한지 증명해야 하므로 추가 작업을 해야한다.

3.2.11 튜플

튜플(tuple)은 배열의 서브타입이다. 튜플은 길이가 고정되었고, 각 인덱스의 타입이 알려진 배열의 일종이다. 다른 타입과 달리 튜플은 선언할 때 타입을 명시해야 한다. 자바스크립트에서 배열과 튜플에 같은 문법(대괄호)을 사용하는데 타입스크립트에서는 대괄호를 배열 타입으로 추론하기 때문이다.

let a: [string, string, number] = ['apple', 'orange', 2]
a = ['red', 'yellow', 'blue', 123]  // error: 'string'은 'number'타입에 할당할 수 없음

튜플은 선택형 요소도 지원한다. 객체 타입에서와 마찬가지로 ?는 '선택형'을 뜻한다. 또한 튜플이 최소 길이를 갖도록 지정할 때는 나머지 요소(...)를 사용할 수 있다.

// 선택형(?)
let number: [number, number?]] = [
	[3.75],
    [8.25, 7.70],
    [10.50]
]


// 나머지 요소(...)
let name: [string, ...stirng[]] = ['a', 'b', 'c', 'd']

튜플은 이형(heterogeneous) 배열을 안전하게 관리할 뿐 아니라 배열 타입의 길이도 조절한다. 따라서 배열보다 튜플 사용을 권장!

읽기 전용 배열과 튜플

타입스크립트는 readonly 배열 타입을 기본으로 지우너하므로 이를 이용해 불변 배열을 만들 수 있다. 읽기 전용 배열은 일반 배열과 같지만 내용을 갱신할 수 없다는 점만 다르다. 읽기 전용 배열은 명시적 타입 어노테이션으로 만들 수 있다. 읽기 전용 배열을 갱신하려면 .push, .splice처럼 내용을 바꾸는 동작 대신 .concat, .slice같이 내용을 바꾸지 않는 메서드를 사용해야 한다. 

읽기 전용 배열은 결국 자바스크립트 배열로 구현한 것으로 즉, 스프레드(...)나 .slice 등으로 배열을 조금만 바꿔도 우선 원래 배열을 복사해야 하므로, 주의하지 않으면 응용 프로그램의 성능이 느려질 수 있다. 작은 배열에서는 이런 오버헤드가 사소해보일 수 있지만 큰 배열에서는 큰 성능 저하를 일으킬 수 있다.

3.2.12 null, undefinded, void, never

타입스크립트에서 undefined 값의 타입은 오직 undefined뿐이고 null 값의 타입은 null 뿐이라는 점에서 특별한 타입이다. undefined와 null의 값을 혼용하는 경우가 많은데 undefined는 아직 정의하지 않았음을 의미하는 반면 null은 값이 없다는 의미다. 

타입스크립트는 null과 undefined 외에도 void와 never 타입도 제공한다. void는 명시적으로 아무것도 반환하지 않는 함수의 반환 타입(예를 들면 console.log)을 가리키며 never는 절대 반환하지 않는(예외를 던지거나 영원히 실행되는) 함수 타입을 가리킨다.

// number 또는 null을 반환하는 함수
function a(x: number) {
	if (x < 10) {
    	return x
    }
    return null
}


// undefined를 반환하는 함수
function b() {
	return undefined
}


// void를 반환하는 함수
function c() {
	let a = 2 + 2
	let b = a * a
}


// never를 반환하는 함수
function d() {
	throw TypedError('I always error')
}


// never를 반환하는 또 다른 함수
function e() {
	while(true) {
    	doSomething
    }
}

unknown이 모든 타입의 상위 타입이라면 never은 모든 타입의 서브타입이다. 즉, 모든 타입에 never를 할당할 수 있으며 never 값은 어디서든 안전하게 사용할 수 있다.

3.2.13 열거형

열거형(enum)은 해당 타입으로 사용할 수 있는 값을 열거하는 기법이다. 열거형은 키를 값에 할당하는, 순서가 없는 자료구조다.키는 컴파일 타임에 고정된 객체라고 생각하면 쉽다. 따라서 타입스크립트는 키에 접근할 때 주어진 키가 실제 존재하는지 확인할 수 있다. 문자열에서 문자열로 매핑하거나 문자열에서 숫자로 매핑하는 열거형, 이렇게 두 가지가 있다. 다음은 열거형의 예시이다.

enum Language {
	English,
    Spanish,
    Russian
}

타입스크립트는 자동으로 열거형의 각 멤버에 적절한 숫자를 추론해 할당하지만, 값을 명시적으로 설정할 수도 있다.

enum Language {
	English = 0,
    Spanish = 1, 
    Russian = 2
}

(보통의 객체에서 값을 가져올 때처럼) 점 또는 괄호 표기법으로 열거형 값에 접근할 수 있다

let myFirstLanguage = Language.Russian  // Language
let mySecondLanguage = Language['English']  // Language

열거형을 여러 개로 나눠 정의한 다음 타입스크립트가 이들을 합치도록 할 수도 있다. 타입스크립트는 여러 열거형 정의 중 한 가지 값만 추론할 수 잇으므로 열거형을 분할할 때 주의해야 하며, 다음 예처럼 각 열거형 멤버에 명시적으로 값을 할당하는 습관을 기르는 것이 좋다.

enum Language {
	English = 0,
    Spanish = 1
}

enum Language {
	Russian = 2
}

계산된 값을 사용할 수도 있으므로 모든 값을 정의할 필요는 없다.(빠진 값은 타입스크립트가 추론함)

enum Language {
	English = 100,
    Spanish = 200 + 300,
    Russian  // 타입스크립트가 500 다음 숫자인 501로 추론
}

 열거형에 문자열 값을 사용하거나 문자열과 숫자 값을 혼합할 수 있다. 또한 타입스크립트에서는 값이나 키로 열거형에 접근할 수 있도록 허용하지만 이는 불안정한 결과를 초래하기 쉽기 때문에 더 안전한 열거형 타입인 const enum을 이용한다.

const enum은 역방향 찾기를 지원하지 않으므로 열거형의 동작은 일반 자바스크립트 객체와 비슷해진다. 또한 const enum은 기본적으로 아무 자바스크립트도 생성하지 않으며 그 대신 필요한 곳에 열거형 멤버의 값을 채워 넣는다. 

 

3.3 마치며

타입스크립트는 다양한 내장 타입을 제공한다. 타입스크립트가 값의 타입을 추론도록 하거나 값의 타입을 명시할 수 있다. let과 var를 사용하면 일반적인 타입으로 추론하는 반면, const를 이용하면 더 구체적인 타입을 추론하게 만든다. 대부분의 타입은 일반 타입과 구체적 타입 두 가지를 제공하며, 구체적인 타입은 보통 일반 타입의 서브타입이다.