如何将Angular中返回HTML的Reactive函数转换为合法TypeScript函数

首先需要为函数入参props定义明确的类型接口，约束传入的data结构和字段类型，同时可以补充边界情况处理避免运行时报错，最终转换后的代码如下：

import React from 'react';

// 定义Props类型约束
interface ProgressCellProps {
  data: {
    completedTasks: number;
    totalTasks: number;
  };
}

function ProgressCellRenderer(props: ProgressCellProps): JSX.Element {
  // 兼容总任务数为0的边界场景，避免出现NaN
  const progress = props.data.totalTasks === 0 
    ? 0 
    : props.data.completedTasks / props.data.totalTasks;

  return (
    <div>
      <div
        style={{
          position: "absolute",
          width: `${progress * 100}%`,
          height: "100%",
          backgroundColor: `rgba(130,210,73,${progress})`
        }}
      />
      <div style={{ position: "absolute" }}>{(progress * 100).toFixed(2)}%</div>
    </div>
  );
}

export default ProgressCellRenderer;

关键改动说明 #

• 新增ProgressCellProps接口约束入参结构，明确data下的completedTasks和totalTasks均为数字类型，避免类型不匹配引发的运行时错误
• 补充总任务数为0的边界判断，防止出现除以0得到NaN的异常情况
• 显式标注函数返回值为JSX.Element，符合React组件的TS语法规范
  如果你的项目使用React 17+且开启了自动JSX转换，可以省略顶部的import React from 'react'语句。

内容的提问来源于stack exchange，提问作者SamS87