TypeScript / 타입 추론, 타입 단언

Type Inference(타입추론)

컴파일러가 자동으로 변수, 표현식 등의 타입을 결정하는 프로세스로,

명시적인 타입 지정이 없더라도 컴파일러가 코드의 문맥을 기반으로 적절한 타입을 추론한다.

 

 

변수 추론

let myNumber = 5;
let myString = "Hello";
let myBool = true;

myNumber = 23;
// myNumber = "14" // 오류 발생

 

함수 반환 값 추론

function add(x:number, y:number) {
    // 인자 뒤 :number를 생략해도 문제 없음
    return x+y;
    // return `${x}${y}` // 이 경우에는 const n이 string으로 추론
}

const n = add(10,5)

 

배열&객체 추론

let nums = [1, 2, 3, 4] // number로 추론됨
let users = { name: "Eli", age: 30 } // name:string, age:number로 추론

// 오류
nums.push("Hello") 
user.age = "30"

let mixedValues = [1,2,3,"red","green","blue"] // string | number

 

 

---

 

 

Type Assertion(타입 단언)

직접 컴파일러에게 변수나 객체가 가진 타입에 대해 알리는 방식

타입을 확실히 알고 있을 때 사용하는 것이 좋다.

 

표현 방식

// # as 문법
const someValue: unknown = "Hey there";

const len = someValue.length // error,unknown 타입이기 때문에 length에 접근 불가
const len1 = (someValue as string).length // 문자열로 취급


// # <> 문법
// JSX 구문에서는 사용 불가능
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

 

목적

• 알수 없는 타입이거나 불확실한 타입일 때
  - 외부 라이브러리나 API에서 데이터를 받을 때, 타입 단언을 통해 개발자가 타입을 명시해줌

interface User {
    id: number;
    name: string;
    email: string;
}

async function fetchUser(): Promise<User> {
    let response = await fetch('/api/user');
    let data = await response.json();
    return data as User;
}

 

• DOM 요소 조작
  - button 요소에 disabled 속성이 실제로는 존재하나, ts에서는 HTMLElement로 판단하고 button인지 input인지 p인지 정확히 알지 못함
  => HTMLElement에는 disabled 속성이 없어서 에러가 발생
  => HTMLButtonElement로 명시함

const button = document.getElementById("button")
button.disabled = false 

const button1 = document.getElementById("button1") as HTMLButtonElement
button1.disabled = false