[노마드 코더] 타입스크립트 - #2 OVERVIEW OF TYPESCRIPT

📍시작

타입스크립트에 대해 알고는 있지만 기초 지식이 부족하다 생각했다.
그러던 중 노마드 코더 타입스크립트 강의를 듣게 되었는데
공부하는데 많은 도움이 되었고 내가 사용하고 있는 타입들을 왜 사용하는지 알게 된 계기가 되었다.

---

✔️ TypeScript

• 코드를 실행하기 전 오류를 잡고 싶을 경우 (초기 오류를 잡아준다.)
  - 개발자가 실수하지 않도록 보호해 준다.
• 코드를 컴파일 할 경우 작성한 코드는 자바스크립트로 변환된다.
  - 브라우저는 타입스크립트가 아닌 자바스크립트로 이해하기 때문이다.
  - 타입스크립트에 에러가 있다면 자바스크립트로 컴파일 되지 않는다.

✔️ 타입 시스템

• 데이터와 변수의 타입을 명시적으로 정의할 수 있다.
• 변수만 생성하고 타입스크립트가 타입을 추론할 수 있다.

명시적 정의

• 변수 선언 시 타입을 정의해 준다.
• 보통 명시적 표현은 최소한으로 하는게 좋다.

let b = [] 
// 빈 배열인 경우 타입스크립트는 추론하기 어렵다.

let b = number[] = []
b.push(‘Hi’) 
// 오류: b 배열에 ‘Hi’라는 string을 할당할 수 없다.

타입추론

• 변수만 생성해 타입 추론할 수 있다.

let a = ‘hello’ 
// let a: string

a = 1
// Type ‘number’ is not assignable to type ‘string’

✔️ 객체 타입 지정하기

• 객체 처럼 중괄호에 타입을 지정한다.

const player : {
	name: string,
	age?: number,
} = {
	name: ‘jieun’
}

if(player.age < 10){ }
// 에러: age는 undefind 일 수 있다.

if(player.age && player.age < 10){ }
// &&를 사용해 age가 먼저 있는지 확인해 준다.

• 만약 age 를 선택적으로 하고 싶을 경우 ?를 : 앞에 붙여준다. (옵셔널 파라미터)
• 만약 age가 없는 상태로 age를 불러 올 경우 에러가 난다.
  - 이럴 경우 타입 가드(Type Guard)를 해준다.

❗️ Type Guard (타입 가드)

• 컴파일러가 타입을 예측할 수 있도록 코드를 작성해서 버그가 발생하지 않도록 예방하는 방법
• 조건문에서 객체의 타입을 좁혀나갈 수 있습니다.

참고 하기 좋은 내용
https://radlohead.gitbook.io/typescript-deep-dive/type-system/typeguard
https://ibocon.tistory.com/261

❗️ ? 단축어

• ? 는 단축어로 [해당 타입]이거나 undefind라고 해주는 것과 동일하다.
• 자바스크립트 옵셔널 체이닝과 같은 맥락이라 볼 수 있을 것 같다.

age: number | undefind

age?: number
// number | undefind를 ?으로 단축할 수 있다.

age?: number | undefind
// 이렇게 사용할 필요가 없다는 뜻 (코드 리팩토링해야겠다...)

✔️ Alias(별칭) 타입 생성

• 여러개의 값을 생성할 경우 그 때 마다 동일한 타입을 지정해 주는건 효율적이지 않다.

const playerJieun : {
	name: string,
	age?: number,
} = {
	name: ‘jieun’
}

const playerColl : {
	name: string,
	age?: number,
} = {
	name: ‘coll’
}

• 이럴 경우 Alias(별칭) 타입으로 재사용성을 높힌다.

// 첫글자는 대문자로 해줘야한다.
type Player = {
	name: string,
	age?: number,
}

const jieun : Player = {
	name: ‘jieun’,
}

const coll : Player = {
	name: ‘coll’,
	age: 20,
}


// 만약 age라는 값이 다른 곳에서 사용할 경우 Age라는 별칭을 생성해 재사용성을 높힐 수 있다.
// 단, 이런식으로 과하게 재사용하는건 좋지 않다.(개발자가 유통성있게 사용해야한다.)

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

