본문 바로가기

Web/Javascript|TypeScript

[typescript] interface 키값이라고 하기

반응형
export interface IAccountTableHead {
  id: string | number;
  name: string;
  code_role: string;
  username: string;
  code_grade: string;
  button_farm_manage: {text: string, fn: ({...args}:{[key:string]: any}) => JSX.Element};
  FarmMonitoring: string;
}


const TableHead: IAccountTableHead = {
id: "ID",
code_role: "구분",
username: "아이디",
name: "이름",
code_grade: "등급",
button_farm_manage: {text: "시설관리", fn : function ({...args}) { return <Link to={`/facility/${args.id}`}>시설관리</Link> }},
FarmMonitoring: "모니터링"
}
  

const tableCell = Object.keys(TableHead);
    const columnData = tableCell.map((keyD, i) => {
      if (keyD === 'FarmMonitoring') {
        return <td key={i}><a href={`http://test.com/${key["username"]}`}>이동</a></td>
      } else if(keyD.substr(0, 4) === 'code') {
        return <td key={i}>{key[keyD].code_name}</td>
      } else if(keyD.substr(0, 6) === 'button') {
        const {fn} = TableHead[keyD as keyof IAccountTableHead] as {text: string, fn: ({...args}:{[key:string]: any}) => JSX.Element};
        return <td key={i}>{fn(key)}</td>
      } else {
        return <td key={i}>{key[keyD]}</td>
      }
    });
반응형