Почему объект выдает ошибку Type 'any' is not assignable to type 'never'. при попытке добавить значение свойству?

Question

[MishaXXL]

Есть типизация

interface Todo {
    id: number;
    name: string;
    text: string;
    complete: boolean;
}

type List = 'name' | 'text' | 'complete'

Но в data[input] = val, выдает ошибку Type 'any' is not assignable to type 'never'

let list: List[] = ['name', 'text', 'complete']

++id

const data: Todo = {
    id,
    name: '',
    text: '',
    complete: false
}

for(let input of list) {
    let val = formData[input].value
    if(input === 'complete') val === 'true' ? val = true : val = false
    data[input] = val
}

Из-за чего выдает эту ошибку и как правильно это затипизировать?

Comments

[Aetae]

Ну ts недостататочно умный в данном случае, чтобы понять, что для complete тут отдельная обработка.
Вот так вот, например, сработает(возможны и другие варианты):

if(input === 'complete') {
      val === 'true' ? val = true : val = false
      data[input] = val
    } else {
      data[input] = val
    }

А как у тебя не работает потому, что он не может понять какого именно типа data[input] - string или boolean(string & boolean = never), а присваивать never ничего нельзя, даже any.

[Rsa97]

Aetae,

- val === 'true' ? val = true : val = false
- data[input] = val
+ data[input] = val === 'true'

[MishaXXL]

Aetae, подскажи пожалуйста, как называется тема в TS про этот случай?

data[input] - string или boolean(string & boolean = never), а присваивать never ничего нельзя, даже any

Когда читал про never, думал он служит только для того, чтобы описать функцию, которая вернет ошибку throw new Error() и по этому она neverбудет
Здесь тоже получается never, но в описании про него не нашел или не заметил подобный случай его использования
И почему string | boolean это never?
Вроде есть четкий список типов на выбор и типизацию мы явно указали

[Alexandroppolus]

MishaXXL, типы - это множества допустимых значений. Тип never - пустое множество. В данном случае оно возникает как результат пересечения двух множеств, у которых нет общих элементов:
string & boolean == never

Объединение string | boolean, очевидно, не равно never.

TS по разному проверяет чтение и запись свойства.

let key: 'a' | 'b';

let obj: {
    a: T1;
    b: T2;
};

let v1 = obj[key]; // T1 | T2

obj[key] = v2;  // можно присвоить только T1 & T2

Здесь неизвестно, какая строка в переменной key - 'a' или 'b'. Соответственно, в v1 попадет либо Т1, либо Т2. С другой стороны, присвоить в obj[key] можно только такое значение, которое одновременно является и Т1, и Т2 - чтобы в любом из двух возможных ключей соответствовало типизации.

Иными словами, в чтении имеем "ковариантность", а в записи - "контравариантность".

Answer 1

[Alexandroppolus]

присвоение можно запихнуть в функцию-генерик, тогда не будет ругаться:

// ----- общий код с генериками ---------------
type Parsers<T extends object> = Omit<{
	[K in keyof T]: (str: string) => T[K];
}, 'id'>;

function setValue<T extends object>(obj: T, key: Exclude<keyof T, 'id'>, value: string, parsers: Parsers<T>): void {
	obj[key] = parsers[key](value); // магия
}

// ----- конкретный кейс ---------------------
interface Todo {
    id: number;
    name: string;
    text: string;
    complete: boolean;
    num: number;
}

type List = 'name' | 'text' | 'complete' | 'num';

let list: List[] = ['name', 'text', 'complete', 'num']

const parsers: Parsers<Todo> = {
    complete: s => s === 'true',
    name: s => s,
    text: s => s,
    num: s => +s
};

const data: Todo = {
    id: 1,
    name: '',
    text: '',
    complete: false,
    num: 0,
}

for(let input of list) {
    setValue(data, input, formData[input].value, parsers);
}

здесь конвертации из строки во что-нибудь вынесены в отдельный конфиг parsers. Функция setValue принимает его как параметр, и достает из него необходимый парсер по ключу. По каким именно причинам TS не ругается на строку внутри setValue, сказать трудно. Видимо, из-за неопределенности параметра Т, не к чему придраться )

Comments

[Alexandroppolus]

вообще, совсем недавно на Хабре был пост на похожую тему - https://habr.com/ru/articles/791822/

советую вдумчиво раскурить два самых последних комментария. Судя по всему, они о тех же "паранормальных явлениях" внутри генериков.

[WbICHA]

type Parsers = Omit<{
[K in keyof T]: (str: string) => T[K];
}, 'id'>;

Как-то омит тут лишним смотрится. Можно сократить.)

type Parsers<T extends object> = {
  [K in keyof T as K extends 'id' ? never : K]: (str: string) => T[K];
}
// or
type Parsers<T extends object> = {
  [K in Exclude<keyof T, 'id'>]: (str: string) => T[K];
};

