이전에 nuxt + typeScript로 된 프로젝트를 담당하게 될 뻔한 일이 있어 코드를 분석했던 경험이 있었다. 결국 무산되긴 했지만 typeScript를 제대로 사용해본 적이 없었기에 잘 모르는 코드나 타입 등은 검색을 해가며 이해하였던 경험이 있었다.
올해 12월 vue2의 업데이트가 종료되고 vue3로 생태계가 변화되는 시점에서 typeScript도 함께 사용하는 날이 오는것을 대비하기 위해 틈틈히 배워나가야 겠다는 생각을 하게되었다.
📘Typescript의 기본 타입
1. 불리언 (Boolean)
JavaScript, TypeScript에서 boolean 값이라 불리는 참/거짓(true/false)값
let isDone: boolean = false;2. 숫자 (Number)
JavaScript와 같이 number 타입이 사용됨. TypeScript는 16진수, 10진수 2진수, 8진수 리터럴도 지원
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
function calc(num1: number, num2: number): number {
return `총 합은 ${num1} + ${num2}이다.`;
}3. 문자열 (String)
JavaScript와 같이 string 타입이 사용됨. TypeScript도 큰따옴표 ( "" )나 작은따옴표 ( '' ) 백틱( `` )을 문자열 데이터를 감싸는데 사용
let color: string = "blue";
color = 'red';
let fullName: string = `김타입`;
let age: number = 28;
let sentence: string = `안녕하세요 저는 ${ fullName }입니다.`
function sumString(string1: string, string2: string): string {
return `합친 문자열은 ${num1} + ${num2}이다.`;
}4. 배열 (Array)
배열 타입은 두 가지 방법으로 사용할 수 있다.
1) 배열 요소들을 나타내는 타입 뒤에 []를 쓰는 것
2) 제네릭 배열 타입을 쓰는 것 Array<elemType>:
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
let both:(string | number)[] = ['타입', 1234];5. 튜플 (Tuple)
튜플 타입은 요소의 타입과 개수가 고정된 배열을 표현할때 사용한다. 단 요소들의 타입이 모두 같을 필요는 없음
// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10];
// 잘못된 초기화
x = [10, "hello"]; // 에러발생 (선언한 타입 순서에 맞게 초기화하지 않음)6. 열거 (Enum)
Enum타입은 특정 값(상수)들의 집합을 의미하며 특정 값을 고정하는 또다른 독립된 자료형이다.
// 상수에 임의로 값을 부여하는 것도 가능
enum State {
DONE = "DONE",
LOADING = "LOADING",
ERROR = "ERROR",
INITIAL = "INITIAL",
}
let state: State = State.LOADING; // "LOADING"7. Any
Any타입은 모든 타입에 대해서 허용한다. Any타입이 존재하는 이유는 애플리케이션을 만들 때 알지 못하는 타입을 표현해야 하는 경우가 있을 수 있기 때문이다.
Any는 자주 사용하면 Typescript를 사용하는 목적을 잃기 때문에 꼭 필요한 부분에서만 사용 해야한다.
let allOf: any = 'Any타입';
allOf = '안녕하세요';
allOf = 12345;
allOf = ture;
allOf = null;
let list: any[] = [1, true, "free"];
list[1] = 100;8. Void
Void는 어떤 타입도 존재할 수 없음을 나타내는 타입으로 Any의 반대 타입과도 같다.
따라서 void는 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 사용된다.
function checkUser(): void {
console.log("사용자의 정보가 다릅니다.");
}void를 타입 변수를 선언하는 것은 유용하지 않으며 만일 void를 함수가 아닌 변수 타입으로 정의한다면, void 타입 변수에는 undefined와 null만 할당이 가능해진다.
let unusable: void = undefined;
unusable = null; // 성공, tsconfig에서 strictNullChecks 컴파일 옵션을 사용하지 않을 경우 9. Null and Undefined
Null 과 Undefined는 다른 모든 타입의 하위타입으로 null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미한다.
let nullable: null = null;
let undefinedable: undefined = undefined;하지만, tsconfig.json에서 --strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능합니다. (예외적으로 undefined는 void에 할당 가능합니다.)
10. Never
Never 타입은 typescript에서 잘못된 것을 알려주기 위한것으로 절대 발생할 수 없는 타입을 나타낸다.
// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
throw new Error(message);
}
// 반환 타입이 never로 추론된다.
function fail() {
return error("Something failed");
}
// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
while (true) {
}
}11. 객체 (Object)
object는 원시 타입이 아닌 타입을 나타낸다. typeof 연산자가 "object"로 반환하는 모든 타입 예를 들어, number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지를 의미한다.
let obj: object = {};
let arr: object = [];
let func: object = function () {};
let nullValue: object = null;
let date: object = new Date();