Typescript

박영은·2024년 11월 12일
0

그냥 한번 정리하고 싶어서 쓰는 정리 글


1. interfacetype

1-1. interface

1-1-1. 확장성 및 사용

  • 여러번 선언 가능.
  • 동일한 이름으로 interface 선언 시 자동으로 합쳐짐 = 코드의 다른 위치에서 타입 확장 가능! (= 확장성 필요할 때 굿)
    - 여러 선언을 통한 확장이나 호환성 필요한 경우 더 적합

1-1-2. 합성

  • 기본적으로 객체의 구조를 정의하는 것에 초점이 더 맞춰져 있음.
  • Union 타입 사용 불가.
interface Item {				const item : Item = {
  	id : number;					id : 1, 
	name : string;					name : 'itemBox',
  	info : string;					info : 'item box info'
}								}

// 특정 구조를 따르도록 강제하려면 interface가 적합함.
interface Person {
  	name: string;
  	sayHello: void;
}
class User implements Person {
  // implements
  	// - TypeScript에서 클래스가 특정 interface의 구조를 따라야 할 때 사용
    // - 사용하면 클래스가 interface에서 정의된 속성과 메서드를 반드시 구현하도록 강제할 수 있음
  	// => 코드의 일관성을 유지하고 예측 가능한 구조를 제공함.
   	// => 이것을 사용해서 클래스가 이 구조를 반드시 따르도록 함.
  			// = 클래스는 interface에서 정의된 모든 속성과 메서드를 포함해야 함.
  constructor(public name: string) {}

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}



1-2. type

1-2-1. 확장성 및 사용

  • 동일한 이름으로 다시 정의 불가함. (별도의 타입 선언해 확장해야 함)
  • 객체뿐 아니라 원시 타입, 배열, 튜플, 함수 등의 모든 타입을 정의함.

1-2-2. 합성

  • UnionIntersection을 지원
    = 다양한 조합을 쉽게 표현할 수 있음.(= 복잡한 타입을 정의할 때 유리함.)
    • 함수, 유니온 타입, 복잡한 타입의 조합에서 더 적합.
// 함수 타입 정의 시 type이 더 간결하고 이해하기 쉬워서 적합함.
type Statue = 'error' | 'success' | 'loading';
const onChangeStatus = (status : Status)=>{
  if(status === 'error'){
	console.error('erorr', status)
    ....
}
  
// 여러 타입 조합해서 새 타입 만들 때 = type의 &(Intersection)연산자가 유용함.
type User = { id: number, name : string; }
type Admin = User & {role : 'admin';};
  
const admin: Admin = {
	id: 1,
  	name : 'PYE', 
  	role : 'admin',
}
profile
Front-end

0개의 댓글