如何將 typescript 應用於樣式化組件，以便我可以看到組件上的推薦道具？

Question

你好開發人員。 我正在嘗試適應打字稿。

當我習慣了 typescript 時，在樣式化的組件上看不到推薦的道具有點不方便。

例如，

import {TitleInput} from 'react-native';
import styled from 'styled-components';

const MyStyledInput = styled(TextInput)``;

...

const ExComponent = () => {
  return (
    <TextInput/> // This shows prop recommendations. (ex) onChange, onChangeText, etc)
    <MyStyledInput/> // This doesn't. (no recommendations are shown.)
  )
}

我想我可以使用React.Element<???>來提供類型，就像這樣：

const MyStyledInput: React.Element<???> = styled(TextInput)``;

但我不確定

1. 如果這種方法可行，並且，
2. 如果這可行，那么我應該在<???>中提供什么類型。

如何為樣式化組件提供類型，以便獲得道具推薦？

---

到目前為止嘗試了這些方法

1. 在回調結束時提供類型

import {TextInput, TextInputProps, TextInputComponent, } from 'react-native';
const MyStyledInput = styled(TextInput)<TextInput>``; // Not working
const MyStyledInput = styled(TextInput)<TextInputProps>``; // Not working
const MyStyledInput = styled(TextInput)<TextInputComponent>``; // Not working

---

我發現了什么

1. TextInputProps是我正在尋求實現的目標類型，它具有react-native 官方網站上列出的道具

Answer 1

解決方案React.FC 是功能組件的一種類型。 我們可以像這樣為 React.FC 提供 prop 類型：React.FC

const MyStyledTextInput: React.FC<TextInputProps> = styled(TextInput)``;
// Now you can see recommendations for TextInputProps.