useTS开发组件

首先安装ts的react类型

PS G:\Study\Code\Web\NodeJS\learnFrontTest\React\react> yarn add react react-dom @types/react @types/react-dom --dev
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[4/4] Building fresh packages...
success Saved lockfile.
warning "react" is already in "dependencies". Please remove existing entry first before adding it to "devDependencies".
warning "react-dom" is already in "dependencies". Please remove existing entry first before adding it to "devDependencies".
success Saved 7 new dependencies.
info Direct dependencies
├─ @types/react-dom@17.0.5
├─ @types/react@17.0.6
├─ react-dom@17.0.2
└─ react@17.0.2
info All dependencies
├─ @types/prop-types@15.7.3
├─ @types/react-dom@17.0.5
├─ @types/react@17.0.6
├─ @types/scheduler@0.16.1
├─ csstype@3.0.8
├─ react-dom@17.0.2
└─ react@17.0.2
Done in 10.51s.

然后安装ts

yarn add typescript --dev

新建tsconfig.json并写入以下内容

{
  "compilerOptions": {
    "baseUrl": "./",
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "declarationDir": "lib",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  },
  "include": ["components", "global.d.ts"],
  "exclude": ["node_modules"]
}

优化代码展示

编写 <HappyBox />组件

安装依赖：

yarn add react-use react-tooltip react-feather react-simple-code-editor prismjs react-copy-to-clipboard raw-loader styled-components --dev

• react-use (opens new window) - 2020 年了，当然要用hooks
• react-simple-code-editor (opens new window) - 代码展示区域
• prismjs (opens new window) - 代码高亮
• raw-loader (opens new window) - 将源码转成字符串
• react-copy-to-clipboard (opens new window) - 让用户爸爸们能够 copy demo 代码
• react-tooltip/react-feather 辅助组件
• styled-components 方便在文档示例中让用户看到样式，也用作文档组件的样式处理

这些依赖都是服务于文档站点应用，和组件库自身毫无关联。