OVERVIEW OF TYPESCRIPT

TypeScript 란?

• JavaScript에 추가적인 구문을 추가하여 editor와의 단단한 통합을 지원합니다.
  editor에서 초기에 오류를 잡을 수 있습니다.
• TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다.
  
• TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다.

Type 시스템

• 명시적 정의(변수 선언 시 타입 정의)

let a: boolean = "x"
// → 🚫 boolean 타입에 string타입 할당 불가 알림
// └ 변수만 생성(타입 추론)
let b = "hello"
// → b가 string 타입이라고 추론
b = 1
// → 🚫 string 타입에 number타입 할당 불가 알림

Types of TS

• 배열: 자료형 []
• 숫자: number
• 문자열: string
• 논리: boolean
• optional

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

// ❌ player.age가 undefined일 가능성 알림
if(player.age < 10) {
}

// ⭕ player.age가 undefined일 가능성 체크
if(player.age && player.age < 10) {
}

// ❗ ?를 :앞에 붙이면 optional

Type Aliases

• Type Aliases을 사용하여 객체 타입뿐만 아니라 모든 타입에 이름을 지정할 수 있습니다.

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

const player : Player = {
    name: "nico"
}

// ⭐ 함수에서는 어떻게 쓸까

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

function playerMaker1(name:string) : Player {
    return {
        name
    }
}

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

const nico = playerMaker1("nico")
nico.age = 12

readonly

• JavaScript에서는 mutability(변경 가능성)이 기본값이지만 타입스크립트에서는 readonly를 통해 읽기 전용으로 만들 수 있습니다.

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

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

const seok = playerMaker("nico")
// 🚫 seok.name = "aa"

const numbers: readonly number[] = [1, 2, 3, 4]
// 🚫 numbers.push(1)
// ❗ readonly가 있으면 최초 선언 후 수정 불가
   // ⇒ immutability(불변성) 부여
       // but, javascript에서는 그냥 배열

Tuple

• 정해진 개수와 순서에 따라 배열 선언

const player: [string, number, boolean] = ["seok", 1, true]
❗ readonly도 사용가능 ⇒ readonly [...] 형태

any

• TS에서 벗어나는 장치 (되도록 이면 사용 타입 넣는 것이 좋다.)

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

a+b // JS 처럼 가능해진다.

Void

• 값을 반환하지 않는 함수의 반환 값을 나타냅니다.
  함수에 return 문이 없거나 해당 return 문에서 명시적 값을 반환하지 않을 때 항상 유추되는 타입입니다.

function hello() {
    console.log('x')
}
const a = hello()
🚫 a.toUpperCase()

unknown

• unknown타입은 모든 값을 나타냅니다.
  이것은 any타입과 비슷하지만 any보다 unknown이 더 안전합니다.
  이유는 unknown값으로 작업을 수행하는 것은 합법적이지 않기 때문입니다.

let a:unknown

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

never

• 일부 함수는 값을 반환하지 않습니다.
  이는 함수가 예외를 throw 하거나 프로그램 실행을 종료함을 의미합니다.

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

function temp(name:string|number):never {
    if(typeof name === "string"){
        name
    } else if(typeof name === "number"){
        name
    } else {
        name
    }
}
// if 안에서는 string형의 name 반환
// else if 안에서는 number형의 name 반환
// else 안에서는 never형의 name 반환
// ⇒ 즉, 제대로 인자가 전달되었다면 else로 올 수 없음