타입스크립트의 타입

y___h·2023년 5월 14일

typescript

들어가는 말

노마드코더의 타입스크립트&리액트 마스터클래스 강의를 듣고 리액트 프로젝트에 타입스크립트 적용을 했었다.

요점정리는 했지만, 머릿속엔 정리되지 않은 채로 적용을 시도하니 쉽지 않았다.

타입을 지정할 때 마다 의문이 들었고, 해결방법에 대해 구글링하기 바빴던 것 같다.

그래서 오늘부터 쭉 타입스크립트에 대해 정리하는 시간을 가지고, 다시 프로젝트 코드 리뷰를 해보기로 했다.

이번엔 타입스크립트의 타입들에 대해 정리해보자.
타입스크립트 핸드북 과 노마드코더-타입스크립트 강의를 참고하여 작성하였다 :)

내장 타입 (Built-in types)

타입스크립트에는 기본 내장된 타입에 해당하는 원시 타입이 있다.

number
string
boolean
symbol
object
null
undefined

그 외 타입

타입	설명
unknown	최상위 타입. 타입을 알 수 없을 때 사용
never	하위 타입. 절대 return하지 않을 때 사용
객체 리터럴	예, { property: Type }
void	아무것도 return하지 않는 함수를 대상으로 사용
T[]	수정가능한 배열들, 또한 Array 으로 사용가능
[T, T]	튜플 타입 : array의 요소의 `순서`와 `개수`를 정할 수 있음. 고정된 길이지만 수정 가능한 튜플
(t: T) => U	함수
any	타입을 알 수 없을 때 사용 (js와 동일)
generic	타입을 미리 알 수 없을 때 사용

활용 예시

👉🏻 Array, Union, Object, Function

// array
let c: number[] = [1, 2, 3];

// Union(유니언은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법)
let d: number|string = 3;

function getLength(obj: string | string[]) {
  return obj.length;
}

// object
const player : {
	name:string,
	age?:number // optional
} = {
	name: "Morgan"
}

// function 
const fn1 = (a:number, b:number):number => {
  return a + b;
} // number 타입의 a,b를 매개변수로 받고, number 리턴

👉🏻 Alias 타입

: type object를 만들고 변수에 type 넣어주는 방식

// before 
const player : {
	name:string,
	age?:number
} = {
	name: "Morgan"
}

// after
type Player = {
  	name:string,
  	age?:number
}

const morgan : Player = {
	name : Morgan
}

👉🏻 Return 타입 지정

type Player = {
  	name:string,
  	age?:number
}

// function keyword
// name이라는 string type의 인자를 받고, Player 타입을 리턴하는 함수

function playerMaker(name:string) : Player {
  	return {name};
}

const morgan = playerMaker("Morgan");
morgan.age = 20;
// 리턴 타입이 Player이기 때문에,age를 추가할 수 있음. 


// arrow function 
const playerMaker = (name:string) : Player => ({name});

👉🏻 readonly 속성 타입에 추가하기

type Player = {
  readonly name:string,
  age?:number
}

const numbers: readonly numbers[] = [1, 2, 3, 4];
numbers.push(5) // 🚨Complaining !!

👉🏻 Tuple

array의 요소의 순서와 개수를 정할 수 있음

// Tuple example
const player: [string, number, boolean] = ["morgan", 1, true];

// Can use readonly
const player: readonly [string, number, boolean] = ["morgan", 1, true];

👉🏻 unknown

타입을 모를 때 사용 : 어떤 작업을 하려면 해당 변수의 타입 확인이 필요함
ex) API로부터 response를 받는데, response의 타입을 모를 때 사용

let a:unknown;

if (typeof a === 'number'){
  let b = a +1
}

if (typeof a === 'string'{
    let b = a.toUpperCase();
}

👉🏻 void

아무것도 return하지 않는 함수를 대상으로 사용

// (타입추론으로 인해 ':void'는 생략가능함)
function hello() : void {
  console.log('x');
}

👉🏻 never

절대 return하지 않을 때 사용
ex) 함수에서 exception(예외)이 발생할 때

👉🏻 generic

타입을 미리 알 수 없을 때 사용
any보다 generic 사용 권장

type SuperPrint = {
  <T, M>(a: T[], b:M) => T
}

const superPrint:SuperPrint = (a) => a[0];

const a = superPrint([1,2,3,4], "x"); // 1
const b = superPrint([true, false, true]); // true