TypeScript는 JavaScript를 포함하고, 추가적인 타입들을 제공합니다.
- JavaScript의 기본 자료형
- Boolean
- Number
- String
- Null
- Undefined(, Undeclared)
- Symbol
- Array
- Object
- Literal
- Function
- TypeScirpt에 추가된 요소
- Any
- Unknown
- Never
- Void
- Enum
- Tuple
- Union, Intersection 문법
- Type Alias
- Literal
JavaScript의 자료형은 알고 있다는 전제 하에, TypeSciprt에 추가된 요소들을 알아보겠습니다.
1. Any
- 어떤 타입이어도 상관없는 타입입니다.
- 컴파일 시에 타입 체크가 정상적으로 이뤄지지 않기 때문에, 사용하는 걸 권장하지 않습니다.
- any가 필요한 곳에 any를 쓰지 않으면 오류가 발생하게 하는 옵션이 있습니다 : noImplicitAny
function returnAny(message: any): any {
console.log(message);
}
const any1 = returnAny("리턴은 아무거나");
any1.toString();
/*
아래와 같이 any가 포함된 값이 있으면,
오류 발생 지점이어도 컴파일에 오류가 발생하지 않습니다.
*/
let looselyTyped: any = {};
const d = looselyTyped.a.b.c.d;
2. Unknown
- Any 타입 보다 나중에 나온 타입입니다. ( TypeScript Version 3.0+ )
- Any를 지정한 코드는 연관된 코드들에 영향을 줘서 타입의 안정성을 해치기 때문에 문제가 되었습니다.
- Any 타입은 타입 범위를 좁히지 않아도 자유롭게 사용할 수 있는 반면, Unknown 타입은 의무적으로 타입을 좁혀서 사용해야 한다는 차이점이 있습니다.
- 따라서, 타입의 안정성을 위해서 Any 대신 Unknown 타입을 사용하는 것이 좋습니다.
declare const maybe: unknown;
const aNumber: number = maybe; // 컴파일 오류!
if ( maybe === true ) { // maybe의 타입은 boolean으로 추론됨(타입가드, 타입추론)
const aBoolean: boolean = maybe;
const aString: string = maybe; // 컴파일 오류!
}
if ( typeof maybe === 'string' ) { // maybe의 타입은 string으로 설정됨(타입가드)
const aBoolean: boolean = maybe; // 컴파일 오류!
const aString: string = maybe;
}
3. Never
- 일반적으로 함수의 리턴 타입으로 사용됩니다.
- 항상 오류를 출력하거나, 리턴 값을 절대로 내보내지 않음을 의미합니다. 이는 무한 루프에 빠지는 것과 같습니다.
function error(message: string): never {
throw new Error(message);
}
function fail() {
return error('failed');
}
function infiniteAnimate(): never {
while( true ) { infiniteAnimate(); }
}
- never에는 any를 포함한 그 어떤 것도 할당할 수 없습니다.
- 잘못된 타입을 할당하는 실수를 막고자 할 때 사용되기도 합니다.
let a: never = 'hello'; // 오류 발생: never 타입에 string 값을 할당할 수 없음.
// 엄격한 타입 검사에 사용
type Indexable<T> = T extends string ? T & { [index: string]: any } : never;
4. Void
- 아무것도 반환하지 않겠다라는 걸 명시적으로 설정하는 타입입니다.
let returnVoid1 = function(name) {
// void를 설정하지 않아도 오류가 나지 않음
}
// 리턴 타입을 void로 명시
let returnVoid2 = function(name): void {
return undefined;
}
5. Enum
- 열거형 데이터 타입으로, 멤버라고 불리는 값의 집합을 이루는 자료형입니다.
- 어떠한 값에 이름을 지어서 할당할 수 있기 때문에, 값에 대한 가독성이 향상됩니다.
- 값이 지정되지 않은 멤버는 0부터 순차적으로 할당됩니다.
- 이전 멤버에 값이 존재할 경우, 이전 값에 1을 더한 값이 할당됩니다.
enum Team {
Manager, // 0
Planner, // 1
Developer, // 2
Designer // 3
}
let a:number = Team.Designer; // 3
enum Team2 {
Manager = 101,
Planner = 208,
Developer = 302,
Designiner, // 302 + 1
}
let b:number = Team2.Manager // 101
6. Tuple
- JavaScript의 Array를 특수한 형태로 사용할 수 있습니다.
- tuple에 명시적으로 지정된 타입과 길이에 따라 아이템 순서를 설정해야 합니다.
let a: [string, number];
a = ['hello', 39];
a = [39, 'hello']; // 오류 발생: 순서가 틀림
a[2] = 'world'; // 오류 발생: 정의된 튜플의 길이 범위를 벗어남
const person: [string, number] = ['Steve', 39];
const [first, second, third] = person; // 오류 발생: 정의된 튜플과 다른 형태로 구조분해 할당을 시도
7. Union, Intersection
- Union 타입은 여러 타입을 포함하도록 작성할 수 있게 해줍니다.
- Intersection(교차) 타입은 두 요소의 교집합 타입을 할당할 수 있게 해줍니다.
// Union Type
let a: string | number;
a = 'hello';
a = 30;
// Intersection Type
let b: ( string | number ) & ( number | object );
b = 'hello'; // 오류 발생
b = 30;
8. Type Alias
- type 키워드를 통해 타입의 별칭을 직접 정의할 수 있습니다.
type a = string | number;
let b: a = 'hello';
let c: a = 30;
let d: a = { }; // 오류 발생
9. Literal
- 리터럴은 값 자체를 의미하고, 이 리터럴을 타입으로 지정할 수 있습니다.
- (리터럴 타입은 기존 JavaScript에도 있는 타입이지만, 예제를 위해 작성했습니다.)
let a: (1 | 2 | 3) & (2 | 3 | 4);
a = 1; // 오류 발생
a = 2;
