[Typescript] 클래스 / 제네릭 / 유틸리티 타입

※ 클래스

class Car{
	color : string; //미리 선언해줘야 생성자에서 사용가능
	constructor(color : string){
    	this.color = color;
    }
    
    start(){
    	console.log("start"); 
    }
}

const bmw = new Car("red");

미리 선언 하는 대신 readonly 를 이용하는 방법

class Car{
	constructor(readonly color : string){
    	this.color = color;
    }
    
    start(){
    	console.log("start"); 
    }
}

const bmw = new Car("red");

 

ES6 에서 클래스는 다른 객체 지향 언어들처럼

접근제한자를 지원하지 않는다.

But 타입스크립트에서는 지원한다.

 

public(default) | privae | protected

 

 

---

※ 제네릭

제네릭타입은 타입을 일반화 해서 재사용 가능한 컴포넌트를 만들 수 있게 해주는 타입스크립트의 기능이다.

제네릭은 함수, 인터페이스, 클래스 등에서 사용할 수 있으며, 어떤 타입이 들어올지 미리 알 수 없는 경우에 유용하다.

 

어떤 인자가 들어와도 그대로 반환하는 identity 함수가 있다.

function identity(arg: any): any {
  return arg;
}

이 함수는 타입 안정성을 보장하지 않는다. 매개변수의 타입과 반환값이 타입이 동일한 것을 보장할 수 없다.

 

제네릭을 사용하면 위 함수를 일반화 할 수 있다.

function identity<T>(arg: T): T {
  return arg;
}

<T> 구문은 제네릭 타입 매개변수를 정의한다.

identity 함수는 T 타입의 값을 받아서 T 타입의 값을 반환하는 함수가 되었다. 이때 T 는 어떤 타입이든 될 수 있다.

 

let output1 = identity<string>("hello"); //output1 타입은 string
let output2 = identity<number>(123); //output2 타입은 number

여기서 identity 함수를 호출할 때 매개변수의 타입과 반환값의 타입이 일치하게되고,

이를 통해서 타입안정성을 보장할 수 있게 된다

 

이처럼 제네릭을 사용하면 일반화된 컴포넌트를 만들어서 재사용 할 수 있으며, 타입 안정성을 보장할 수 있다.

---

 

 

 

function getSize(arr : number[]):number {
	return arr.length;
}

const arr = [1,2,3];
getSixe(arr1); //3

 

매개변수의 type 이 바뀌었는데 동일한 함수를 사용하고 싶다면
: 유니온 타입 사용

function getSize(arr: number[] | string[]): number{ //유니온 타입
	return arr.length;
}

const arr2 = ["a","b","c"];
getSize(arr2);

 

 

그런데 이렇게 계속 타입을 추가하면 유니온 타입이 너무 길어지지않을까 ? 

 => 제네릭 사용

 

<T> : 타입 파라미터

function getSize<T>(arr: T[]): number{ // 위에서 <T> 선언을 해두고
	return arr.length;
}

const arr2 = ["a","b","c"];
getSize<string>(arr2); // 사용하는 시점에서 T 의 type 을 지정해준다, 3

const arr3 = [1,2,3];
getSize<number>(arr3); //3

 

예제 ) 

제네릭을 통해서 하나의 인터페이스만 생성하여

각기 다른 객체들을 만들어 줄 수 있음

 

---

※ 유틸리티 타입

▷ keyof

interface User{
	id: number;
    name : string;
    age : number;
    gender : "m" | "f";
}

type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender'

const uk : UserKey = "name"; 
//user interface 의 key 값 중 하나가 들어와야 함

 

 

 

▷ Partial<T>

 

Partial 은 프로퍼티를 모두 optional 로 바꿔줌

일부만 사용하는 것이 가능

 

interface User{
	id: number;
    name : string;
    age : number;
    gender : "m" | "f";
}

let admin : Partial<User> = {
	id : 1,
    name : "Bob";
};

//interface User{
//	id? :number;
//    name? : string;
//    age? : numbber;
//    gender? : "m" | "f";
//}

 

유틸리티 타입은 이상 더 많지만 .. 생략하고 추후에 추가로 쓰겠음