✔️ 함수 타입 지정하기

• 함수의 경우 인자에 타입을 지정해 주고 그 뒤에 반환하는 값의 타입을 지정해 주면 된다.

// 일반 함수
function playerMaker(name: string): Player {
	return {name}
}

// 화살표 함수
const playerMaker = (name: string): Player = > ( 
 {name} 
)

✔️ readonly

• 요소들을 읽기 전용으로 만들 수 있다.
• 값을 변경하려고 하면 오류가 생긴다.
• immutability(불변성)을 가지게 된다.
• 원본을 훼손하지 않도록하는 const(상수)와 유사하다.

type Player = {
  	// name은 읽기전용
	readonly name: string, 
	age?: number,
}

const jieun : Player = {
	name: ‘jieun’,
}

player.name = ‘choi’// 에러


const numbers: readonly number[] = [1, 2, 3]

numbers.push(1) // 에러
// filter, map 등의 경우 값을 건들지 않기 때문에 에러가 생기지 않는다.

✔️ Tuple

• 배열을 생성할 수 있다.
  • 최소한의 길이를 가져야하고,
  • 특정 위치에 특정 타입이 있어야한다.

const player: [string, number, boolean] = [‘jieun’, 1 , true]
player[0] = 1 
// 오류 발생
// 0번째 인덱스에는 string만 올 수 있다.

const player: readonly [string, number, boolean] = [‘jieun’, 1 , true]
// Tuple과 readonly를 합칠 수도 있다.

✔️ undefined, null, any

// undefined
// 옵셔널로 사용 가능 '?'
let a: undefined = undefined

//null
let a: null = null

any

• 비어있는 값들을 쓰면 기본적으로 any가 된다.
• 타입스크립트로 부터 빠져나오고 싶을 때 쓰는 타입 (타입의 보호를 받을 수 없다)
• 아무 타입이나 될 수 있다.
• 타입스크립트 설정에 any사용을 막기위한 설정이 있다. 그럼에도 any를 배울 필요가 있다.

let a: any = []

const a: any[] = [1, 2, 3]
const b: any = true

a + b // 오류가 나지 않는다.

✔️ 타입스크립트에서만 존재하는 타입

unknown

• 어떠한 작업을 할 경우 해당 변수의 타입을 먼저 확인해야하는 방식이다.
• 변수의 타입을 미리 알지 못할 때 사용한다. (변수의 타입을 모를때)
• 이럴 경우 타입스크립트는 타입 확인 작업을 강제로 시킨다. (사용 할 때 변수타입 지정)
• any 대신 사용할 수 있다.

let a: unknown
let b = a + 1 // 에러 발생 (타입확인 필요하다.)

// 사용할 때 마다 변수 타입을 지정해야한다.
if(typeof a === 'number'){
    let b = a + 1
}

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

void

• 아무것도 return하지 않는 함수를 대상으로 사용한다.
• 보통 void를 따로 지정해줄 필요는 없다.
• 함수에 return문이 없거나 해당 return문에서 명시적 값을 반환하지 않을 때 항상 유추되는 타입

// 타입스크립트는 해당 함수의 반환값을 void로 추론한다.
function hello(){
	console.log(‘hi’) // function hello():void
}

never

• 자주 사용되진 않지만 중요하다.
• 함수가 절대 return하지 않을 때 발생한다. (함수가 return 하지 않을 경우)
• return 하지 않고 오류를 발생시키는 함수

// 1.함수에서 exception(예외)발생할 경우
function hello(): never {
	return ‘hello’ // 에러
}

function fail(msg: string): never {
	throw new Error(msg); // 에러나지 않음
}

// 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
		//두 타입 모두 확인했기 때문에 해당 영역은 절대 실행되면 안된다.
	} 
}

---

✏️ 마치며

하나의 섹션에서 이미 알고 있던 것도 있었지만
알고 있었지만 왜 사용하지는, 왜 사용하면 안 되는지 알 수 있었다.

그리고 사용 예시도 같이 알려줘서 이해하는데 도움이 되었다.

강의 영상
https://nomadcoders.co/typescript-for-beginners/lectures/3668