🍖 타입스크립트 제네릭

🍞 제네릭이 무엇인가

제네릭은 다양한 타입을 허용함으로써, 재활용하는데 유용한 기능이다

 

🥗 제네릭 사용예시

중복이 되는 경우

/*
중복이되는 경우
*/
// Person1과 Person2의 경우 name,age 제외하고 값이 똑같다
interface Person1 {
  type: "human";
  race: "yello";
  name: "TEST1";
  age: 32;
}

interface Person2 {
  type: "human";
  race: "yello";
  name: "TEST2";
  age: 28;
}

//제네릭을 통해 중복 제거
interface PersonGenric<N, A> {
  type: "human";
  race: "yello";
  name: N;
  age: A;
}
interface Person3 extends PersonGenric<"choi", 32> {}
interface Person4 extends PersonGenric<"choi2", 28> {}

함수 표현식,선언문

/*
함수 선언문,표현식
*/
//함수 표현식
const personFactoryE = <N, A>(name: N, age: A) => ({
  type: "human",
  race: "yellow",
  name,
  age,
});

//함수 선언문
function personFactoryD<N, A>(name: N, age: A) {
  return {
    type: "human",
    race: "yellow",
    name,
    age,
  };
}

const p0 = personFactoryE<string,number>("choi",32)
//타입추론도 가능하다
const p1 = personFactoryE("choi", 32)
const p2 = personFactoryD("choi1", 33);

클래스에서 사용

/*
클래스에서 사용 가능
*/
class Person<N, A> {
  name: N;
  age: A;
  constructor(name: N, age: A) {
    this.name = name;
    this.age = age;
  }
  method<B>(param: B) {}
}


const classP = new Person<string, number>("choi", 32);
classP.method<string>("1")

 

Promise 제네릭

interface Data<T>{
	resultCd: string,
	data:T
}

interface Response<T>{
	status: number,
	data:Data<T>
}

interface ResultData{
	list:string[]
}

function fn() {
	return new Promise<Response<ResultData>>((reolve) => reolve({
		// Response Interface (status:number,data:Data<T>) 
		status: 200,
		// Data Interface (resultCd:string,data:T) 
		data: {
			resultCd: '0000',
			// ResultData Interface (list:string[])
			data: {
				list:['1']
			}
		}
	}))
}

 

 

☕️ react + typescript에서 제네릭 사용 

Response<T>으로 선언함으로써,  T의 다양한 형태가 들어갈 수 있다.

그리고 현재는 T의 Data 인터페이스가 들어가도록 하였다.

아래와 같이 작성할 경우 다양한 형태에 값을 받을 수 있으므로, 확장성에 용이하다

// loginApi.ts


// Response 제네릭
interface Response<T> {
  status: number
  data: T
}

// 제네릭 타입에 쓰일 인터페이스
interface Data {
  resultCd: string
  resultMsg: string
}

// 로그인 요청 타입
interface LoginRequest {
  id: string
  pw: string
}

// Promise에서 return할때 Response형태로 리턴 되며, 그 중에 Response<T>의 T의 매핑되는것이 
// Data 인터페이스이다 
const loginApi = (param: LoginRequest): Promise<Response<Data>> => {
  const successMsg: Data = {
    resultCd: '0000',
    resultMsg: '로그인성공',
  }

  const failMsg: Data = {
    resultCd: '0001',
    resultMsg: '로그인실패',
  }

  return Promise.resolve({
    status: 200,
    data: param.id === 'chleorjs37@gmail.com' && param.pw === 'chleorjs12@' ? successMsg : failMsg,
  })
}

export { loginApi }

 

화면에서 loginApi호출을 통해 vscode에서 res의 타입을 미리 알 수 있다. Response<Data>으로 추론이 가능하며,

작업하는데 굉장히 유용하다

/* eslint-disable arrow-parens */
import * as styles from './login.module.css'
import Input from '../../components/common/Input/Input'
import Button from '../../components/common/Button/Button'
import { loginApi } from '../../service/api/loginApi'
import { useState } from 'react'
function Login() {
  const [userInfo, setUserInfo] = useState({
    id: '',
    pw: '',
  })

  function isValidation() {
    if (!userInfo.id || !userInfo.pw) return false

    return true
  }

  function idInputChangeEvent(text: string) {
    setUserInfo({
      ...userInfo,
      id: text,
    })
  }
  function pwInputChangeEvent(text: string) {
    setUserInfo({
      ...userInfo,
      pw: text,
    })
  }

  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    if (!isValidation()) {
      alert(`아이디 또는 비밀번호를 입력해주세요`)
      return
    }
    const param = {
      id: userInfo.id,
      pw: userInfo.pw,
    }
    // 로그인 Api의 res의 타입이 추론이 가능하다. Response<Data>이다
    loginApi(param).then((res) => {
      // Response의 타입이다. status:number, data:Data
      const { status, data } = res
      if (status === 200) {
	      // Data의 형태이다. resultCd,resultMsg
        const { resultCd, resultMsg } = data
        if (resultCd === '0000') {
          alert(resultMsg)
        } else {
          alert(resultMsg)
        }
      }
    })
  }

  return (
    <div className={styles.login_form_container}>
      <form className={styles.login_form} onSubmit={onSubmit}>
        <h1 className={styles.login_title}>{'로그인'}</h1>
        <div className={styles.form_group}>
          <label className={styles.form_label}>{'ID'}</label>
          <Input placeholder={'ID를 입력해주세요'} changeEvent={idInputChangeEvent} />
        </div>

        <div className={styles.form_group}>
          <label className={styles.form_label}>{'PW'}</label>
          <Input placeholder={'PW를 입력해주세요'} inputype={'password'} changeEvent={pwInputChangeEvent} />
        </div>

        <div className={styles.form_btngroup}>
          <Button buttontype={'submit'} buttonname={'로그인'} />
        </div>
      </form>
    </div>
  )
}

export default Login