다향성 ( Polymorphyism ), 제네릭 ( Generic )

다향성  ( Polymorphyism )

• poly란? => many, serveral, much, multi
• morphos란? => form, structure
• polymorphos란? => poly + morphos => 여러 다른 구조

 

call signature를 이용해봄.

type TestPrint = {
	(arr: number[]):void
    (arr: boolean[]):void
    (arr: string[]):void
}

const testPrint:TestPrint = (arr) => {
	arr.forEach (i => console.log(i))
}

testPrint([1, 2, 3, 4])
testPrint([true, false, false, true])
testPrint(["a", "b", "c", "d"])

배열로 받고 배열안의 값을 하나씩 출력해주는 함수를 만듬.

 

함수의 call signature로 배열안의 값이 number, booleanm, string일때를 만들어줬다.

 

여기서 배열안의 값이 다른 경우가 추가되면?

type TestPrint = {
	(arr: number[]):void
    (arr: boolean[]):void
    (arr: string[]):void
    (arr: (number|string[])):void
    (arr: (number|boolean[])):void
    (arr: (number|string|boolean[])):void
}

const testPrint:TestPrint = (arr) => {
	arr.forEach (i => console.log(i))
}

testPrint([1, 2, 3, 4]) // 배열안의 값이 number
testPrint([true, false, false, true]) // 배열안의 값이 boolean
testPrint(["a", "b", "c", "d"]) // 배열안의 값이 string
testPrint([1, 2, "a", "b"]) // 배열안의 값이 number + string
testPrint(["a", "b", true, false]) // 배열안의 값이 number + boolean
testPrint([1, 2, "a", true]) // 배열안의 값이 number + string + boolean

이런식으로 call signature를 계속 추가해줘야함.

 

이런 귀찮음을 덜어낼때 사용하는게 제네릭 ( Generic ).

 

type TestPrint = {
	<T>(arr: T[]):void // <T> 라는 Placeholder를 만들고 타입조건으로 사용
}

const testPrint:TestPrint = (arr) => {
	arr.forEach (i => console.log(i))
}

testPrint([1, 2, 3, 4]) // 배열안의 값이 number
testPrint([true, false, false, true]) // 배열안의 값이 boolean
testPrint(["a", "b", "c", "d"]) // 배열안의 값이 string
testPrint([1, 2, "a", "b"]) // 배열안의 값이 number + string
testPrint(["a", "b", true, false]) // 배열안의 값이 number + boolean
testPrint([1, 2, "a", true]) // 배열안의 값이 number + string + boolean

<>를 이용해 Placeholder를 만들어줌. 

( 이때 Placeholder안의 이름은 변수의명,상수의명,함수의명 처럼 아무렇게 지어주면 됨 )

 

<T> 를 타입으로 사용해주면 어떤게 들어갈지 모르겠다는 뜻임.

 

즉, 어떤게 들어갈지 모르겠으니 TypeScript가 들어오는 값의 타입을 보고 알아서 정해줌.

 

---

any 타입과는 다름.

 

제네릭 ( Generic )

 

제네릭 ( Generic ) 사용한 call signature

 

결과 타입

 

Any 타입으로 설정

 

any 타입 사용한 call signature

 

결과 타입

---

제네릭 ( Generic ) 복수

 

type TestPrint = {
  <T, M>(arr: T[], b: M): void; // <T> 라는 Placeholder를 만들고 타입조건으로 사용
};

const testPrint: TestPrint = (arr, b) => {
  arr.forEach((i) => console.log(i)), console.log(b);
};

testPrint([1, 2, 3, 4], "test"); // 배열안의 값이 number , string
testPrint([true, false, false, true], 1); // 배열안의 값이 boolean , number
testPrint(["a", "b", "c", "d"], false); // 배열안의 값이 string , boolean
testPrint([1, 2, "a", "b"], []); // 배열안의 값이 number + string , 배열

Placeholder에 M을 추가해주고 어디에 쓸 건지 지정해주기만 하면 됨.

 

 

제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다.