Преобразование значений обнуляемых объектов в строки в Typescript - PullRequest
Новая
       12

Преобразование значений обнуляемых объектов в строки в Typescript

0 голосов
/ 27 ноября 2018

Немного застрял, пытаясь получить ответ от API GraphQL, набранный правильно, чтобы я мог использовать его с формами.

Причина, по которой я пытаюсь это сделать, заключается в том, что входные данные React ожидают, что значения будут строкамии не нуль.Поэтому мне нужно преобразовать мои пустые поля в пустые строки перед передачей их в JSX.

Это немного надуманный случай, но он должен дать суть.

Interface IApiResult {
    title: string;
    description: string | null;
}

// I would expect this to have the shape { title: string, description: string }
//
type NonNullApiResult<T> = {
    [P in keyof T]: string
}

// API result
const result: IApiResult = { title: 'SO TS question', description: null }

// Mapped API result where all values must be strings
const mappedResult: NonNullApiResult<IApiResult> = {
    title: '',
    description: ''
}

// HERE: How can these be merged so that `mappedResult` stays
// of type NonNullApiResult and the data looks like:
//
// mappedResult = { title: 'SO TS question', 'description': '' }

Я пробовал это .. 

// Loop through the result and convert null fields to empty strings
for (const key in result) {
    if (result.hasOwnProperty(key)) {

        // `value` is being given the type "any".
        // I would expect it to be "string | null"
        const value = result[key]

        // This passes. I'm guessing because `value` is "any"
        // However, it will still pass the null value into `mappedResult`
        // I would expect this to fail w/ "null not assignable to string"
        mappedResult[key] = value

        // This what I would expect to do
        // mappedResult[key] = value === null ? '' : value
    }
}

mappedResult все еще имеет тип NonNullApiResult<IApiResult>, но если я console.log(mappedResult), я получаю это вбраузер:

{description: null, title: 'SO TS question'}

Если я затем что-то сделаю в React, то это пройдет, потому что он думает, что description является строкой 

<input name="description" id="description" type="text" value={mappedResult.description} />

Но вконсоль Я получаю ожидаемую ошибку: 

Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

Любая помощь или предложения приветствуются!Это использует Typescript версии 3.1.6

1 Ответ

0 голосов
/ 27 ноября 2018

Попробуйте что-то вроде этого: 

function mapData(data){
  const mappedResult = {};
  for (const key in result) {
    if (result.hasOwnProperty(key)) {
      mappedResult[key] = result[key] || "";
    }
  }
  return mappedResult;
}

Он должен проверять каждый ключ в объекте, а если он ложный (null || undefined), присваивать ему пустую строку.

И еще уточнить - что такое i переменная?

...