React - TypeScript 인터페이스

폴더 : types

 

// 자바의 모델 클래스와 유사
// 인터페이스 역할 : 속성에 자료형을 미리 지정하는것.
// => 목적 : 각 속성에 자료형(type) 를 강제하는 것
export default interface IEmp {
    eno?: any | null,       
    ename: string,     
    job: string,       
    manager: number | string,
    hiredate: string,  
    salary: number | string,   
    commission: any | null,
    dno: number | string       
}

 

service 나 page 등 다양하게 쓰임

 

service 예제

import http from "../utils/http-common";
import IEmp from "../types/IEmp";
//  화살표함수 단축키 : nfn

/** TODO: 전체 조회 */
const findAll = () => {
  // 조회 요청 : axios.get("url")
  //  사용법 : http.get<리턴타입>(`/dept`)
  return http.get<Array<IEmp>>(`/emp`);
};

/** TODO: 상세 조회 (1건 조회) */
const findByEno = (eno: any) => {
  return http.get<IEmp>(`/emp/${eno}`);
};

/** 저장하기 */
const create = (data: IEmp) => {
  return http.post<IEmp>(`/emp`, data);
};

/** 수정하기 : 기본키 , 객체 */
const update = (eno: any, data: IEmp) => {
  return http.put<any>(`/emp/${eno}`, data);
};

/** 삭제하기 */
const remove = (eno: any) => {
  return http.delete<any>(`/emp/${eno}`);
};

/** 부서명 검색 함수 */
const findByEname = (ename: string) => {
  return http.get<Array<IEmp>>(`/emp?ename=${ename}`);
};

let EmpService = {
  findAll,
  findByEno,
  create,
  update,
  remove,
  findByEname,
};

export default EmpService;

 

page 예제

  const initialEmp: IEmp = {
    eno: null,
    ename: "",
    job: "",
    manager: "",
    hiredate: "",
    salary: "",
    commission: null,
    dno: "",
  };

  let [emp, setEmp] = useState<IEmp>(initialEmp);
  let [submitted, setSubmitted] = useState<boolean>(false);