[Alexandroppolus]

WbICHA, первый вариант не прокатил, TS не понимает прикол с never в ключах.

второй норм

[WbICHA]

Alexandroppolus,

первый вариант не прокатил, TS не понимает прикол с never в ключах.

Ээээ... Что?) Именно такую конструкцию он и понимает.
Эта же конструкция уже не первый год (вроде) как релизнута.

[Alexandroppolus]

WbICHA, ссылка

конструкция-то существует, но здесь TS не понимает, что ты с её помощью просто выкинул id, а не нахреновертил непонятно каких ключей.

а во втором варианте всё очевидно - вот key, который Exclude< keyof T, 'id' > , а вот parsers, у которого тоже ключи Exclude< keyof T, 'id' >

[WbICHA]

Alexandroppolus, ааа, я понял о чём ты. Действительно, тс ещё недостаточно хорошо с этой конструкцией работает.(
Я то на объекте проверил, а вот то, что он инфернуть тайп нормально не сможет, не подумал.

[MishaXXL]

Alexandroppolus, подскажи пожалуйста, если использовать такую конструкцию
Как можно добавить типизацию в const {name, surename} = formData?
Где после предполагается работа с
console.log(name.value, surename.value)

Property 'value' does not exist on type 'string'. Did you mean 'valueOf'?

Как я понял, мне нужно как-то TS привести к тому, что у меня там не строки, а HTMLInputElement или сделать предварительную проверку, но я пока не смог найти на что

const {name, surename}: {name: HTMLInputElement, surename: HTMLInputElement} = formData

Здесь он тоже ругается

Property 'surename' is missing in type 'HTMLFormElement' but required in type '{ name: HTMLInputElement; surename: HTMLInputElement; }'.

const form = useRef<HTMLFormElement | null>(null)

function handleSubmit(event: FormEvent) {
    event.preventDefault()
    const formData = form.current
    if(!formData) return
    const {name, surename} = formData
    console.log(name.value, surename.value)
}

return(
    <>
        <form ref={form} className={style.form} onSubmit={handleSubmit}>
            <input name="name" type="text" />
            <input name="surename" type="text" />
            <input type="submit" value="Add user" />
        </form>
    </>
)

Получилось только так
const {name, surename} = formData as any
Но есть подозрения, что это не хорошо )

Есть еще такая версия
На сколько это нормально использовать as unknown as Form?

interface Form {
    name: HTMLInputElement,
    surename: HTMLInputElement,
}

const {name, surename} = formData as unknown as Form

[Alexandroppolus]

MishaXXL, ты как-то странно работаешь с формой.

если делать как здесь, с неуправляемыми компонентами, то надо использовать браузерный объект FormData

https://learn.javascript.ru/formdata
https://developer.mozilla.org/en-US/docs/Web/API/F...

const data = new FormData(form.current);

так же есть чисто реактовские способы, через useState и управляемые компоненты
ну или можно применить какую-нибудь реактовскую библиотеку, например Formik или react-hook-form

[MishaXXL]

Alexandroppolus, formDataэто просто название, я не имел в виду объект FormData)

А как правильней работать?
У нас есть реф на форму
const form = useRef<HTMLFormElement | null>(null)

Есть сама форма

return(
    <>
        <form ref={form} className={style.form} onSubmit={handleSubmit}>
            <input name="name" type="text" />
            <input name="surename" type="text" />
            <input type="submit" value="Add user" />
        </form>
    </>
)

И в обработке формы хотим получить наши поля
const {name, surename} = formFields
Но без типизации он нам не позволяет их получить
И пришел к решению

const {name, surename} = formFields as unknown as Form

function handleSubmit(event: FormEvent) {
    event.preventDefault()
    const formFields = form.current
    if(!formData) return
    const {name, surename} = formFields 
    console.log(name.value, surename.value)
}

Подскажи, как правильней это сделать?

Потому что пока мое лучше решение в плане деструктуризации это привести все к такой форме через as unknown as Form

interface Form {
    name: HTMLInputElement,
    surename: HTMLInputElement,
}

const {name, surename} = formData as unknown as Form

Возможно как-то динамический получить имена всех полей из нашего рефа?
const form = useRef<HTMLFormElement | null>(null)

Что бы не описывать руками интерфейс

interface Form {
    name: HTMLInputElement,
    surename: HTMLInputElement,
}

[Alexandroppolus]

MishaXXL, ну я же тебе написал

const data = new FormData(form.current);

теперь ты можешь брать строки по имени, например data.get('surename')
см. методы FormData по ссылкам, которые приводил выше

а можешь прямо всю эту data отправить запросом через fetch

[MishaXXL]

Alexandroppolus, но вместо одной строчки
const {name, surename} = formFields
Получается n-количество строк же

const name = data.get('name')
const surename = data.get('surename')