typescript Необязательные свойства (поля) объекта. Описание типа (react props)

После имени свойства просто добавляем знак вопроса (если этого свойства может не быть):

type SortSignPropsTypes = {
  onUp?: Function,
  onDown?: Function,
};

Потом эти свойства можно получить разложение объекта:

export default function SortSign(props: SortSignPropsTypes) {
  
  const {onUp, onDown} = props;

typescript Type '{}' is missing the following properties from type Ошибка

Причина

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

Решение

Указывайте свойства, которых может не быть как необязательные.

vscode Горячие клавиши. Список: Автоформатирование, Переход, Возврат

  • Автоформатирование:
    • В windows: Shift + Alt + F
    • В linux: Ctrl + Shift + I
  • Переход к месту определения переменной/функции -- наиболее простой способ:
    • нажимаем на клавиатуре Ctrl
    • и, не отпуская Ctrl, кликаем левой кнопкой мыши по имени переменной/функции, к месту определения которой хотим перейти.
  • Возврат назад от определения переменной/функции -- по умолчанию это:

typescript object type Тип свойства, ключа объекта. Объект с любым числом свойств

Например так:

type RootActionTypesListType = {
    [key: string]: string | null,
}
let RootActionTypes: RootActionTypesListType = {
    SET_GOODS_LIST_DATA: null,
    RESET_GOODS_LIST: null
};

-- такое определение поможет, если имя ключа будет содержаться в переменной и обращение к элементу будет происходить в виде:

RootActionTypes[keyVlue]

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '...'. Ошибка

Получаем ошибку:

Element implicitly has an 'any' type because expression of type
 'string' can't be used to index type 'RootActionTypesListType'.
  No index signature with a parameter of type 'string' 
was found on type 'RootActionTypesListType'.  TS7053

    11 | 
    12 | for (const key of Object.keys(RootActionTypes)) {
  > 13 |     RootActionTypes[key] = 'ROOT_' + key;
       |     ^
    14 | }
    15 | RootActionTypes = Object.freeze(RootActionTypes);
    16 |

Для кода вида:

typescript Ключевое слово type. Где оно в документации

type служит для задания псевдонима для новых типов, при этом оно может использоваться и как замена для interface, например:

type GoodType = {
    id: number,
    name: string,
    price: string,
}

Официальная документация:

Typescript Property 'length' does not exist on type Ошибка для типа-массива

Это ошибка не должна возникать, если ваш тип описан как массив.

Убедитесь, что определение связано с массивом, например:

type GoodType = {
    id: number,
    name: string,
    price: string,
}

export  type GoodsListType =  Array<GoodType>; 

-- в данном случае GoodsListType это массив и свойство lenght для него задано.

typescript react Пример описания компонента и его пропсов

Простейший вариант:

import React from 'react'; // we need this to make JSX compile

// описание типа пропсов
type CardProps = {
  title: string,
  paragraph: string
}

// описание самого копонента
export const Card = ({ title, paragraph }: CardProps) => <aside>
  <h2>{ title }</h2>
  <p>
    { paragraph }
  </p>
</aside>

const el = <Card title="Welcome!" paragraph="To this example" />

Источник: https://fettblog.eu/typescript-react/com...

Parameter '...' implicitly has an 'any' type Ошибка

Parameter 'dispatch' implicitly has an 'any' type

Решение данной проблемы является получение описания типа для переменной и применение этого описания в вашем коде.

Импортирование типа

Например, для dispatch для кода:

export const loadGoods =  async (dispatch) => {
// ..............
}

Решением будет:

import { Dispatch } from 'redux';

export const loadGoods =  async (dispatch: Dispatch) => {
// ..............
}

[!] Typescript по-русски. Примеры

Что почитать

Смотрите ссылки на примеры ниже

Pages

Subscribe to fkn+antitotal RSS