Boolean
let isDone: boolean = false;
Number
타입스크립트에서 숫자는 부동 소수점 값 또는 BigInteger 값이다. 16진수, 10진수, 8진수, 2진수 타입도 지원한다.
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
String
자바스크립트와 똑같이 double quotes(""), single quotes('')로 문자열을 감싼다.
let color: string = "blue";
color = 'red';
마찬가지로 backtick (`${ expr }`) 형태로 사용하면 된다.
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.
I'll be ${age + 1} years old next month.`;
Array
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3]; //제네릭 타입방식
유니언 타입(다중 타입)의 ‘문자열과 숫자를 동시에 가지는 배열’도 선언할 수 있다.
// Union 이용한 배열
let array: (string | number)[] = ['Apple', 1, 2, 'Banana', 'Mango', 3];
let array: Array<string | number> = ['Apple', 1, 2, 'Banana', 'Mango', 3];
배열이 가지는 항목의 값을 단언할 수 없다면 any를 사용할 수 있다.
let array: any[] = [0, 1, {}, [], 'str', false];
인터페이스(Interface)나 커스텀 타입(Type)을 사용할 수도 있다.
interface IUser {
name: string,
age: number,
isValid: boolean
}
let userArr: IUser[] = [
{
name: 'Jiho',
age: 25,
isValid: true
},
{
name: 'Juliet',
age: 42,
isValid: false
},
{
name: 'Evan',
age: 52,
isValid: true
}
];
readonly 키워드나 ReadonlyArray 타입을 사용해 읽기 전용 배열을 생성할 수도 있다.
let arrA: readonly number[] = [1, 2, 3, 4];
let arrB: ReadonlyArray<number> = [0, 5, 5, 2];
arrA[0] = 123; // Error - TS2542: Index signature in type 'readonly number[]' only permits reading.
arrA.push(123); // Error - TS2339: Property 'push' does not exist on type 'readonly number[]'.
arrB[0] = 123; // Error - TS2542: Index signature in type 'readonly number[]' only permits reading.
arrB.push(123); // Error - TS2339: Property 'push' does not exist on type 'readonly number[]'.
Tuple
배열 요소의 수가 고정된 형태의 자료형이다. 각각의 요소별로 타입을 지정해주면 된다.
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error
Enum
특정 값들의 집합을 의미하는 자료형이다. 타입스크립트에서는 문자형 이넘과 숫자형 이넘을 제공 한다.
enum Color {
Red, //0
Green, //1
Blue, //2
}
let c: Color = Color.Green;
기본적으로 enum은 인덱스 번호가 0번부터 시작하지만, 따로 지정해 변경해줄 수 있다. 또는 모든 값에 수동으로 설정해주는 것도 가능하다. 이때 번호 대신 문자열도 지정 가능하지만, 모든 값에 설정해줘야만 한다는 것을 주의해야 한다.
enum Color {
Red = 1,
Green, //2
Blue, //3
}
let c: Color = Color.Green;
enum Color {
Red = 1,
Green = 2,
Blue = 4,
}
let c: Color = Color.Green;
enum Color {
Red = "red",
Green = "green",
Blue = "blue",
}
리버스 매핑(Reverse Mapping) - 숫자형 이넘에만 존재하는 특징이다. enum의 키(key)로 값(value)을 얻을 수 있고 값(value)으로 키(key)를 얻을 수도 있다. enum 요소에 해당하는 번호를 통해 값을 얻을 수 있다.
enum Color {
Red = 1,
Green,
Blue,
}
let colorName: string = Color[2];
// Displays 'Green'
console.log(colorName);
Void
일반적으로 값을 반환하지 않는 함수에서 사용한다. : void 위치는 함수가 반환 타입을 명시하는 곳이다.
값을 반환하지 않는 함수는 실제로는 undefined를 반환한다.
function hello(msg: string): void {
console.log(`Hello ${msg}`);
}
const hi: void = hello('world'); // Hello world
console.log(hi); // undefined
Object
object는 원시 타입이 아닌 타입을 나타낸다. number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지를 의미한다.
declare function create(o: object | null): void;
create({ prop: 0 }); // 성공
create(null); // 성공
create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류
타입 단언(Type assertions)
컴파일러에게 개발자가 명확하게 타입에 대해서 알려주는 방법이다. 예를 들어 타입스크립트의 타입인 string가 아닌 조금 더 명확한 "some_type"이라고 하는 명확한 타입이라고 알려주는 경우다.
다른 언어의 타입 변환(형 변환)과 유사하지만, 다른 특별한 검사를 하거나 데이터를 재구성하지는 않는다. 이는 런타임에 영향을 미치지 않으며, 온전히 컴파일러만 이를 사용한다. 타입 스크립트는 개발자가 필요한 어떤 특정 검사를 수행했다고 인지한다.
타입 단언의 사용법은 2가지 경우가 있다.
- Angle Braket 형태
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 as string).length;
위 두 예제는 동일하며 어떤 것을 사용할지는 주로 선호에 따른 선택이다. 하지만 TypeScript를 JSX와 함께 사용할 때는, as-스타일의 단언만 허용된다.
Union
2개 이상의 타입을 지정해주고자 할 때 사용하며, OR연산자 | (vertical bar)를 를 사용해 타입들을 지정한다. 유니언 타입은 여러 타입 중 하나가 될 수 있는 값을 의미한다.
let union: (string | number);
union = 'Hello type!';
union = 123;
