关于前端:ts类型定义记录

<article class=“article fmt article-content”><h2>Record</h2><blockquote>Record用来定义对象的键和值的类型，也就是<code>key</code>和<code>value</code>。</blockquote><pre><code class=“ts”>// 上面用Record定义了一个对象，键string类型，值为any类型。type query = Record<string, any>;const params: query = { name: ‘Duo’, age: 10, desc: undefined, children: [], target: null,}</code></pre><h2>枚举</h2><pre><code>type Page = “home” | “about” | “contact”;// pageName为Page枚举类型，其值只能为home\about\contact三者其一。const pageName: Page = ‘home’;</code></pre><p>枚举也能够与<code>Record</code>组合应用</p><pre><code>type Page = “home” | “about” | “contact”;// 此时，pages的key只能为home\about\contact三者其一。const pages : Record<Page, string> = { home: ‘首页’,}</code></pre><h2>定义React组件</h2><h3>函数申明</h3><pre><code class=“tsx”>interface TitleProps { name: string;}function Title({ name }: TitleProps) { return ( <div className=“container”> {name} </div> );}</code></pre><h3>函数表达式</h3><pre><code class=“tsx”>import React from ‘react’;interface TitleProps { name: string;}const Title: React.FC<TitleProps> = ({ name }) => ( <div className=“container”> {name} </div>);</code></pre></article>