最近开始使用 React 和 TypeScript 开发项目了，顺便整理一下 react-ts 项目的创建过程。
node/npm 这些基本的东西就不再赘述了，没有的自行安装一下。
下面正片开始：
全局安装 create-react-app
代码语言：javascript复制 npm install -g create-react-app
// 如果很久之前安装过，建议卸载重新安装 npm uninstall -g create-react-app创建项目
参考 官方文档
代码语言：javascript复制 npx create-react-app my-app --template typescript启动项目
代码语言：javascript复制 cd my-app //进入项目目录
npm run start目录调整
创建完成后项目目录是这样的，有点乱。
可以把无用的初始化文件删除。
安装 react-router
代码语言：javascript复制 yarn add react-router-dom
// OR npm install --save react-router-domTypeScript 支持：
代码语言：javascript复制 npm i --save-dev @types/react-router-dom运行时报错：
代码语言：javascript复制 Could not find a declaration file for module 'react'. 'D:/react/hao-w3h5-react/node_modules/react/index.js' implicitly has an 'any' type.
If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react' TS7016
> 1 | import React from 'react';
| ^
...原因及解决方法：
不知道咋回事，我安装的时 react-ts 模板，还有这个报错。
比较明显是没有 react 的定义文件，如果使用 TypeScript，除了源代码，还需要有 @types 文件 。
执行命令安装定义文件：
代码语言：javascript复制npm install @types/react --save创建路由和页面
创建一个页面
@/pages/home/index.tsx
import React from 'react'
function Home () {
return (
<div>
<h1>HomePage</h1>
<h2>www.w3h5.com</h2>
</div>
)
}
export default Home;可以以同样的方法再创建一个 detail 页面。
配置路由
@/routers/index.tsx
import { lazy } from 'react' // 路由懒加载
const Home = lazy(() => import ('../pages/home'))
const Detail = lazy(() => import ('../pages/detail'))
export type RouterType = {
path: string,
component: React.LazyExoticComponent<any>,
root: string[],
notExect?: boolean,
}[]
const Routers: RouterType = [{
path: '/home',
component: Home,
root: [],
},{
path: '/detail',
component: Detail,
root: [],
},]
export default Routers配置 App.tsx
@/routers/App.tsx
import React from 'react'
import { Redirect, Route, Switch, withRouter } from 'react-router-dom'
import Routers from './routers'
function App () {
return (
<Switch>
{
Routers.map(router => (
<Route
exact={!router.notExect}
key={router.path}
path={router.path}
component={router.component}
>
</Route>
))
}
{/* 设置默认路由 推荐方法一*/}
{/* 重定向*/}
<Redirect path="/" to="/home" />
</Switch>
)
}
export default withRouter(App)在 index.tsx 引用
@/routers/index.tsx
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
{/* 使用了路由懒加载，所以需要使用<Suspense>包起来 */}
<Suspense fallback={<div></div>}>
<Switch>
<Route path="/" render={routerProps => {
return <App {...routerProps}/>
}}/>
</Switch>
</Suspense>
</BrowserRouter>,
document.getElementById('root')
);运行验证
现在就可以访问 http://localhost:3000/home 查看效果了。
未经允许不得转载：w3h5 » 从零开始搭建一个React TypeScript项目
