(rough) 노마드 타입스크립트-1

44523·2024년 1월 27일

명시적 타입은 자제하는것이 좋다고 한다. 타입스크립트가 추론하는게 더 좋다.

const player: { 
  name: string,
   age: number 
  } = {
  name: "nico",
  age: 5,
};

위의 예시에서 플레이어라는 객체의 키인 name과 age에 타입을 명시해주었는데, 타입스크립트는 name과 age 중 한가지만 가지면 오류가 발생한다.

하지만 age를 선택적으로 가지고 싶으면 어떻게 해야할까?

const player: { 
  name: string,
   age?: number 
  } = {
  name: "nico",
};

?를 붙여서 선택적변수를 명시해주면 해결할 수 있다. age가 number이거나 indefined 일수도 있다고 추론하는것이다.

만약 이상태에서

if(player.age <10 0){
  
}

를 작성하면, 타입스크립느는 player.age가 undefined일 수도 있다고 에러를 표시한다.

player.age가 존재하는지 확인을 거쳐야 한다.

if(player.age && player.age <10 0){
  
}

이러면 오류 해결!

자 그리고 우리가 player을 많이 만들어야 되는 경우가 생길 수 있다. 그러면 타입을 각각 다 설정해주어야 되는 번거로움이 있는데, 이를 Alias타입으로 해결할 수 있다.

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

}

const s : Player = {
  name:"nico"
}

타입 Player(첫문자 대문자로) 를 명시해주고 name과 age 타입을 명시한다음,
기존에 const player에 타입을 명시해준것을 지운 뒤
const s : Player 만 하면 된다. 이러한 방식으로 많은 타입을 재사용할 수 있을것 같다.

function playerMaker(name:string) :{ //인수의 타입 지정
  return {
    name:name
  }
}

인수의 타입을 지정하고

const a = playerMaker("a")

이러면 문제가 발생하지 않지만
만약 age에 접근한다고 하면? 문제가 발생한다

당연하게도 타입 명시가 안되어있기 때문인데, 함수의 리턴타입을 명시해주는 방법은 다음과 같고,


function playerMaker(name:string) : Player { //리턴타입 명시
  return {
    name:name
  }
}

이제 리턴타입이 Player 타입으로 지정 되었으니,

const a = playerMaker("a")
a.age = 12

age에도 접근이 된다!

화살표 함수로 표현한다면?

const playerMaker = (name:string) : Player => ({name})

121