어떤 타입이나 지정 가능
아무 타입도 지정하지 않은 JS와 동일하므로 사용을 지양하자
let value: any;
value = 'kim';
value = 1234;
value = [1,2,3,4]; // 전부 error 없음
어떤 타입도 없다. return 되는 값이 없을 때 사용
function clickButton(): void {
alert ('Clicked!');
}
열거형으로 특정값이 주어진다.
enum Category {
Pasta,
Pizza,
Dessert
}
let menuCategory: Category = Category.Pasta // 0
let menuCategory: Category = Category.Pizza // 1
let menuCategory: Category = Category.Dessert // 2
// 특정값을 할당할 수도 있다.
enum Category {
Pasta = 'pasta',
Pizza = 'pizza',
Dessert = 'dessert'
}
여러 타입이 올 수 있을 때 사용, |
사용해서 표현
let age: number | string;
age = 10;
age = '15';
// 주로 문자열 리터럴에서 사용
type Color = "Red" | "Black" | "White";
let color: Color;
color = "Red";
color = "Yellow"; // error 발생
배열에 두개 이상의 타입을 사용하고 싶을 때
배열의 각 항목의 타입을 미리 지정 + 순서도 고정
// in JS
let role = ["a", "b", 40];
// in TS
let role: string[] | number[] = ["a", "b", 40];
// Tuple을 사용하면,
let role: [string, string, number] = ["a", "b", 40];
튜플의 장점
사용자의 정보를 담는다고 할 때, 규칙을 모르는 개발자가 순서를 바꿔서 배열을 만들려고 하면 오류를 발생시킬 수 있다.
const userInfo1 = [1, 'user1@naver.com', 'qwer', 970908, true];
const userInfo2 = [2, 'user2@naver.com', 'asdf', 890716, false];
const userInfo3 = [3, 'user3@naver.com', 'rtty', 930413, false];
const userInfo4 = ['uiop', 4, true, 840902, 'user4@naver.com']; // error
튜플의 단점
배열이기 때문에 메서드인push
를 사용하면 배열의 길이가 늘어나게 된다.
튜플의 목적인 배열 인덱스마다 타입과 순서를 완벽히 고정할 수 없다.
이를 해결하기 위해readonly
를 사용할 수 있다.
type UserInfo = [number , string , string , string , boolean];
let userInfo1 : UserInfo = [1, 'user1@example.com' , 'abcd123' , '1999-01-01' , true];
userInfo1.push('hello'); // push로 string 타입인 'hello' 추가
console.log(userInfo1); // (6) [1, 'user1@example.com', 'abcd123', '1999-01-01', true, 'hello']
// readonly 적용
type UserInfo = readonly [number , string, string ,string , boolean];
let userInfo1 : UserInfo = [1, 'user1@example.com' , 'abcd123' , '1999-01-01' , true];
userInfo1.push('hello'); // Error
union vs tuple
union은 사용하고자 하는 타입 중에 하나만 있어도 가능하다.
tuple은 정의한 타입이 모두 존재해야 한다.