변수 값 대신 변수 이름을 개체 속성의 키로 사용하는 이유는 무엇입니까?

Question

<p><code>type TableId = string;</code>인 <code>Record<TableId, TableState></code> 개체를 사용하려고 합니다. 그러나 <code>setTableStateMap(map)</code>을 통해 키/값 쌍을 설정한 후 레코드 개체의 내용을 인쇄하면... 내가 얻는 것은 개체 <code>{id: {… }} 'id' 변수에 전달한 값 대신 </code> </p> <pre class="brush:php;toolbar:false;">// App.tsx---------------------------- -- ---------- React.useEffect(() => { setCallback((id: TableId, tableState: TableState) => { const 맵: 레코드 = { id: tableState }; setTableStateMap(map); }); // 테이블 구성요소 --------------------- TableId 유형 = 문자열; 유형 콜백 = (id: TableId, state: TableState) => 콜백하자: 콜백; 내보내기 함수 setCallback(callbackInput: Callback) { 콜백 = 콜백입력; } let stateMap: Record<TableId, TableState> 내보내기 함수 setTableStateMap(map: Record<TableId, TableState>) { 상태맵 = 지도; } 인터페이스 TableProps { id?: TableId; } const 테이블 내보내기: React.FC<TableProps> ID, }) => tableState: TableState 정의되지 않음; 만약 (ID) { tableState = 상태맵[id]; // stateMap의 키는 변수 id의 값이 아닌 'id'로 설정됩니다. // {ID: {…}} } 또 다른 { tableState = 정의되지 않음; } };</pre> <p><br /></p>

Answer 1

{ id: tableState }와 같은 중괄호를 사용하여 객체를 생성하면 문자열 "id"가 id 변수의 동적 값 대신 정적 키로 해석됩니다. JavaScript/TypeScript에서는 계산된 속성 이름을 사용해야 합니다. 계산된 속성 이름을 사용하면 객체를 생성할 때 동적 값을 키로 사용할 수 있습니다.

으아악