Question

我已决定重构使用香草javascript制作的项目并使用typescript，我一直对如何在接口上将函数作为类型进行传递感到怀疑。

我看了打字稿文档，但我不明白它是如何工作的。

例如，bringTransactions应该具有哪种类型？以及handleChange func的返回类型？

import React from 'react';
import moment from 'moment';
import { Select } from 'antd';

interface Props {
  bringTransactions: any;
}

const PeriodPicker: React.FC<Props> = ({ bringTransactions }: Props) => {
  const periodOptions = [
    { value: 0, label: 'Hoje' },
    { value: 3, label: 'Últimos 3 dias' },
    { value: 7, label: 'Últimos 7 dias' },
    { value: 15, label: 'Últimos 15 dias' },
    { value: 30, label: 'Últimos 30 dias' },
    { value: 5, label: 'Data específica' },
  ];

  async function handleChange(value: number): Promise<void> {
    const filter = [];
    // setDataPickerStatus(false);

    if (value === 5) {
      // setDataPickerStatus(true);
    } else {
      const current = moment().format('YYYY-MM-DD HH:mm:ss');

      const subtracted = moment(current).subtract(value, 'days');

      const initialDate = moment(subtracted)
        .utc()
        .hours(0)
        .minutes(0)
        .seconds(0)
        .milliseconds(0);
      filter[0] = initialDate.format('YYYY-MM-DD HH:mm:ss');

      const finatlDate = moment(current)
        .utc()
        .subtract(1, 'days')
        .hours(23)
        .minutes(59)
        .seconds(59)
        .milliseconds(0);
      filter[1] = finatlDate.format('YYYY-MM-DD HH:mm:ss');

      if (value === 0) {
        const normalized = `&date=${filter[0]}`;

        bringTransactions(normalized);
      } else {
        const normalized = `&period=${JSON.stringify(filter)}`;

        bringTransactions(normalized);
      }
    }
  }

  return (
    <Select
      placeholder="Selecione um período"
      onChange={handleChange}
      style={{ width: 200 }}
    >
      {periodOptions.map(option => (
        <Select.Option value={option.value} key={option.value}>
          {option.label}
        </Select.Option>
      ))}
    </Select>
  );
};

export default PeriodPicker;

Answer 1

看起来bringTransactions是一个函数，它接受单个string参数，但不返回任何内容。那应该是：

interface Props {
  bringTransactions(value: string): void;
}

或者您可以使用箭头语法编写它

interface Props {
  bringTransactions: (value: string) => void;
}

详细了解typescript docs中的功能。

Answer 2

我通常会这样写函数类型：

interface Props {
   bringTransactions: (prop: propType) => ReturnType;
}

handleChange函数将返回void，因为事件回调通常返回void

与打字稿功能类型进行反应

2 个答案: