기업협업 중인 회사의 사수 분께 조언을 얻고, 타입스크립트 핸드북으로 타입스크립트 공부를 하려고 한다.
지금 진행하고 있는 프로젝트에서 타입스크립트를 조금이나마 알고 쓰기 위해서는 Basic Types, Interfaces, Generic 순으로 공부하는 게 도움이 될 것 같다.
TypeScript
TypeScript는 JavaScript와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용하여 더 편리하게 사용할 수 있다.
(출처: 타입스크립트 핸드북)
Basic Types
Boolean
가장 기본적인 데이터 타입은 boolean이다.
let isDone: boolean = false;Number
TypeScript의 모든 숫자는 부동 소수 값이다. (JavaScript와 동일)
부동 소수에는 Number 타입이 붙여지며, 2, 8, 10, 16진수 리터럴을 지원한다.
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;String
문자열 데이터는 큰따옴표 " 혹은 작은따옴표 '로 감싼다.
let color: string = "blue";
color = 'red';Array
배열은 두 가지 방법으로 작성할 수 있다.
1. 배열요소의 타입 뒤에 []를 붙인다.
let list: number[] = [1, 2, 3];2. 제네릭 배열 타입을 작성한다. Array<elemType>
let list: Array<number> = [1, 2, 3];Tuple
요소의 타입과 개수가 고정된 배열을 표현할 수 있다.
// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 성공
// 잘못된 초기화
x = [10, "hello"]; // 오류Enum
Enum은 값의 집합에 더 나은 이름을 붙여줄 수 있다.
enum Color {Red, Green, Blue}
let c: Color = Color.Green;또한, 요소에 0부터 시작하는 번호를 붙여줄 수 있다.
요소에 수동으로 번호값을 설정할 수도 있다.
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;Any
알지 못하는 타입을 표현해야할 때나, 타입을 검사하지 않고 컴파일 때 검사를 통과하길 원할 때 사용할 수 있다.
타입의 일부만 알기 때문에 전체를 알지는 못할 때 유용하게 사용할 수 있다.
Void
Any의 반대타입이다. 어떤 타입도 존재할 수 없음을 나타낼 때 사용한다. 함수에서 반환 값이 없을 때, 반환 타입을 표현하기 위해 사용된다.
Null and Undefined
기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입이다. 따라서 null과 undefined를 number 같은 타입에 할당할 수 있다.
let u: undefined = undefined;
let n: null = null;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
object 타입을 쓰면, Object.create 같은 API 가 더 잘 나타난다.
declare function create(o: object | null): void;
create({ prop: 0 }); // 성공
create(null); // 성공
create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류Type assertions (타입 단언)
TypeScript보다 개발자가 값에 대해 더 잘 알고 있을 때 사용한다. 컴파일러에 영향을 미치며, 런타임에는 아무런 영향이 없다.
타입 단언은 두 가지 형태로 작성할 수 있다.
(TypeScript를 JSX와 함께 사용할 때는 As 문법만 허용된다!)
1. Angle-bracket 문법
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;2. As 문법
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;