TypeScript在React项目中的使用总结

法无边 發表於 2021-4-21 16:08:00

<h2 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em" data-tool="mdnice编辑器"><span class="content" style="display: inline-block; font-weight: bold; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px">序言</h2>
本文会侧重于TypeScript（以下简称TS）在项目中与React的结合使用情况，而非TS的基本概念。关于TS的类型查看可以使用在线TS工具👉TypeScript游乐场
<h2 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em" data-tool="mdnice编辑器"><span class="content" style="display: inline-block; font-weight: bold; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px">React元素相关</h2>
React元素相关的类型主要包括<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">ReactNode</code>、<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">ReactElement</code>、<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">JSX.Element</code>。
<ul style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc" data-tool="mdnice编辑器">
<li><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">ReactNode</code>。表示任意类型的React节点，这是个联合类型，包含情况众多；</li>
<li><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">ReactElement</code>/<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">JSX</code>。从使用表现上来看，可以认为这两者是一致的，属于<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">ReactNode</code>的子集，表示“原生的DOM组件”或“自定义组件的执行结果”。</li>
</ul>
使用示例如下：
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">const MyComp: React.FC<{ title: string; }> = ({title}) => <h2>{title}</h2>; // ReactNode const a: React.ReactNode =   null ||   undefined || <div>hello</div> || <MyComp title="world" /> ||   "abc" ||   123 ||   true; // ReactElement和JSX.Element const b: React.ReactElement = <div>hello world</div> || <MyComp title="good" />; const c: JSX.Element = <MyComp title="good" /> || <div>hello world</div>; </code></pre>
<h2 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em" data-tool="mdnice编辑器"><span class="content" style="display: inline-block; font-weight: bold; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px">原生DOM相关</h2>
原生的 DOM 相关的类型，主要有以下这么几个：<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">Element</code>、 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">HTMLElement</code>、<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">HTMLxxxElment</code>。
简单来说： <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">Element = HTMLElement + SVGElement</code>。
<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">SVGElement</code>一般开发比较少用到，而<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">HTMLElement</code>却非常常见，它的子类型包括<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">HTMLDivElement</code>、<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">HTMLInputElement</code>、<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">HTMLSpanElement</code>等等。
因此我们可以得知，其关系为：<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">Element</code> > <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">HTMLElement</code> > <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">HTMLxxxElement</code>，原则上是尽量写详细。
<h2 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em" data-tool="mdnice编辑器"><span class="content" style="display: inline-block; font-weight: bold; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px">React合成事件相关</h2>
在 React 中，原生事件被处理成了React 事件，其内部是通过事件委托来优化内存，减少DOM事件绑定的。言归正传，React 事件的通用格式为<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">Event</code>，常见的有<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">MouseEvent</code>、<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">ChangeEvent</code>、<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">TouchEvent</code>，是一个泛型类型，泛型变量为触发该事件的 DOM 元素类型。
示例如下：
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">// input输入框输入文字 const handleInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {   console.log(evt); }; // button按钮点击 const handleButtonClick = (evt: React.MouseEvent<HTMLButtonElement>) => {   console.log(evt); }; // 移动端触摸div const handleDivTouch = (evt: React.TouchEvent<HTMLDivElement>) => {   console.log(evt); }; </code></pre>
<h2 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em" data-tool="mdnice编辑器"><span class="content" style="display: inline-block; font-weight: bold; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px">与hooks的结合</h2>
在hooks中，并非全部钩子都与TS有强关联，比如<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">useEffect</code>就不依赖TS做类型定义，我们挑选比较常见的几个和TS强关联的钩子来看看。
<h3 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px" data-tool="mdnice编辑器">useState</h3>
<ol style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal" data-tool="mdnice编辑器">
<li>如果初始值能说明类型，就不用给 useState 指明泛型变量;</li>
</ol>
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">// ❌这样写是不必要的，因为初始值0已经能说明count类型 const  = useState<number>(0); // ✅这样写好点 const  = useState(0); </code></pre>
<ol style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal" start="2" data-tool="mdnice编辑器">
<li>如果初始值是 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">null</code> 或 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">undefined</code>，那就要通过泛型手动传入你期望的类型，并在访问属性的时候通过可选链来规避语法错误。</li>
</ol>
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">interface IUser {   name: string;   age: number; } const  = React.useState<IUser | null>(null); console.log(user?.name); </code></pre>
<h3 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px" data-tool="mdnice编辑器">useRef</h3>
这个 hook 比较特别，它通常有两种用途：
<ol style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal" data-tool="mdnice编辑器">
<li>用来连接 DOM，以获取到 DOM 元素；</li>
</ol>
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">// 连接DOM，初始值赋值为null，不能是undefined，如要指明泛型变量需要具体到HTMLxxxElement // 如果我们确定inputRef.current在调用时一定是有值的，可以使用非空断言，在null后添加! const inputRef = useRef<HTMLInputElement>(null!); const handleClick = () => {   inputRef.current.focus(); // 当然不用非空断言，用inputEl.current?.focus()可选链也是可以的 } return (   <input ref={inputRef} />   <button onClick={handleClick}>点击</button> ) </code></pre>
<ol style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal" start="2" data-tool="mdnice编辑器">
<li>用来存储变量，由于是存储在函数式组件的外部，比起 useState，它不会存在异步更新的问题，也不会存在由<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">capture-value</code>特性引发的过时变量的问题，但是要注意赋值后由于ref引用没变，不会引起重渲染。</li>
</ol>
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">// 通过初始值来自动指明泛型变量类型 const sum = useRef(0); // 通过.current直接赋值 sum.current = 3; // 不存在异步更新问题 console.log(sum.current); // 3 </code></pre>
<h3 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px" data-tool="mdnice编辑器">useSelector</h3>
useSelector用于获取store中的状态，其第一个固定参数为函数，函数的入参即为store，而store的类型<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">RootState</code>需要在store中提前定义好，一种常见的定义如下：
在store.ts中：
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">const store = createStore(rootReducer); export type RootState = ReturnType<typeof rootReducer>; </code></pre>
使用时：
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">const { var1, var2 } = useSelector((store: RootState) => store.xxx); </code></pre>
<h3 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px" data-tool="mdnice编辑器">自定义 hook</h3>
如果我们需要仿照 useState 的形式，返回一个数组出去，则需要在返回值的末尾使用<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">as const</code>，标记这个返回值是个常量，否则返回的值将被推断成联合类型。
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">const useInfo = () => {   const  = useState(0);   return  as const; // 类型为一个元组， }; </code></pre>
<h2 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em" data-tool="mdnice编辑器"><span class="content" style="display: inline-block; font-weight: bold; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px">redux相关</h2>
对于<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">action</code>的定义，我们可以使用官方暴露的<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">AnyAction</code>，放宽对于<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">action</code>内部键值对的限制，如下：
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">import { AnyAction } from "redux"; const DEF_STATE = {   count: 0,   type: 'integer' }; // 使用redux的AnyAction放宽限制 function countReducer(state = DEF_STATE, action: AnyAction) {   switch (action.type) {     case "INCREASE_COUNT":       return {         ...state,         count: state.count + 1,       };     case "DECREASE_COUNT":       return {         ...state,         count: state.count - 1,       };     default:       return state;   } } export default countReducer; </code></pre>
<h2 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em" data-tool="mdnice编辑器"><span class="content" style="display: inline-block; font-weight: bold; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px">规约</h2>
<ol style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal" data-tool="mdnice编辑器">
<li>子组件的入参命名为<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(239, 112, 96, 1)">[组件名]Props</code>，如：</li>
</ol>
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">// 比如当前组件名为InfoCard export interface InfoCardProps {   name: string;   age: number; } </code></pre>
<ol style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: decimal" start="2" data-tool="mdnice编辑器">
<li>interface接口类型以大写开头；</li>
<li>为后端接口的出入参书写interface，同时使用利于编辑器提示的jsdoc风格做注释，如：</li>
</ol>
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">export interface GetUserInfoReqParams {     /** 名字 */     name: string;     /** 年龄 */     age: number;     /** 性别 */     gender: string; } </code></pre>
<h2 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); border-bottom: 2px solid rgba(239, 112, 96, 1); font-size: 1.3em" data-tool="mdnice编辑器"><span class="content" style="display: inline-block; font-weight: bold; background: rgba(239, 112, 96, 1); color: rgba(255, 255, 255, 1); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px">其他</h2>
<h3 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px" data-tool="mdnice编辑器">键名或键值不确定如何处理？</h3>
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">// 表示键名不确定，键值限制为number类型 export interface NotSureAboutKey {   : number; } // 当键名键值都不确定时，以下接口对任何对象都是适用的 export interface AllNotSure {   : any; } </code></pre>
<h3 style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 20px" data-tool="mdnice编辑器">如何在接口中使用泛型变量？</h3>
所谓泛型，就是预定义类型。它的目的是：达到类型定义的局部灵活，提高复用性。我们通常会在接口中使用泛型，如：
<pre class="custom" data-tool="mdnice编辑器"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(51, 51, 51, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; background: rgba(248, 248, 248, 1); border-radius: 5px">// 通常，我们会为接口的泛型变量指定一个默认类型 interface IHuman<T = unknown> {   name: string;   age: number;   gender: T; } // 其他地方使用时 const youngMan: IHuman<string> = {     name: 'zhangsan',     age: 18,     gender: 'male' } </code></pre> 
来源：https://www.cnblogs.com/zhangnan35/p/14685651.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript在React项目中的使用总结