React TypeScript中HTML表格td的align属性默认值类型报错问题

这个问题的核心是TypeScript对HTML原生元素的属性有严格的类型校验：你给TableColumnProps里的align定义了宽泛的string类型，但原生<td>标签的align属性只接受"left" | "center" | "right" | "justify" | "char"这几个特定值，所以当你把string类型的align传给<td>的align属性时，TypeScript就会抛出类型不兼容的错误。

下面给你两种可靠的解决方式：

方法1：直接定义精确的联合类型 #

把align的类型从string改成<td>允许的枚举值联合类型，这样既符合TypeScript的校验，也能保留默认值的功能：

import React, { ReactNode } from 'react'

export interface TableColumnProps {
  children: ReactNode,
  // 替换string为精确的联合类型
  align?: "left" | "center" | "right" | "justify" | "char",
  className?: string,
  width?: string,
  onClick: () => void,
}

const TableColumn = ({ 
  children, 
  align = 'left', // 现在默认值完全符合类型要求
  className, 
  onClick, 
  width 
}: TableColumnProps) => (
  <td className={className} align={align} width={width} onClick={onClick}>
    {children}
  </td>
)

export default TableColumn

方法2：复用React内置的HTML元素属性类型 #

如果你不想手动写联合类型，可以直接复用React提供的<td>元素的align属性类型，这样更规范也不容易出错：

import React, { ReactNode } from 'react'

// 提取<td>元素align属性的原生类型
type TableCellAlign = HTMLTableCellElement['align']

export interface TableColumnProps {
  children: ReactNode,
  align?: TableCellAlign,
  className?: string,
  width?: string,
  onClick: () => void,
}

const TableColumn = ({ 
  children, 
  align = 'left',
  className, 
  onClick, 
  width 
}: TableColumnProps) => (
  <td className={className} align={align} width={width} onClick={onClick}>
    {children}
  </td>
)

export default TableColumn

两种方法都能解决你的类型错误，推荐第二种，因为它直接复用了TypeScript内置的HTML元素类型定义，后续如果原生属性有变化，不需要手动修改类型。

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