타입 추론 및 설정
1) 타입 추론
타입스크립트의 특징 중 하나는 타입을 추론해준다는 것이에요. 다음 예시를 볼게요.
let a = "Hello"
a = 1 //ERR이 코드는 자바스크립트에서는 동작하는 코드에요. 타입변경이 가능하기 때문이죠. 하지만 타입스크립트에서는 이를 방지하고 있어요. 처음 a를 string 객체로 만들었기 때문에 a는 string 타입으로 정해진거죠. 그렇기 때문에 a를 number 타입으로 바꾸는 짓은 통하지 않아요!
2) 구체적인 타입 설정
당연히 타입스크립트는 처음 선언할 때 타입을 설정할 수 있도록 해줘요. 문법은 다음과 같아요.
let b: boolean = true이처럼 변수명 뒤에 :을 붙이고 타입을 설정해주면 끝이랍니다
3) optional
조금 더 긴 코드를 작성해볼까요? 예를 들어 우리는 축구선수들에 정보를 얻어냈어요. 근데 축구선수들 중에 나이에 민감하신 분들이 있어서 나이값은 못 받아낸 상황이라고 가정해봅시다. 선수1 object는 다음과 같이 작성할 수 있어요.
const player1: {
name: string,
age: number
} = {
name="Heungmin Son"
}이 코드는 과연 돌아가는 코드일까요? 정답은 "아니오"입니다! age가 player1 정보에 반드시 들어가야하도록 짜여진 코드에요. 여기서 사용할 수 있는게 바로 optional object 개념입니다.
const player1: {
name: string,
age?: number
} = {
name="Heungmin Son"
}이렇게 변수 뒤에 ?를 붙이면 "아 이 변수는 꼭 필요한 변수는 아니구나!"라고 인지됩니다. 근데 optional 변수를 사용할 때는 주의해야할 점이 있어요. 쓰다보니깐 age가 옵셔널하다는 것을 까먹고 다음과 같이 코드를 작성했다고 해요.
if(player1.age>10) player1.age는 옵셔널하기 때문에 undefined 타입이 될 수 있어서 이 if문은 항상 성립하지는 못해요. 그래서 이럴때는 타입에 맞게 작성해줘야하죠.
if(player1.age && player1.age>10)이렇게 player1.age가 undefined가 아닐 때 10살이 넘는 선수인지 정확하게 짚고 넘어가야 에러가 발생하지 않아요!
4) 타입 생성
const player1: {
name: string
} = {
name="Heungmin Son"
}
const player2: {
name: string,
age: number
} = {
name: "바보"
age: 20
}위에 보여드린 예시처럼 player마다 type을 작성해주는 것은 너무 비효율적인 방법이에요. 그래서 새로운 타입을 만들어서 제공해주면 더 편리하게 관리가 가능할거에요. 예시로 보여드릴게요.
type Player = {
name: string,
age?:number
}
const player1: Player = {
name: "Heungmin Son
}
const player2: Player = {
name: "바보",
age: 20
}이렇게 따로 타입을 작성해서 새로운 변수를 만들 때 해당 타입으로 생성해주면 작성하는데 더 편이하고 관리도 용이하겠죠?
타입 종류
기본적으로 Javascript와 타입 종류는 모두 동일해요. 그 중에 자바스크립트에는 없지만 타입스크립트에만 존재하는 타입 몇가지만 소개해드릴게요.
1) Readonly property
이름에서 알 수 있듯이 변수가 한번 지정되면 write은 불가하고 read만 가능하도록 하는 property에요. 한번 타입을 설정하면 더이상 값이던 모든 것들 변경이 불가해지죠.
const readonly name = "Heejin"2) Tuple
tuple의 개념은 다른 언어에서도 사용되기 때문에 조금은 익숙하실텐데, JS에서는 이를 지원하지 않죠. Typescript에서는 tuple 개념이 있는데요. 정해진 길이가 있고 순서대로 타입이 정해져있는 array라고 생각하면 돼요. 다음 예시를 볼게요.
const player: [string, number, boolean] = ["Heungmin Son", 2, true]이처럼 타입을 미리 설정하고 이에 맞는 순서대로 값을 가지게 돼죠. 그렇기 때문에 다음과 같은 코드는 에러가 발생해요.
player[0] = false이미 첫번째 자리는 string으로 타입이 정해져있기 때문에 boolean 값으로 변경하는 것은 불가능하죠.
3) Any 타입
타입을 정해주지 않으면 어떤 타입이더라도 변수는 받아들일 준비가 되어있게 되죠.
let a = []여기서 a는 타입이 정해져있지 않기 때문에 any타입이 됩니다. 근데 any타입은 웬만하면 사용하지 않는 것이 좋아요. typescript의 특성을 잃어버리기 때문이죠.
let a: any[] = [1,2,3,4]
let b: any = true
a+b // 에러 발생하지 않음JS처럼 이렇게 말도 안되는 코드에서 에러가 발생하지 않는 불상사가 생기기 때문에 any타입은 정말 필요할 때 아니면 사용하지 않는 것이 좋아요
4) unknown
unknown은 타입 확인을 위한 장치라고 생각하시면 돼요. 예시로 볼게요.
let a: unknown
let b = a+1 // ERROR! a의 타입이 unknown이기 때문!
if(typeof a === 'number'){ // 맞는 표현!
c = a+1
}이와 같이 unknown 타입은 모든 타입이 되기 위한 준비를 갖춘 타입이에요. 위에 예시와 같이 a는 어떠한 타입도 될 수 있는데, type을 명시하지 않은 상태에서 사용하는 것은 불가능해요. 그래서 if문과 같이 a가 어떤 타입일 때 이렇게 해주세요 하고 타입별로 정리해놔야하는 것이죠.
5) never
거의 사용되지 않는 타입인데 알아는 둬야하는 타입이 바로 never입니다. never는 함수가 절~~~대 리턴하지 않는 타입을 말하는데요 다음 예시로 확인해볼게요.
function hello(name:string|number){
if(typeof name === 'string) {// do something}
else if (typeof name === 'number) {// do something}
else {// 절대 불릴 일이 없으므로 name은 never 타입임}
}이와 같이 가능한 모든 타입을 정해줬기 때문에, else문에 있는 것과 같이 절대로 발생할 일이 없는 타입을 never타입이라고 합니다.
