typescript组件中的默认属性

 

我们经常会使用到默认参数，例如：

int sum(int a, int b = 1){
    return a+b;
}

而在前端的 js/ts 中组件也有 默认属性 的概念。 javascript 的默认属性比较容易实现，与 c++ 等类似。

// 以下js的默认属性实现代码参考react官网
import { getImageUrl } from './utils.js';

function Avatar({ person, size=50 }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi', 
          imageId: 'YfeOqp2'
        }}
      />
      <Avatar
        size={80}
        person={{
          name: 'Aklilu Lemma', 
          imageId: 'OKS67lh'
        }}
      />
      <Avatar
        person={{ 
          name: 'Lin Lanying',
          imageId: '1bX5QH6'
        }}
      />
    </div>
  );
}

但是由于 typescript 对类型的严格限制等原因， 网上有不少对其默认属性的实现，但是基本采用了 interface 实现，代码较为复杂。

Default Props in React/TypeScript 这篇文章对 typescript 中的默认属性的实现进行了十分详细的讨论。

这里我介绍一种默认属性的实现方法，较为简单，目前也未出现问题。

// 第一种方法
const Square = (props : {value ?: string}) => {
  return <button className="square">{props.value ? props.value : "No" }</button>
}

// 第二种方法
const Square = (props : {value ?: string}) => {
  const {value = "no"} = props
  return <button className="square">{value}</button>
}