[Typescript] Typescript 타입

https://pixabay.com/ko/photos/오래-된-마-건물-거리-황혼-6300696/

 

Typescript는 정적 타입 언어로 변수의 타입이 컴파일할 때 결정됩니다.

따라서 타입 오류를 컴파일 타임에 확인할 수 있는 장점이 있습니다.

 

오늘은 Typescript에서 사용되는 타입에 대해 정리를 해보았습니다.

 

원시 타입

- string: 문자열

- number: 숫자

- boolean: 논리

 

* javascript에서는 int와 float에 대응되는 타입이 없으며, 모두 number을 사용한다고 합니다.

 

const str1: string = "hello";
const num1: number = 123;
const num2: number = 123.123;
const bool1: boolean = true;

console.log(str1);
console.log(num1);
console.log(num2);
console.log(bool1);

 

배열

배열의 타입을 명시하는 방법은 두 가지가 있습니다.

1. number [] 또는 string []처럼 명시

2. 제너릭 사용

 

const arr1: number[] = [1, 2, 3]; // 1번 방법으로 배열 타입 지정
const arr2: Array<number> = [4, 5, 6]; // 2번 방법으로 배열 타입 지정

console.log(arr1);
console.log(arr2);

 

타입 지정을 제너릭으로 이용할 경우 유니온 타입(union type)을 아래와 같이 활용할 수 있습니다.

 

const arr4: Array<number|string> = [1, 2, 3, "hello", 123];
console.log(arr4);

 

*유니온 타입은 or 연산자처럼 생각하면 됩니다.

 

any

모든 타입을 허용하는 타입입니다.

 

let val1: any = 123;
console.log(val1);
val1 = "hello";
console.log(val1);
val1 = true;
console.log(val1);

 

null과 undefined

 

javascript에서는 null과 undefined는 값이면서 타입이라고 합니다.

따라서 typescirpt에도 null과 undfined 타입이 존재합니다.

let val2: null = 123; // complie error :(
let val3: null = null; // success!

 

function fixNumberToString(val1?: number | null): void {
    if(val1 !== undefined && val1 !== null) {
        console.log(val1.toFixed());
    }
}

fixNumberToString(100); // val1 === 100
fixNumberToString(); // va11 === undfined
fixNumberToString(null); // val1 === null

 

* null과 undefined의 차이

- null: 아무것도 참조하지 않을 때 사용

- undefined: 변수가 선언되고 아무 값도 할당되지 않으면 undefined 값을 가진다.

 

* 매개변수 뒤 ?는 선택 매개 변수를 의미합니다. 즉, 반드시 전달할 필요가 없는 매개변수입니다.

* ! 는 타입 단언으로 null과 undefined 타입이 아니라는 걸 확신할 때 사용된다고 합니다.

* '실전 리액트 프로그래밍'에 의하면 null과 undfined 타입은 다른 타입과  함께 유니온 타입으로 많이 사용된다고 합니다.

 

generic

동적으로 타입을 결정하는 방법입니다.

 

generic을 사용하면 아래와 같이 type 별로 overloading을 하여 사용하던 함수를 좀 더 간단하게 선언 가능합니다.

 

먼저 generic 없이 함수를 overloading 한 예시입니다.

 

function test(val: number): number;
function test(val: string): string;
function test(val: any) {
    return val
}

let res = test(1)
console.log(res);

let res2 = test(true); // 참고로 매개 변수가 boolean인 함수는 overloading이 안돼 있으므로 compile 에러 발생
console.log(res2);

 

위 예시에서 genreic을 사용하면 아래와 같이 함수를 선언 가능합니다.

 

function test<T>(val: T): T {
    return val;
}

const res1 = test<number>(100);
console.log(res1);

const res2 = test<string>("hello");
console.log(res2);

 

extends 키워드를 사용하면 generic의 타입도 제한이 가능합니다.

 

function test<T extends number | string>(val: T): T {
    return val;
}

const res1 = test<number>(100);
console.log(res1);

const res2 = test<string>("hello");
console.log(res2);

const res3 = test<boolean>(true); // compile error: Type 'boolean' does not satisfy the constraint 'string | number'.
console.log(res3);

 

---

참고 자료

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html - Typescript 공식 문서

실전 리액트 프로그래밍 리액트 훅부터 Next.js까지(개정판) - 이재승

https://webclub.tistory.com/1 - undefined와 null의 차이점(Web Club 블로그)

 

혹시 본 게시글 중 틀린 내용이 있다면 댓글을 통해 알려주세요 :)

감사합니다.