String
변수의 타입이 문자열인 경우 아래와 같이 선언해서 사용합니다.
let str: string = 'hi';💡 타입 표기(Type Annotation)란?
:를 이용하여 자바스크립트 코드에 타입을 정의하는 방식
Number
타입이 숫자이면 아래와 같이 선언합니다.
let num: number = 10;Boolean
타입의 진위 값인 경우에는 아래와 같이 선언합니다.
let isLoggedIn: boolean = false;Array
타입이 배열인 경우 아래와 같이 선언합니다.
let arr: number[] = [1, 2, 3];또는 아래와 같이 제네릭을 사용할 수 있습니다.
let arr: Array<number> = [1, 2, 3];Tuple
튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열형식을 의미합니다.
let arr: [string, number] = ['hi', 10];정의하지 않은 타입, 인덱스로 접근할 경우 오류가 납니다.
arr[1].concat('!'); // Error, 'number' does not have 'concat'
arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.튜플은 왜 필요할까?
아래와 같이 배열의 첫 번째 요소는 사용자 인덱스, 두 번째 요소는 사용자 아이디 그리고 세 번째 요소는 비밀번호인 user배열이 있다고 가정하겠습니다.
const user1 = [1, 'setType77@example.com', '1q2w3e4r'];
const user2 = [2, 'anonymous@example.com', '1q2w3e4rvbf'];
const user3 = [3, 'imThree@example.com', '1q2w3e4rawrbrf'];만일 이 규칙을 모르는 개발자가 아이디와 비밀번호의 순서를 바꾸는 등, 배열에 담긴 데이터의 순서를 무시하고 배열을 만들면 오류가 날 것입니다. 이러한 문제를 해결하기 위해 타입스크립트에는 튜플이라는 개념을 도입하였습니다.
튜플의 맹점과 그 해결법(readonly)
튜플엔 한 가지 흠이 있습니다. 배열에 요소를 추가할 때 쓰이는 메서드인 push를 사용하면 기존의 튜플 타입을 따른다고 선언함에도 불구하고 문제없이 배열의 길이가 늘어나게 됩니다.
type User = [number, string, string];
let user1: User = [1, 'setType77@example.com', '1q2w3e4r'];
user1.push('hi'); // push로 string 타입인 hi 추가
console.log(user1); // [1, 'setType77@example.com', '1q2w3e4r', 'hi'];타입의 순서는 바뀌지 않으므로 큰 문제가 되지 않을 것이라 생각할 수 있지만 이는 튜플이란 기능의 목적과 달라지게 됩니다.
해결법으로 배열 인덱스마다의 타입과 순서를 완벽히 고정시키기 위해 readonly 키워드를 사용합니다.
type User = readonly [number, string, string];
let user1: User = [1, 'setType77@example.com', '1q2w3e4r'];
user1.push('hi'); // ErrorEnum
이넘은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미합니다.
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;이넘은 인덱스 번호로도 접근할 수 있습니다.
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers[0];만약 원한다면 이넘의 인덱스를 사용자 편의로 변경하여 사용할 수도 있습니다.
enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thorany
기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입입니다. 단어 의미 그대로 모든 타입에 대해서 허용한다는 의미를 갖고 있습니다. 하지만 무분별하게 any 타입을 사용하면 TS의 장점을 누릴 수 없게 됩니다.
let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];void
반환 값이 없는 함수의 반환 타입입니다. 아래와 같이 return이 없거나 return이 있더라도 반환하는 값이 없으면 함수의 반환 타입을 void로 지정합니다.
function printSomething(): void {
console.log('sth');
}
function returnNothing(): void {
return;
}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) {
}
}