TypeScript 개념 정리 - 타입스크립트 이해하기

dobby·2025년 6월 13일
0

타입스크립트

목록 보기
2/11
post-thumbnail

타입은 집합이다.

동일한 속성을 갖는 요소, 원소들을 하나로 묶어놓은 단위

타입 호환성

어떤 타입을 다른 타입으로 취급해도 괜찮은지를 판단하는 것을 타입 호환성이라고 한다.

any 타입은 예외로 다운캐스팅이 가능하다.
즉, 자신이 다운캐스팅 되는 경우, 자신이 업캐스팅 되는 경우 모두 가능하다.
그렇기에 any 타입은 위험한 타입이므로 웬만하면 사용을 지양하는 것이 좋다.

하지만, never 타입에 대해 never <- any 다운캐스팅은 되지 않는다.


객체 타입의 호환성

type Animal = {
	name: string;
	color: string;
}

type Dog = {
	name: string;
	color: string;
	breed: string;
}

let animal: Animal = {
	name: '기린';
	color: 'yellow';
}

let dog: Dog = {
	name: '돌돌이';
	color: 'brown';
	breed: '진도';
}

animal = dog;
// dog = animal; // error

위의 코드를 보면 Animal은 슈퍼 타입, Dog 타입은 서브 타입인 것을 알 수 있다.
즉, 조건이 더 적은 타입이 슈퍼 타입이 된다.


클래스 타입 호환성

class Hulk {
	static power: number;
	handSize: number;
	constructor(name: string, numHand: number) {}
}

class Captain {
	static leadership: number;
	handSize: number;
	constructor(numHand: number) {}
}

let hulk: Hulk;
let captain: Captain;
hulk = captain; // OK
captain = hulk; // OK

클래스 타입은 클래스 타입끼리 비교할 때 static member와 생성자를 제외하고 속성만 비교한다.
static 키워드는 클래스 내에 정의한 프로퍼티나 메소드가 바뀌지 않고 공통적으로 사용될 값에 사용된다.


대수 타입

여러 개의 타입을 합성해서 새롭게 만들어낸 타입
합집합 타입교집합 타입이 존재한다.

// 합집합, Union 타입
let a: string | number;
a = 1;
a = 'hello';

type Dog = {
	name: string;
	color: string;
}

type Person = {
	name: string;
	language: string;
}

type Union1 = Dog | Person;

let union1: Union1 = {
	name: '',
	color: '',
}

let union2: Union1 = {
	name: '',
	language: '',
}

let union3: Union1 = {
	name: '',
	color: '',
	language: '',
}

// let union4: Union1 = {
//	name: '',
//}
// 교집합, Intersection 타입
let variable: number & string; // -> never 타입이 된다.

type Dog = {
	name: string;
	color: string;
}

type Person = {
	name: string;
	language: string;
}

type Inersection = Dog & Person;

let intersection: Intersection = {
	name: '',
	color: '',
	language: '',
}

타입 추론

let d; // 암묵적 any 타입
d = 19; // number 타입
d.toFixed(); // number 타입

d = "hello"; // string 타입
d.toUpperCase(); // string 타입

암묵적으로 any 타입을 선언해두면 타입이 계속 바뀐다.

const num = 10; // 넘버 리터럴 타입
const str = 'hello'; // string 리터럴 타입

letconst와는 다르게 범용적인 타입(number, string...)으로 추론한다.
const는 리터럴 타입으로 추론한다.


타입 단언

type Person = {
	name: string;
	age: number;
}

// let person = {};
// person.name = '황수연';
// person.age = 25;

let person = {} as Person;
person.name = "황수연";
person.age = 25;


type Dog = {
	name: string;
	color: string;
}

let dog = {
	name: '',
	color: '',
	breed: '',
} as Dog;


// const 단언
let num = 10 as const; // 리터럴 타입으로 만들어준다.

let cat = {
	name: '',
	color: '',
} as const; // readonly 객체로 초기화된다.

// cat.name = 'dd';

// Non Null 단언
type Post = {
	title: string;
	author?: string;
};

let post: Post = {
	title: '게시글1',
	author: '황수연',
};

// const len: number = post.author.length;
// -> const lent: number = post.author?.length;
// 옵셔널 체이닝

const len: number = post.author!.length;
// ! -> Non Null, null이나 undefined가 아닐거라고 믿게 만든다.

타입 단언의 규칙

단언식: 값 as 단언

A as B

  • A가 B의 슈퍼타입이거나
  • A가 B의 서브타입이거야 한다.

타입 좁히기

조건문 등을 이용해 넓은 타입에서 좁은 타입으로 타입을 상황에 따라 좁히는 방법이다.

type Person = {
	name: string;
	age: number;
}

// value => number ? toFixed
// value => string ? toUpperCase
function func(value: number | string | Date | null | Person) {
	// value.toUpperCase();
	// value.toFixed();
	if(typeof value === 'number') {
		console.log(value.toFixed());
	}
	else if(typeof value === 'string') {
		console.log(value.toUpperCase());
	}
	else if(value instanceof Date) {
		console.log(value.getTime());
	}
	else if(value && 'age' in value) {
		console.log(value.age, value.name);
	}
}

nullobject를 반환한다.
instanceof 연산자는 우항에 타입이 오면 안된다.
Date는 클래스이기 때문에 위치할 수 있었던 것이다.


서로소 유니온 타입

교집합이 없는 타입들로만 만든 유니온 타입

type Admin = {
	tag: 'ADMIN';
	name: string;
	kickCount: number;
};

type Member = {
	tag: 'MEMBER';
	name: string;
	point: number;
};

type Guest = {
	tag: 'GUEST';
	name: string;
	visitCount: number;
};

type User = Admin | Member | Guest; // 서로소 유니언 타입

function login(user: User) {
	if(user.tag === 'ADMIN') {
		// admin 타입
		console.log(user.name, user.kickCount);
	}
	else if(user.tag === 'MEMBER') {
		// member
		console.log(user.name, user.point);
	}
	else {
		// guest
		console.log(user.name, user.visitCount);
	}
}
profile
성장통을 겪고 있습니다.

0개의 댓글