TS는 JS와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용해 더 편리하게 쓸 수 있다.
boolean
은 true/false 값을 나타낸다.
let isDone: boolean = false;
TS의 모든 숫자는 부동 소수 값이기에 number
라는 타입을 붙인다. 16진수, 10진수, 2진수, 8진수도 지원한다.
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
텍스트 데이터 타입을 string
으로 표현하며, JS처럼 ("
)나 ('
)로 문자열 데이터를 감싸는 데에 사용한다. 템플릿 문자열이나 백틱을 사용하면 여러 줄의 문자열을 작성할 수 있고, ${expr}
같은 형태로 표현식을 포함할 수도 있다.
let color: string = "blue";
color = 'red';
let name: string = `TypeScript`;
let age: `8`;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${age} years old next month.`;
let sentence2: string = "Hello, my name is " + fullName + ".\n\n" +
"I'll be " + (age + 1) + " years old next month.";
배열 타입은 2가지 방법으로 쓸 수 있다.
// 1. 배열 요소들을 나타내는 타입 뒤에 `[]` 쓰기
let list: number[] = [1,2,3];
// 2. 제네릭 배열 타입 쓰기 - `Array<elemType>
let list: Array<number> = [1,2,3];
튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있다. (단, 요소들의 타입이 모두 같을 필요는 없다.)
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가 없음
enum
은 값의 집합에 더 나은 이름을 붙여줄 수 있다. enum
은 0
부터 시작하여 멤버들의 번호를 매기며, 멤버 중 하나의 값을 수동으로 설정함으로써 번호를 바꿀 수 있다.
// 0부터 번호를 매김
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
// 0이 아닌 1로 시작하게끔 할 수 있음
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
// 모든 값을 수동으로도 설정 가능함
enum Color {Red = 1, Green = 3, Blue = 6}
let c: Color = Color.Green;
특정 값이 어떤 Color
enum멤버와 매칭되는지를 알고 싶을 때, 이 값을 이용하면 일치하는 enum 멤버의 이름을 알아낼 수 있다.
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
console.log(colorName); // 값이 2인 'Green'이 출력됨
알지 못하는 타입(사용자로부터 받은 데이터나 서드 파티 라이브러리 같은 동적인 컨텐츠로 부터 온 값들)을 표현해야 할 때, 타입 검사를 하지 않는 any
를 사용할 수 있다.
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 성공
any
타입은 컴파일 중 타입 검사를 할 수도 있고 안할 수도 있다. Object
로 선언된 변수들은 어떤 값이든 그 변수에 할당할 수 있게 해주는 점에서 any
와 비슷한 역할을 할 수 있을 것 같지만, 실제로는 메서드가 존재하더라도 임의로 호출할 수는 없다.
let notSure: any = 4;
notSure.ifItExists(); // 성공, ifItExists는 런타임엔 존재할 것
notSure.toFixed(); // 성공, toFixed는 존재함(하지만 컴파일러는 검사하지 X)
let prettySure: Object = 4;
prettySure.toFixed(); // 오류: 프로퍼티 'toFixed'는'Object'에 존재하지 않음
Do's and Don'ts에 있듯
Object
를 no-primitiveobject
대신 사용하지 말 것 !
또한 any 타입은 타입의 일부만 알고 전체는 알지 못할 때 유용하다. 예를 들어 여러 개의 타입들이 섞인 배열을 다룰 수 있다.
let list: any[] = [1, true, "free"];
list[1] = 100;
void
는 어떤 타입도 존재할 수 없음을 나타내므로 any
와 반대 타입이다. void
는 보통 함수에서 반환 값이 없음을 표현할 때 쓴다.
function warnUser: void {
console.log("This is my warning message");
}
void
를 타입 변수로 선언하는 것은 유용하지 않다. 그 변수에 null
(--strictNillChecks
를 사용하지 않을 때에만 해당) 또는 undefined
만 할당할 수 있기 때문이다.
let unusable: void = undefiend;
unusable = null; // 성공 `--strictNullChecks`를 사용하지 않을 때만
기본적으로 undefined
와 null
은 다른 모든 타입의 하위 타입이어서 number
같은 타입에 할당할 수 있다. 하지만 --strictNullChecks
를 사용하면 null
과 undefined
는 오직 any
와 각자 자신들 타입에만 할당 가능하다. (예외로 undefined
는 void
에 할당 가능하다.)
이러한 특성은 일반적인 에러 방지에도 도움을 준다. 이 경우 string
또는 null
또는 undefined
를 허용하고 싶은 경우 유니언 타입인 string | null | undefined
를 사용할 수 있다.
never
타입은 절대 발생할 수 없는 타입을 나타낸다. 예를 들어, 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키기거나 절대 반환하지 않는 반환 타입으로 쓰인다. 변수도 never
타입을 얻게 될 수 있다.
never
는 모든 타입에게 할당 가능한 하위 타입이지만, 어떤 타입도 never
에 할당할 수 있거나 하위 타입도 아니다.(단, never
자신은 제외함) 심지어 any
도 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
)이 아닌 타입을 나타낸다. object
를 쓰면 Object.create
같은 API가 더 잘 나타난다.
declare function create(o: object | null): void;
create({ prop: 0}); // 성공
create(null); // 성공
create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류
타입 단언은 개발자가 컴파일러에게 자신이 하고 있는 것에 대해 잘 안다고 말해주는 방법과 같다. angle-bracket
문법과 as
문법이 있다.
// angle-bracket 문법
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// as 문법
let someValue: any = "this is a string";
let strLength: number = (someValue a string).lenght;
위의 두 예제는 같다. 선호에 맞게 선택하면 되지만 TS를 JSX와 함께 사용할 때에는 as
스타일을 사용해야 한다.