React + TypeScript 实现泛型组件

大手空调配件 發表於 2019-9-29 10:16:00

<table class="d-block">
<tbody class="d-block">
<tr class="d-block">
<td class="d-block comment-body markdown-bodyjs-comment-body">
<h2>泛型类型</h2>
TypeScript 中，类型（interface, type）是可以声明成泛型的，这很常见。
<div class="highlight highlight-source-ts"><pre>interface Props<T> {
content: T;
}</pre></div>
这表明 <code>Props</code> 接口定义了这么一种类型：
<ul>
<li>它是包含一个 <code>content</code> 字段的对象</li>
<li>该 <code>content</code> 字段的类型由使用时的泛型 <code>T</code> 决定</li>
</ul>
<div class="highlight highlight-source-ts"><pre>type StringProps = Props<string>;
let props: StringProps;
props = { 
// 🚨 Type 'number' is not assignable to type 'string'.ts(2322) 
content: 42 
};
props = { 
// ✅ 
content: "hello" 
};</pre></div>
或者，TypeScript 能够跟使用时候提供的值自动推断出类型 <code>T</code>，无需显式指定：
<div class="highlight highlight-source-ts"><pre>interface Props<T> {
content: T;
}
function Foo<T>(props: Props<T>) { 
console.log(props); 
}
/** 此时 Foo 的完整签名为： function Foo<number>(props: Props<number>): void */ 
Foo({ content: 42 });
/** 此时 Foo 的完整签名为： function Foo<string>(props: Props<string>): void */ 
Foo({ content: "hello" });</pre></div>
上面因为 <code>Foo</code> 函数接收 <code>Props<T></code> 作为入参，意味着我们在调用 <code>Foo</code> 的时候需要传递类型 <code>T</code> 以确定 <code>Props<T></code>，所以 <code>Foo</code> 函数也变成了泛型。
当调用 <code>Foo({ content: 42 })</code> 的时候，TypeScript 自动解析出 <code>T</code> 为 <code>number</code>，此时对应的函数签名为：
<div class="highlight highlight-source-ts"><pre>function Foo<number>(props: Props<number>): void;</pre></div>
而我们并没有显式地指定其中的类型 <code>T</code>，像这样 <code>Foo<number>({ content: 42 });</code>。
<h2>泛型组件</h2>
将上面的 <code>Foo</code> 函数返回 JSX 元素，就成了一个 React 组件。因为它是泛型函数，它所形成的组件也就成了 泛型组件/Generic Components。
<div class="highlight highlight-source-tsx"><pre>function Foo<T>(props: Props<T>) {
return <div> {props.content}</div>;
}
const App = () => { 
return ( 
<div className="App"> 
<Foo content={42}></Foo> 
<Foo<string> content={"hello"}></Foo> 
</div> 
); 
};</pre></div>
一如上面的讨论，因为 TypeScript 可根据传入的实际值解析泛型类型，所以 <code><Foo<string> content={"hello"}></Foo></code> 中 <code>string</code> 是可选的，这里只为展示，让你看到其实 React 组件还可以这么玩。
为了进一步理解泛型组件，再看下非泛型情况下上面的组件是长怎样的。
<div class="highlight highlight-source-tsx"><pre>interface Props {
content: string;
}
function Foo(props: Props) { 
return <div>{props.content}</div>; 
}
const App = () => { 
return ( 
<div className="App"> 
{/ 🚨 Type 'number' is not assignable to type 'string'.ts(2322) /} 
<Foo content={42}></Foo> 
<Foo content={"hello"}></Foo> 
</div> 
); 
};</pre></div>
以上，便是一个 React 组件常规的写法。它定义的入参 <code>Props</code> 只接收 <code>string</code> 类型。由此也看出泛型的优势，即大部分代码可复用的情况下，将参数变成泛型后，不同类型的入参可复用同一组件，不用为新类型新写一个组件。
除了函数组件，对于类类型的组件来说，也是一样可泛型化的。
<div class="highlight highlight-source-tsx"><pre>interface Props<T> {
content: T;
}
class Bar<T> extends React.Component<Props<T>> { 
render() { 
return <div>{this.props.content}</div>; 
} 
}
const App = () => { 
return ( 
<div className="App"> 
<Bar content={42}></Bar> 
<Bar<string> content={"hello"}></Bar> 
</div> 
); 
};</pre></div>
<h2>一个更加真实的示例</h2>
一个更加实用的示例是列表组件。列表中的分页加载，滚动刷新逻辑等，对于所有列表数据都是通用的，将这个列表组件书写成泛型便可和任意类型列表数据结合，而无须通过其他方式来达到复用的目的，将列表元素声明成 <code>any</code> 或 <code>Record<string,any></code> 等类型。
先看不使用泛型情况下，如何实现这么一个列表组件。此处只看列表元素的展示以阐述泛型的作用，其他逻辑比如数据加载等先忽略。
列表组件 List.tsx
<div class="highlight highlight-source-tsx"><pre>interface Item {
[prop: string]: any;
}
interface Props { 
list: Item[]; 
children: (item: Item, index: number) => React.ReactNode; 
}
function List({ list, children }: Props) { 
// 列表中其他逻辑... 
return <div>{list.map(children)}</div>; 
}</pre></div>
上面，为了尽可能满足大部分数据类型，将列表的元素类型定义成了 <code>: any;</code> 的形式，其实和 <code>Record<string,any></code> 没差。在这里已经可以看到类型的丢失了，因为出现了 <code>any</code>，而我们使用 TypeScript 的首要准则是尽量避免 <code>any</code>。
然后是使用上面所定义的列表组件：
<div class="highlight highlight-source-tsx"><pre>interface User {
id: number;
name: string;
}
const data: User[] = [
{
id: 1,
name: "wayou"
},
{
id: 1,
name: "niuwayong"
}
];
const App = () => { 
return ( 
<div className="App"> 
<List list={data}> 
{item => { 
// 😭 此处 <code>item.name</code> 类型为 <code>any</code> 
return <div key={item.name}>{item.name}</div>; 
}} 
</List> 
</div> 
); 
};</pre></div>
这里使用时，<code>item.name</code> 的类型已经成了 <code>any</code>。对于简单数据来说，还可以接收这样类型的丢失，但对于复杂类型，类型的丢失就完全享受不到 TypeScript 所带来的类型便利了。
上面的实现还有个问题是它规定了列表元素必需是对象，理所应当地就不能处理元始类型数组了，比如无法渲染 <code>['wayou','niuwayong']</code> 这样的输入。
下面使用泛型改造上面的列表组件，让它支持外部传入类型。
<div class="highlight highlight-source-tsx"><pre>interface Props<T> {
list: T[];
children: (item: T, index: number) => React.ReactNode;
}
function List<T>({ list, children }: Props<T>) { 
// 列表中其他逻辑... 
return <div>{list.map(children)}</div>; 
}</pre></div>
改造后，列表元素的类型完全由使用的地方决定，作为列表组件，内部它无须关心，同时对于外部传递的 <code>children</code> 回调中 <code>item</code> 入参，类型也没有丢失。
使用改造后的泛型列表：
<div class="highlight highlight-source-tsx"><pre>interface User {
id: number;
name: string;
}
const data: User[] = [
{
id: 1,
name: "wayou"
},
{
id: 1,
name: "niuwayong"
}
];
const App = () => { 
return ( 
<div className="App"> 
<List list={data}> 
{item => { 
// 😁 此处 <code>item</code> 类型为 <code>User</code> 
return <div key={item.name}>{item.name}</div>; 
}} 
</List> 
<List list={["wayou", "niuwayong"]}> 
{item => { 
// 😁 此处 <code>item</code> 类型为 <code>string</code> 
return <div key={item}>{item}</div>; 
}} 
</List> 
</div> 
); 
};</pre></div></td>
</tr>
</tbody>
</table>

</div>
<div id="MySignature" role="contentinfo">
<div>
<img src="https://licensebuttons.net/l/by-nc-sa/3.0/88x31.png" style="vertical-align: middle">
CC BY-NC-SA 署名-非商业性使用-相同方式共享
</div> 
来源：https://www.cnblogs.com/Wayou/p/react_typescript_generic_components.html

頁: [1]

琼殿技术论坛's Archiver

React + TypeScript 实现泛型组件