타입스크립트 질문

Question

import { h, VNode } from 'vue' import { useStore } from 'vuex' import { ModalModuleState } from '../stores/vuex/modules/modal.ts' export type TableHeaders = Record export interface TableHeaderAttributes { label: string hidden: boolean } export type TableData = { [K in keyof T]: string } export type TableCellCallback = { [K in keyof T]?: (rowData: TableData, cell: TableCellAttributes) => void } export interface TableCellAttributes { value: string | number name: keyof T } export type TableRowCallback = (rowData: TableData) => void export interface TableOptions { onCellClick?: TableCellCallback onCellRightClick?: TableCellCallback onRowClick?: TableRowCallback onRowRightClick?: TableRowCallback additionalPayload?: Partial } const useTable = () => { const store = useStore() return (tableHeaders: T, data: TableData[], options?: TableOptions) => { const { onCellClick, onRowClick, onCellRightClick, onRowRightClick, additionalPayload } = options ?? {} store.commit('setModal', { isOpen: true, ...additionalPayload, content: h('table', { class: 'min-w-full border-collapse border border-gray-200' }, [ // 테이블 헤더 h('thead', {}, [ h('tr', { class: 'bg-gray-200' }, Object.values(tableHeaders).reduce((acc, header) => { if (typeof header === 'string') { acc.push(h('th', { class: 'px-4 py-2 border border-gray-300 text-left text-gray-600 font-medium' }, header)) } else { if (header.hidden) { return acc // hidden만 주려다가 그냥 패스 } acc.push(h('th', { class: 'px-4 py-2 border border-gray-300 text-left text-gray-600 font-medium' }, header.label)) } return acc }, [] as VNode[]) ) ]), // 테이블 바디 h('tbody', {}, data.map((row: TableData, index: number) => h('tr', { class: (index % 2 === 0 ? 'bg-white' : 'bg-gray-50') + (onRowClick && ' hover:font-bold cursor-pointer'), onClick: () => onRowClick?.(row), onContextmenu: (e) => { e.preventDefault() onRowRightClick?.(row) } }, Object.keys(tableHeaders).reduce((acc, key) => { if (typeof tableHeaders[key] === 'string') { acc.push(h('td', { class: 'px-4 py-2 border border-gray-300 text-gray-700' + (onCellClick?.[key] && ' hover:font-bold cursor-pointer'), onClick: (e) => { if (onCellClick?.[key]) { // cell click 이벤트있다면 row click 이벤트 실행시키지 않음 e.stopPropagation() } onCellClick?.[key]?.(row, { value: row[key], name: key }) }, onContextmenu: (e) => { e.preventDefault() onCellRightClick?.[key]?.(row, { value: row[key], name: key }) } }, row[key])) } return acc } , [] as VNode[])) )) ]) }) } } export default useTable 위 useTable을 import해서 사용하려고 할때 아래 주석과 같은 문제가 발생합니다... 어디를 고쳐야할까요?const lateEmployeeTableHeader: TableHeaders = { date: '날짜', lateEmployeeName: '이름', lateCount: '지각 횟수' } const table = useTable() const setCommuteTable = () => { table(lateEmployeeTableHeader, commuteData, { onCellClick: { // 이곳에 lateEmployeeTableHeader의 key인 date, lateEmployeeName, lateCount가 자동완성으로 떠야하는데 뜨질 않습니다 } }) }

Clickin · Answer

const setCommuteTable 에 타입이 지정되어있지 않으니까요타입스크립트가 아무 함수나 대충 형태만 맞으면 타입을 갖다붙여주진 않습니다. 잘못된 타입을 추론할 가능성이 매우 높거든요useTable 자체가 함수 타입으로 export되어있으니 const setCommuteTable : useTable 과 같은 형식으로 타입을 지정해보시면 되겠습니다.

타입스크립트 질문

1개의 답변

Q&A 목록