2023.05.18) 타입스크립트의 타입 (1)

1. 타입스크립트에서 타입을 지정해주는 방법

타입스크립트란 말 그대로 타입을 지정해준다는 의미이다.

보통 자바스크립트에서는 

[1,2,3]+flase
=> 123flase

이렇게 말도 안되는 코드를 실행해준다.

number와 boolean을 더해주는 말도 안되는 실행을 보여준다.

실행되는 이유는 자바스크립트는 우리가 작성하는 코드를 최대한 이해하려고 하고, 

추론하여 실행하기 때문이다. 그렇기에 저런 이상한 코드를 작성해도 오류가 발생하지 않는다.

하지만, 타입스크립트는 타입을 지정해주기에 오류가 난다고 알려주게 된다.

 

타입스크립트로 타입을 지정해주는 방식에는 두 가지가 있는데,

1. 명시적으로 지정해주는 방식

2. 타입스크립트가 추론하게 하는 방식

이렇게 두 가지가 있다.

let a : string = "2"    // type: string
let b = "2"    // type: string
let c : number[] = [1,2,3]    // type: number[]
let d = [1,2,3]    // type: number[]

a와 c는 타입을 명시해 주었고, b와 d는 타입을 명시해주지 않았지만, 

타입스크립트가 타입을 추론하여 타입을 부여해준다.

 

2. 선택적 사용

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

위의 형태로 사용할 때 age를 선택적으로 사용하려고 하면, 

player 내에 age가 없을 땐 오류가 나게 된다.

그럴 땐,

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

?를 사용하여 선택적이게 만들어주면 되는데,

?를 사용하게 되면 age?: number | undefined 가 되어서 선택적으로 사용할 수 있게 된다.

근데 player 객체가 여러개일 때 타입을 저렇게 명시적으로 쓰게 되면 코드가 길어지고 가독성이 좋지 않아진다.

 

3. Alias 타입

type Player = {
	name: string,
    age?: number
}
const ori : Player = {
	name: "ori"
}
const olaf : Player = {
	name: "olaf",
    age: "5"
}

이렇게 Player라는 Alias를 타입을 적용할 수도 있다.

Alias 타입은 객체에만 이용되는 것이 아니라, 다른 곳에도 이용할 수 있다.

물론, Alias 안에 Alias를 이용할 수도 있다.

이렇게 하면 코드 재사용을 할 수 있어서 좋다!!

다만, 너무 무턱대고 Alias를 마구잡이로 사용하지는 말아야 한다.

 

4. 함수에서의 타입

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

function playerMaker(name:string):Player {
	return {
    	name
    }
}
//화살표 함수의 경우
const playerMaker = (name:string):Player => ({name})

const ori = playerMaker("ori")
ori.age = 7

playerMaker라는 함수의 프로퍼티인 name의 타입을 지정해주고,

return의 타입도 함수의 괄호 옆에 ':타입'을 하여 지정해줄 수 있다.