doc: Update typescript.md

README.md

@@ -376,7 +376,7 @@ Quick Reference
 [winnerzr01.github.io](https://winnerzr01.github.io/Quick-Reference/index.html)<!--rehype:target=_blank&class=contributing&data-info=👆需要梯子-->
 [ref.isteed.cc](https://ref.isteed.cc/)<!--rehype:target=_blank-->
 [quickref.hestudio.xyz](https://quickref.hestudio.xyz)<!--rehype:target=_blank-->
-<!--rehype:class=home-card home-links&style=margin:2.2rem 0;display: flex;justify-content: center;gap: 1rem;flex-wrap: wrap;-->
+<!--rehype:class=home-card home-links-->
 
 如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 [gh-pages](https://github.com/jaywcjlove/reference/tree/gh-pages) 分支代码到你的静态服务就可以了，还可以使用 [docker](https://hub.docker.com/r/wcjiang/reference) 快捷部署 web 版。
 

docs/react.md

@@ -18,6 +18,7 @@ React 是一个用于构建用户界面的 JavaScript 库
 
 - [React 官方文档](https://reactjs.org/) _(reactjs.org)_
 - [Styled Components 备忘清单](./styled-components.md) _(jaywcjlove.github.io)_
+- [TypeScript JSX 备忘清单](./typescript.md#jsx) _(jaywcjlove.github.io)_
 
 ```js
 import {createRoot} from 'react-dom/client'

docs/typescript.md

@@ -1,6 +1,11 @@
 TypeScript 备忘清单
 ===
 
+[![NPM version](https://img.shields.io/npm/v/typescript.svg?style=flat)](https://www.npmjs.com/package/typescript)
+[![Downloads](https://img.shields.io/npm/dm/typescript.svg?style=flat)](https://www.npmjs.com/package/typescript)
+[![Repo Dependents](https://badgen.net/github/dependents-repo/Microsoft/TypeScript)](https://github.com/Microsoft/TypeScript/network/dependents)
+[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/Microsoft/TypeScript)
+
 包含最重要基础、泛型、方法、class 等 TypeScript 强类型编程语言语法的快速参考备忘单。初学者的完整快速参考。
 
 入门 Interface
@@ -1265,6 +1270,24 @@ class Select<T> extends React.Component<SelectProps<T>, any> {}
 const Form = () => <Select<string> items={['a', 'b']} />;
 ```
 
+### 函数组件 ref
+<!--rehype:wrap-class=col-span-3-->
+
+```tsx
+import { FC, ForwardedRef, forwardRef, PropsWithRef } from "react";
+
+function InternalProgress(props: ProgressProps, ref?: ForwardedRef<HTMLDivElement>) {
+  return (
+    <div {...props} ref={ref}>
+      {props.children}
+    </div>
+  )
+}
+
+export interface ProgressProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+export const Progress: FC<PropsWithRef<ProgressProps>> = forwardRef<HTMLDivElement>(InternalProgress)
+```
+
 各种各样的技巧
 ---
 
@@ -1331,16 +1354,21 @@ const point = [3, 4] as const
 
 ```ts
 type Colors = 'red' | 'green' | 'blue';
+type RGB = [
+  red: number,
+  green: number,
+  blue: number
+];
+type Palette = Record<Colors, string | RGB>
 
-type RGB = [red: number, green: number, blue: number];
+const palette: Palette = {
-
-const palette: Record<Colors, string | RGB> = {
   red: [255, 0, 0],
   green: '#00ff00',
   blue: [0, 0, 255],
 };
 
-// 通常的方式会推导出 redComponent 为 string | number | undefined
+// 通常的方式会推导出 redComponent 为
+// => string | number | undefined
 const redComponent = palette.red.at(0);
 ```