React函数式组件中props标注:any的作用是什么？

问题核心解释 #

你看到的any是TypeScript的语法，和React本身的props传递逻辑没有关系：

• TypeScript是JavaScript的类型超集，要求所有参数、变量必须有明确的类型定义，否则会触发编译/编辑器报错。
• any是TS内置的通用类型，标注为any的变量/参数会被TS跳过类型校验，允许你对它做任意操作，不会有类型报错。
• 你之前接触的应该是纯JavaScript环境下的React开发，所以只需要写const SideBySide = (props) => {}就可以接收参数，不需要加任何类型注解；而在TS环境下如果不定义props类型又不想让编辑器报错，最简单的写法就是直接标注为any，相当于让TS完全不管这个参数的类型。

同理你代码里thumbnail: any的写法也是一样的作用，是为了跳过TS对遍历项的类型校验。

不推荐使用any的原因 #

any相当于完全关闭了TS的类型校验能力，你写错props属性名、访问不存在的属性、给属性赋值错误类型的值时，TS都不会给你任何提示，很容易埋下线上bug，属于TS开发中的下策。

更规范的写法 #

你可以给SideBySide组件的props单独定义类型，既满足TS的校验要求，又能享受到类型提示、错误校验的能力：

// 定义thumbnails数组项的类型
interface Thumbnail {
  src: string;
}

// 定义SideBySide组件的props类型
interface SideBySideProps {
  title: string;
  para1: string;
  para2: string;
  thumbnails: Thumbnail[];
}

// 替换原有any注解为定义好的类型
const SideBySide = (props: SideBySideProps) => {
  // 其余业务代码不变，此时thumbnail会自动推断为Thumbnail类型，不需要再标注any
  return (
    <div className="side-by-side">
      {/* 原有DOM结构不变 */}
      {props.thumbnails.map((thumbnail, index) => {
        return (
          <img
            src={thumbnail.src}
            alt=""
            key={index}
            className={`img-${index}`}
          />
        );
      })}
    </div>
  )
}

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