JavaScript의 타입은 원시 값 Boolean
, Null
, Undefined
, Number
, String
, Symbol
의 타입과 객체로 나뉘어진다. 이를 확장한 TypeScript의 기본 타입으로는 어떤 것들이 있고, 함수는 어떻게 선언되어 사용되는지 알아보자.
- Boolean
- Number
- String
- Object
- Array
- Tuple
- Enum
- Any
- Void
- Null
- Undefined
- Never
총 12가지의 타입을 지원한다.
TypeScript는 일반 변수, 매개 변수, 객체 속성 등에 : Type
의 표현으로 타입을 지정할 수 있다.
👇 예제 코드이다.
let str: string = "seohee";
let age: number = 24;
let woman: boolean = true;
let anyType: any = -1;
let orType: string | number = "dance";
: Type
자리에 타입스크립트에서 지원하는 타입을 지정하여 넣을 수 있고, 해당 자리에 |
를 넣어 여러 개의 타입을 지정하는 것도 가능하다.
만약, 지정된 타입과 다른 타입을 대입하면,,,,❗️❗️❗️
age = "24";
타입 형식이 맞지 않다는 에러코드 'TS(2322)
를 확인할 수 있다.
'string' 형식은 'number' 형식에 할당할 수 없습니다.ts(2322)
추가적으로 Object를 지정하는 방법을 살펴보자.
let numberArray: number[] = [1, 2, 3];
let numberGeneric: Array<number> = [1, 2, 3];
괄호 표기법이나 제네릭을 사용하여 배열을 지정할 수 있다.
👇 배열의 길이가 고정되고, 각 요소의 타입이 지정되어 있는 배열 형식이다.
let person: [string, number] = ["seohee", 24];
배열에 인덱스로 접근할 수 있으며,
console.log(person[0]); // "seohee"
console.log(person[1]); // 24
console.log(person[2]); // Error, ts(2493)
범위를 초과한 곳에 접근할 경우 TS(2493)
이라는 오류를 발생시킨다.
길이가 '2'인 튜플 형식 '[string, number]'의 인덱스 '2'에 요소가 없습니다.ts(2493)
배열의 메서드 또한 사용할 수 있다.
console.log(person.length); // 2
console.log(person.concat("2")); // ["seohee", 24, "2"]
console.log(person[1].concat("1")); // Error : ts(2339)
단, 정의된 타입에 맞지 않는 메서드를 사용하면 아래와 같은 오류를 발생시킨다.
'number' 형식에 'concat' 속성이 없습니다.ts(2339)
타입스크립트는 항상 지정된 Type을 생각하며 코드를 작성하는 것이 필요하다.
👇 특정 값들의 집합을 의미한다.
enum Fruits {
Apple,
Orange,
PineApple,
}
let fruit: Fruits = Fruits.Apple;
👇 변수에는 undefine만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다.
let voidType: void = undefined;
function voidFuntion(): void {
console.log("void 타입입니다!");
}
console.log(voidType); // undefined
console.log(voidFuntion()); // "void타입입니다!"
👇 함수의 끝에 도달하지 않는 타입이다.
function infinityLoop() {
while (true) { }
console.log("무한루프")
}
console.log(infinityLoop()); // 끝나지 않음
자바스크립트와 달리 타입스크립트에서는 총 12가지의 타입을 지정할 수 있으며, 토이 프로젝트를 진행할 때는 개발 상황에 맞게 적절한 타입을 지정하도록 노력해야겠다.
📚 학습할 때, 참고한 자료 📚