[Typescript 7] generic

제너릭, 함수 호출시에 타입을 지정하는 것

function logText2<T>(text: T):T {
    console.log(text);
    return text;
}
logText2<string>('하이'); //여기서 <string>은 인자('하이')의 타입

인터페이스에 제너릭 선언하는 이유&방법

제너릭을 선언 이유: 인터페이스에선 선언한대로만 쓸 수 있음

interface Dropdown2 {
    value: string;
    selected: boolean;
}
const obj2: Dropdown2 = { value: 'abc', selected: false}

제너릭을 이용한다면 선언하면서 타입을 유연하게 정할 수 있음

interface Dropdown3<T> {
    value: T;
    selected: boolean;
}
const obj3: Dropdown3<number> = { value: 10, selected: false}

응용

const emails: { value: string, selected: boolean}[] = [
//const emails: Email[] = [
  { value: 'naver.com', selected: true },
  { value: 'gmail.com', selected: false },
  { value: 'hanmail.net', selected: false },
];

const numberOfProducts: ProductNumber[] = [
// const numberOfProducts: Product[] = [
  { value: 1, selected: true },
  { value: 2, selected: false },
  { value: 3, selected: false },
];

// 위의 두 변수를 함수의 파라미터로 넣는다고 가정하면, 인터페이스를 생성한 뒤, 유니언타입으로 넣어줄수도 있다
interface Email {
    value: string;
    selected: boolean;
}
interface Product {
    value: number;
    selected: boolean
}
function uni(info: Email | Product) { }
// 유니언타입으로 처리할 수 있지만, 인터페이스를 생성해야하므로 코드가 길어지고, 
// 밸류의 타입이 언제든 바뀔수 있다고 생각하고 작업해야한다

// 따라서 아래처럼, 제너릭을 이용하여 타입의 유연성을 줄 수 있다 
interface Common<T>{
    value: T;
    selected: boolean;
}
const emails: Common<string> = [
    { value: 'naver.com', selected: true },
    { value: 'gmail.com', selected: false },
]
const emails2: Common<number> = [
    { value: 10, selected: true },
    { value: 50, selected: false },
]
function uni(info: Common<string> | Common<nunber>) { }

@Sarah
개인적인 공부를 위해 만든 블로그입니다. 혹시 틀린 점이 있다면 메일로 남겨주시면 감사하겠습니다!

GitHubGmail