Как правильно поставить тип параметру?

Question

[tron21]

Всем доброго времени суток! Делаю универсальную функцию по изменению булева значения в объекте, который является частью массива.

export type TodoListArrayType = Array<{
    id: number,
    subtitle: string,
    important: boolean,
    done: boolean,
}>

const generalToggle = (arr: TodoListArrayType, id: number, propertyName: any) => {
        const idx = arr.findIndex((item) => item.id === id);
        const oldItem = arr[idx];
        const value = !oldItem.propertyName;

        const item = {...arr[idx], [propertyName]: value};
        return [
            ...arr.slice(0, idx),
            item,
            ...arr.slice(idx + 1)
        ];
    };

Возникает ошибка со значением propertyName.

TS2339: Property 'propertyName' does not exist on type '{ id: number; subtitle: string; important: boolean; done: boolean; }'.

я точно знаю что propertyName будет либо important либо done из типа TodoListArrayType . Но я никак не могу найти информации ( или правильно ее понять ) как передать эту информацию в коде. Подскажите, пожалуйста, как правильно передать тип для propertyName.

Answer 1

[Mikhail Osher]

interface TodoItem {
    id: number
    subtitle: string
    important: boolean
    done: boolean
}

const generalToggle = (arr: TodoItem[], id: number, propertyName: keyof TodoItem) => {
        const idx = arr.findIndex((item) => item.id === id);
        const oldItem = arr[idx];
        const value = !oldItem[propertyName];

        const item = {...arr[idx], [propertyName]: value};
        return [
            ...arr.slice(0, idx),
            item,
            ...arr.slice(idx + 1)
        ];
    };

А еще лучше, храните TODO объектом по ключам (для мутаций) и отдельно список IDs (для рендера списка), чтобы O(n) не гонять на каждое изменение.

Comments

[tron21]

Спасибо большое за решение.

Изучу тогда про мутации и попробую сделать в будущем как вы посоветовали. Только начал изучать TypeScript недавно. )

[WbICHA]

tron21, и тебе бы после файндИндекс сделать проверку, что элемент найден.

И вот это:

const item = {...arr[idx], [propertyName]: value};
        return [
            ...arr.slice(0, idx),
            item,
            ...arr.slice(idx + 1)
        ];

Заменить на:

const item = {...oldItem, [propertyName]: value};
        return [...arr].splice(idx, 1, item);

[tron21]

WbICHA, спасибо!

[WbICHA]

tron21, я допустил ошибку и никто меня не поправил... Сплайс возвращает массив удалённых элементов, поэтому надо писать так:

const result = [...arr];
result.splice(idx, 1, item);
return result;

[tron21]

WbICHA, получается тут - idx это место с которого начинает удалятся элемент массива, 1 - это количество элементов к удалению ( то есть только тот , который и нужно удалить ) , а item это тот что встанет вместо него. Верно?

[WbICHA]

tron21, да.
А что мешает прочитать документацию?

[tron21]

WbICHA, да , я прочитал. Просто решил уточнить правильно ли я все понял. Еще раз благодарю.

[Mikhail Osher]

tron21, если возникают такие вопросы, то:
- идете в консоль/плейграунд/итд
- заводите тестовые данные
- пишете немного кода, который не совсем поняли (тот же splice, например)
- смотрите что получается в итоге
- повторяете пункты до тех пор, пока не станет ясно

[tron21]

Mikhail Osher, спасибо большое за совет!

Answer 2

[Roman]

Все правильно ругается, потому что поля `propertyName` действительно нет в TodoListArrayType и у вас в коде ошибка

Обращаться нужно как `oldItem[proprtyName]`. Но не факт, что на это линтер не будет ругаться