[노마드코더스] Typescript 문법

타입스크립트의 장점

1. 타입안정성 (type safety)

자바스크립트는 에러에 대해 너무 관대하다. 타입스크립트를 통해 이러한 에러를 잡을 수 있고 사전에 방지할 수 있다.

javascript이 에러로 인식하지 않는 에러

// 예시 1
[1,2,3,4] + false // '1,2,3,4false'

// 예시 2
function divide(a, b) {
	return a / b; 
}
divide('xxxxx') // 'NaN' 

// 예시 3
const player = {
	age: 12; 
} // 
player.hello() // js는 에러가 날지 몰랐기 때문에 코드를 실행시켜버렸음 

타입스크립트 문법

1. 변수 : 타입 (explicit)

let a : number[] = [1, 2]
let b : string[] = ["i1", "i2"]
let c : boolean[] = [true]

2. optional types

const player : {
	name: string,
    age?:number // optional chaining, age는 있을 수 있고 없을 수도 있다는 것을 알려줌 
} = {
	name:"kyoorim"
}

3. alias (별칭)

타입을 중복해서 지정해줄 필요가 없음! 타입 재사용 가능!

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

const kyoorim : Player = {
	name: "Kyoorim"
}

const kyoo : Player = {
	name: "Kyoo",
  	age:12
}

4. 인수와 return값의 타입 정하기

function playerMaker(name:string) : Player {
	return {
      name:name 
    }
} // function playerMaker(인수) 의 결과값이 Player라고 해석! 콜론의 위치!!

const nico = playerMaker("nico")
nico.age = 12; 

화살표 함수인 경우

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

5. readonly

readonly가 쓰인 인수는 수정이 불가능 함! (보호장치)

// 예시 1
type Player = {
	readonly name: string,
  	age?: number
}

// 예시 2
const numbers: readonly number[] = [1,2,3,4]
numbers.push(1) // push가 readonly number[]타입에 존재하지 않으므로 에러로 인식함

반면 filter, map 메소드는 사용할 수 있음 => 기존 array를 바꾸지 않기 때문(immutability)

6. Tuple

정해진 갯수의 인자를 순서에 맞는 타입으로 받는 array를 지정할 수 있음

const player : [string, number, boolean] = ["kyoorim", 12, true]

7. any

typescript로부터 빠져나오고 싶을 때 => typescript의 보호장치를 잃어벌게 됨

8. void

"비어있는 것". 아무것도 return하지 않는 함수를 대상으로 함. 지정해줄 필요는 없고 TS에서 return값이 없는 경우 알아서 void로 인식함

function hello() {
	console.log('x')
} // function hello() : void

9. never

1/ return값이 없고 오류를 발생시키는 함수인 경우

function hello() : never {
	throw new Error("error")
}

2/ 타입이 2가지인 경우에 절대 실행되면 안되는 경우를 보여줌

function hello(name: string|number) {
	if(typeof name === "string") {
    	name // name:string인 경우
    } else if (typeof name === "number") {
    	name // name:number인 경우
    } else {
    	name // name:never인 경우 => name의 타입은 string or number라고 지정해줬으므로 그 이외의 경우는 발생해서는 안됨
    }
}

10. unknown

어떤 타입인지 모르는 변수를 받을 때 ex)API로부터 응답을 받는 데 그 응답의 타입을 모르는 경우 => 타입 확인작업을 반드시 해야함 !!!

let a : unknown;
let b = a + 1 // 이러면 오류가 생김 

if(typeof a === 'number'){
	let b = a + 1 // 이건 허용됨. unknown인 변수의 타입을 먼저 확인한 후 진행할 수 있게 해줌 
}

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