搭建typescript_《reactHook+Typescript 从入门到实践》年底让这篇文章带你飞

@本文章作者 Ruoduan.cn 转载请注明出处

• 缘起
  公司中台系统要新增公司项目 —— IM即时聊天 的后台管理，由本人全程负责，前端技术选型 想采用目前比较新比较hot的技术 —— reactHook + react-Router5 + Typescript + （mobx | useContext + useState）, 至于括号内的稍后解答，个人觉得可以一定程度上替代 mobx 和 redux 的状态管理
• 本文将会从 Typescript，React-Hook，reactHook.TSX（实践）这三个方面来叙述
  • Typescript
    • 项目搭建
    • 类型定义
    • 应用分析
    • ...
  • React-Hook ⭐️
    • useState
    • useEffect
    • useContext
    • ...

• • Hook 与 mobx redux 等，实现自己状态管理
  • React 全家桶的东西不详细讲解带过 ...

好了，下面让我们开始吧

---

Typescript

React-Typescript 项目搭建

nodejs环境需具备 Not 下载链接

我们采用脚手架create-react-app 直接搭建react-typescript项目环境

版本要求 nodejs 8+ ， Yarn 0.25+

npx create-react-app my-app --typescript

npm init react-app my-app --typescript

yarn create react-app my-app --typescript

Typescript 项目文件

• 这里讲解一下typescript的一些文件定义

./
/src
    ./react-app-env.d.ts // 全局声明文件

tsconfig.json // typescript 配置文件

tsconfig.json详解 这里例举 几个 ：

{
  "compilerOptions": {
      "experimentalDecorators": true,
    "target": "es5", //语言编译目标
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react" // 组件语法环境
  },
  "include": [ //编译目标目录
    "src",
  ]
}

• react-app-env.d.ts 是TypeScript声明文件 例如： 你引入了jQuery 在typescript中：

$('#dom');
// or
jQuery('#dom');

// ERROR: Cannot find name 'jQuery'. 报错了，因为ts编译器并不认识$() or jQuery

我们需要全局定义一下这个变量 用declare修饰符

declare var jQuery: (selector: string) =&