TIL #47 | Typescript - 여러 방식으로 Type을 지정해주는 방법

type annotation & type inference

type annotation: 타입을 타입스크립트에게 직접 명시해주는 것

type inference: 타입스크립트가 알아서 타입을 추론하는 것
변수 선언과 동시에 초기화할 경우 타입을 알아서 추론해준다.

type annotation을 해줘야 하는 경우

1) any 타입을 리턴하는 경우
2) 변수 선언을 먼저하고 나중에 초기화하는 경우
3) 변수에 대입될 값이 일정하지 않은 경우

---

type assertion (타입 단언)

typescript가 자체적으로 추론할 수 있는 것보다 변수 유형에 더 잘 이해하고 있을 때 타입 단언을 사용하여 지시할 수 있다.

as 타입 단언

interface Person {
	name: string;
	age: number;
}

const person = {} as Person; // as Type 
person.name = "kim";
person.age = 30

const bodyElement1 = document.querySelector('body') as HTMLBodyElement; // HTMLBodyElement로 타입 단언
bodyElement1.innerText = 'Hello'

! not null 타입 단언

const bodyElement1 = document.querySelector('body');
// bodyElement1가 null이 아닐 때
bodyElement1!.innerText = 'Hello' // ! (not null)

type guard

const bodyElement1 = document.querySelector('body');
if (bodyElement1) { // bodyElement1가 있을 때
	bodyElement1.innetText = "Hello"
}

function func(arg: string | null) {
	if (arg) { // arg가 null이 아닐 경우
		return (arg as string).toLowerCase(); 
	}
}

---

Type Alias vs Interface

Type Alias (타입 별칭)

type People = {
	name: string
	age: number
}

const me: People = {
	name: 'Kim',
	age: 40
}

interface

interface People {
	name: string
	age: number
}

const me: People = {
	name: 'Kim',
	age: 40
}

Type Alias와 interface의 차이점

1) interface는 extends를 통해 확장하고, Type Alias는 Intersection을 통해 확장한다.

// interface 확장
interface Animal {
	name: string;
}

interface Bear extends Animal {
	honey: boolean;
}

const bear1: Bear {
	name: 'honey bear'
	honey: true
}

// type 확장
type Animal = {
	name: string;
}

type Bear = Animal & { // intersection Operator
	honey: boolean;
}

const bear1: Bear {
	name: 'honey bear'
	honey: true
}

2) interface는 타입 선언 후 다시 선언하여 병합이 가능하다.
(Type에선 불가)

interface Animal {
name: string;
}

interface Animal {
	honey: boolean
}

const bear1: Animal {
	name: 'honey bear'
	honey: true
}