[TIL] Typescript - type 정리(1)

오늘 공부한것 & 기억하고 싶은 내용

기본적인 타입 유형

• 배열: 자료형[]
• 숫자: number
• 문자열: string
• 논리: boolean
• optional (?를 :앞에 붙이면 optional)

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

❌ player.age가 undefined일 가능성 알림  
if(player.age < 10) {  
}  
  
⭕ player.age가 undefined일 가능성 체크  
if(player.age && player.age < 10) {  
}  

Alias(별칭) 타입

type Player = {  
    name: string,  
    age?:number  
}  
  
const player : Player = {  
    name: "yeah"  
}  

함수에서 사용

type Player = {  
    name: string,  
    age?:number  
}  
  
function playerMaker1(name:string) : Player {  
    return {  
        name  
    }  
}  

화살표 함수 일때

const playerMaker2 = (name:string) : Player => ({name})  
  
const yeah = playerMaker1("yeah")  
nico.age = 12

readonly 사용

요소를 읽기전용으로 만들어 들 수 있다.

const numbers : **readonly** number[] = [1,2,3,4,5]
numbers.push(1) //작동하지 않음

const array : number[] = [1,2,3,4,5]
array.push(1) // 작동함

Tuple

정해진 배열에 정해진 갯수의 요소와 순서의 맞는 타입의 값을 요구할때 유용하다.

const player : [string, number, boolean] = ["yeah", 1, true]

player[0] = 1 // 바꿀수없음 string으로 지정됨

any

• any는 말 그대로 무엇이든 입력할 수 있게된다. (아무 타입)
• 타입체크를 '비활성화' 시켜버린다. any를 사용하는 순간 자바스크립트가 되어버림.
• 이것은 좋지않으며, 타입스크립트의 타입의 보호를 받을 수 없다.
• 하지만 가끔쓸 수 있으며 그럴땐 any를 써야 한다.
• any를 남발하면 안되고, 심지어 any를 사용 못하게 하는 문법도 있다고 함

배운점 & 느낀점

자바스크립트에서는 오류를 잘 안 뱉는 반면, 타입스크립트는 좀 까다로운 녀석 같다.
이번에 처음으로 타입스크립트 사이트에서 예제를 보면서 코드를 따라쳐봤는데 빨간줄이 난무했다.. 그래도 간단명료하게 에러를 알려줘서 쉽게 고칠 수 있었다.
타입스크립트라 "타입"이 많다. 외우진 못하고 정리해놓고 시간날때마다 읽어보며 개념을 익혀야겠다.