[TypeScript] 🐥 타입스크립트를 왜 써야 할까? + 기본 Type System

TypeScript 란?

 

 Javascript 

- 단점: 매우 유연해서 에러를 잘 보여주지 않음
- 문제점:

• ex.1) 숫자 배열 + false → 배열이 사라지고 string으로 바뀜
• ex.2) 함수의 인자가 잘못 들어가도 실행됨 → return값이 NaN일 뿐, 에러가 나지 않음
• ex.3) const a = { a: "A" };     →    a.hello();  실행 시 에러 발생
  : 실행 전에 에러 감지 불가

 

 Typescript 

- 장점: 타입 안정성 → 버그 감소

- 타입스크립트란?

• Strongly typed (강타입) 프로그래밍 언어
• 에러가 발생하면 컴파일 하지 않음 → 에디터에서 초기에 오류를 잡을 수 있음
• JavaScript를 이해하고 타입 추론을 사용하여 추가 코드 없이도 훌륭한 도구를 제공함

 

---

Type System 시작하기

 

- 명시적 정의:

• 변수 선언 시 타입을 직접 정의하는 방식

let a: boolean = "x"
// (X) → 🚫 boolean 타입에 string타입 할당 불가 알림

let a: boolean = "false"
// (O)

- 변수만 생성하기: 

• 타입스크립트에게 타입 추론을 맡기는 방식
• data type은 TS가 직접 추론하도록 하는게 좋다! 명시적 코드를 지양할 것

let b = "hello"
// → b가 string 타입이라고 추론

b = 1
// (X) → 🚫 string 타입에 number타입 할당 불가 알림

b = "bye"
// (O)

 

 

---

Type System 을 더 알아보자

 

- readonly (read + only)

• JavaScript에서는 mutability(변경 가능성)이 기본값임
• 타입스크립트에서는 readonly를 통해 읽기 전용으로 immutable(변경 불가능)하게 만들 수 있음

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

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

const nico = playerMaker("nico")
nico.name = "aa" // (X)

const numbers: readonly number[] = [1, 2, 3, 4]
numbers.push(1) // (X)

// ❗ readonly가 있으면 최초 선언 후 수정 불가
//    ⇒ immutability(불변성) 부여
//      but, javascript에서는 그냥 배열

 

- Tuple

• 정해진 개수와 순서에 따라 배열 선언하기
• 지정된 길이를 가져야 하고, 원하는 위치(순서)에 맞게 타입이 있어야 하는 배열을 생성하는 것

const player: [string, number, boolean] = ["nico", 1, true]
// readonly를 붙여서 사용할 수도 있음 ⇒ ex) readonly [string, number, boolean]

 

- undefined, null, any 의 차이

• any: 아무 타입    → any를 사용한다는 건 타입스크립트를 빠져나온다는 것. 가능한 지양할 것!
• undefined: 선언X 할당X
• null: 선언O 할당X
  
  
• TIP) ?: 를 사용하면 뒤에 오는 값이 number OR undefined 라는 뜻임

type Player = {
	age?: number
     // age: number | undefined
}

- unknown

• 응답 받고자 하는 값의 타입을 모를 때 사용
• void > unknown > never 순으로 자주 사용함

let a:unknown

if(typeof a === 'number'){
    let b = a + 1
}

a.toUpperCase()  // (X) but, 아래와 같이 작성하면 사용 가능

if(typeof a === 'string'){
    let b = a.toUpperCase()
}
 
let b = a + 1   // (X)

 

 

- void

• 아무것도 return하지 않는 함수에서 반환하는 자료형
• 보통 void를 따로 지정해줄 필요는 없다 (타입스크립트가 자동으로 감지함)

function hello() {
    console.log('x')
}

const a = hello()

a.toUpperCase()  // (X)

 

 

- never

• 함수가 return하지 않을 때 사용
• 예제 해석:
  - if 안에서는 string형의 name 반환
  - else if 안에서는 number형의 name 반환
  - else 안에서는 never형의 name 반환
  ⇒ 즉, 제대로 인자가 전달되었다면 else로 올 수 없음

function hello():never {
    throw new Error("zzz")
    return "a"  // (X)
}

function temp(name:string|number):never {
    if(typeof name === "string"){
        name
    } else if(typeof name === "number"){
        name
    } else {
        name
    }
}

 

---

 

TIL 끝!