React Typescript 語法

1. Children
2. Events
3. Styles
4. Refs

Children

interface Props {
  children?: React.ReactNode
}

Events

interface Props {
  // 事件對象
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
}

props對象中用buttonProps對象作爲button的屬性

interface Props {
  buttonProps?: JSX.IntrinsicElements['button']
}

const Container = ({ buttonProps }: Props) => (
  <div>
    <button {...buttonProps}></button>
  </div>
)

整個props對象都作爲button的屬性

interface Props extends JSX.IntrinsicElements['button'] {}
const ExtendedButton = (props: Props) => (
  <button {...props} />
)

Styles

// utils.d.ts
declare interface StyleProps {
  style?: React.CSSProperties
  className?: string
}

// Button.tsx
interface ButtonProps extends StyleProps {
  label: string
}

const Button = ({ label, ...styleProps }: ButtonProps) => (
  <button {...styleProps}>{label}</button>
)

Refs

const liRef = useRef<HTMLLIElement>(null)
Other refs are possible too:
const valueRef = useRef<number>(0)

在Typescript使用函數組件

export interface Props {
  defaultCount: number
}
export default function MyCounter({ defaultCount = 0 }: Props): React.ReactElement {
  const [count, setCount] = React.useState<number>(defaultCount);

  const incrementCount = () => {
    setCount(count + 1);
  }
  return <button onClick={incrementCount}>Example - count: {count}</button>
}

函數組件是箭頭函數

const MyComponent: React.FC<Props> = ({ value }) => <div>Syntax</div>

在Typescript使用類組件

interface Props {
  value: number
}
interface State {
  text: string
}
class MyComponent extends React.Component<Props, State> {
  static defaultProps: Props = {
    value: 0
  }
  state: State = { text: 'Example' }

  render() {
    return <div>Syntax {this.props.value} {this.state.text}</div>
  }
}

爲了描述“children”，我更喜歡使用React.FC泛型類型。

interface AnotherSpecificProps {}
const AnotherComponent: React.FC<AnotherSpecificProps> = ({ children }) => {};

// even with omitted props it's still working
const Component: React.FC = ({ children }) => {};

有時我需要向嵌套組件傳遞額外的props，你也可以用部分<React.ComponentProps<typeof SomeComponent>>來包裝它。

ComponentProps {
  prop: boolean;
  propAnother: string;
}
const Component: React.FC<ComponentProps> = ({prop, propAnother}) => {
  return (
    <div>
      {prop && propAnother}
    </div>
  );
};

interface ComplexComponentProps {
  componentProps?: Partial<React.ComponentProps<typeof Component>>
}
const ComplexComponent: React.FC<ComplexComponentProps> = ({componentProps}) => {
  return (
    <div>
      <Component prop={true} propAnother="string" {...componentProps} />
    </div>
  );
};

// somewhere else
<ComplexComponent />
<ComplexComponent componentProps={{prop: false}} />
// without Partial you should pass all required props, so Partial is very useful

React.ComponentProps <typeof Component>看起來特別有用，可用於向下傳遞props而無需導入子組件的Props接口。

瞭解更多