typescript - type 종류(2)

남자김용준·2022년 10월 16일
0
  1. 클래스
class Calendar {
	month: string;
  
  constructor(month:string) {
  	this.month = month;
  }
  
  getMonth(): string {
  	return this.month;
  }
}

const calendar = new Calendar("May");

생성자 함수를 통해 초기화가 되는 프로퍼티의 경우, 초기화되기 전에 프로퍼티 정의가 꼭 필요하다.

class Calendar {
	constructor(private readonly month: string) {}
  	
  	getMonth(): string {
    	return this.month;
    }
}

생성자 함수를 통해 초기화되는 프로퍼티의 경우 매개변수를 통해 선언하는 방법이다. 대신 프로퍼티 앞에 접근 제한자나 readonly 를 표기해야만 한다.

접근 제한자

  • public
  • private
  • protected
publicprivateprotected
해당 클래스 내부OOO
해당 클래스 외부OXX
상속받은 클래스 내부OXO

12.1 extends 상속

class User {
	public constructor(public name: string, public age: number) {}
  	
  	public getName(): string {
    	return this.name;
    }
  
  	public getAge(): number {
    	return this.age;
    }
}

class newUser extends User {
	public constructor(name: string, age: number) {
    	super(name, age);
    }
}

let user1 = new newUser("test",20);

인터페이스로 정의한 프로퍼티나 메서드는 해당 클래스에 필수적으로 들어가야 하며, 오버라이딩해서 내용을 구현해야 한다.

interface User {
	name: string;
  	age: number;
  	getAge(age:number): void;
}

class newUser implement User {
	name: string = "test";
  	age: number = 20;
  	getAge(age: number) {
    	console.log(this.age);
    }
}

12.2 추상 클래스
추상 클래스란 일반 메서드나 추상 메서드를 포함할 수 있는 클래스를 뜻하며, class 앞에 abstract 라고 표기하여 정의한다.
추상 클래스는 상속용으로만 가능하기 때문에 일반 클래스와 달리 객체 인스턴스 생성이 불가능하며, 상속받은 클래스에서는 해당 추상 메서드를 반드시 구현(오버라이딩)해야한다.

abstract class Circle {
	public abstract getArea(): number;
  
  	public printArea(): string {
    	return `${this.getArea()}`;
    }
}

class SapeArea extends Circle {
	public constructor(protected readonly radius: number) {
    	super();
    }
  
  	public getArea(): number {
    	return Math.PI * this.radius * this.radius;
    }
}

const myCircle = new ShapeArea(10);
인터페이스추상클래스
추상 메서드OO
일반 메서드XO
  1. 제네릭 기초
function hellGeneric<T>(message: T)

hellGeneric<string>("HEY");
hellGeneric<"HEY">("HEY");

T의 타입에 따라 함수의 타입이 결정된다.

  1. 유틸리티 타입
    14.1 Partial
    interface Book {
    	title: string;
    	description: string;
    	author: string;
    	publisher: string;
    }
    
    let typescript: Book = {
    	title = "str1",
    	description = "str2",
    } // error
    
    let typescript: Partial<Book> = {
    	title = "str1",
    	description = "str2",
    } // ok

14.2 Required

  interface Book {
	title?: string;
	description?: string;
	author?: string;
	publisher?: string;
}

let typescript: Book = {
	title = "str1",
	description = "str2",
} // ok

let typescript: Required<Book> = {
	title = "str1",
	description = "str2",
} // error

14.3 Readonly

interface Book {
	title?: string;
	description?: string;
	author?: string;
	publisher?: string;
}
let typescript: Readonly<Book> = {
	title = "str1",
	description = "str2",
}
typescript.title = "str3" // error

14.4 Record<Keys, Type>
프로퍼티 타입을 keys로, value 타입을 type으로 지정해 생성한다.

interface Food {
	"1팀": "피자" | "치킨" | "햄버거" | "컵라면";
 	"2팀": "피자" | "치킨" | "햄버거" | "컵라면";
 	"3팀": "피자" | "치킨" | "햄버거" | "컵라면";
 	"4팀": "피자" | "치킨" | "햄버거" | "컵라면";
}

const food: Food = {
	"1팀" : "피자",
 	"2팀" : "치킨",
 	"3팀" : "햄버거",
 	"4팀" : "컵라면",
}

const food: Record<
	"1팀" | "2팀" | "3팀" | "4팀",
  "피자" | "치킨" | "햄버거" | "컵라면";
> = {
  "1팀" : "피자",
 	"2팀" : "치킨",
 	"3팀" : "햄버거",
 	"4팀" : "컵라면",
}

14.5 Pick<Type, Keys>
Type에서 프로퍼티 Keys를 Pick 해 타입을 생성한다.

interface Person {
	name: string;
	age: number;
	location: string;
	gender: "M" | "W";
}

const kim: Pick<Person, "name" | "age"> = {
	name : "Kim",
	age: 27,
}; // name과 age가 아닌 다른 key를 선택 시 에러가 난다.

14.6 Omit<Type,Keys>
Type에서 프로퍼티 Keys를 생략해 타입을 생성한다.

interface Person {
	name: string;
	age: number;
	location: string;
	gender: "M" | "W";
}

const kim: Omit<Person, "age" | "gender"> = {
	name: "Kim",
	location: "Jeju"
}; //n age나 gender를 선택 시 에러가 난다.

14.7 Exclude<Type, ExcludeUnion>

type T1 = Exclude<"kim" | "lee" | "park", "park">;
// result: type T1 = "kim" | "lee"

14.8 NonNullable

type T1 = NonNullable<string | number | boolean | null | undefined>;
// result : type T1 = string | number | boolean
profile
frontend-react

0개의 댓글