记 vscode 搭建 Typescript+React+Dva 开发环境

[ 作为2018年前端最应该学的技术], Typescript确实惹火, 这两天崩崩也是自学了一下 ts. 并且配置了一个简单的基于 Dva+React+Typescript+Tslint的环境, 由于其他的百度教程都是 17 年或者更早, 很多已经过时了, 所以想想还是分享经验给自学的friends!


第一步

安装 typescript(推荐使用全局安装)

npm install -g typescript

第二步

安装 dva-cli(使用全局安装)

npm install -g dva-cli

第三步

  • . 进入你自己的项目目录

    cd d:/code/4-Dva+React\1-dva+react_firstday


  • . 使用 dva-cli创建项目, 创建好的项目目录如下:

    dva new 01-dva-quickstart


  • . 安装 typescript所需的 react, react-dom包, 以及 ts-loadertslint

    npm install --save-dev @types/react @types/react-dom ts-loader ts-lint
  • . 配置 tsconfig.json( ts配置项 )

    在项目 根目录下新建 tsconfig.json(./tsconfig.json), 并写入下列必须代码:

    {
            "compilerOptions": {
                "strictNullChecks": true,
                "moduleResolution": "node",
                "allowSyntheticDefaultImports": true,
                "experimentalDecorators": true,
                "jsx": "preserve",
                "noUnusedParameters": true,
                "noUnusedLocals": true,
                "target": "es6",
                "lib": [
                    "dom", 
                    "es7"
                ]
            },
            "exclude": [
                "node_modules",
                "lib",
                "es"
            ]
        }
  • . 配置 tslint.json( tslint规范 )

    在项目 根目录 下新建 tslint.json( ./tslint.json), 写入下列必须代码: (ps:下面的 rules配置项, 可以自行添加)

{
        "extends": [
            "tslint:latest",
            "tslint-react"
        ],
        "linterOptions": {
            "exclude": [
                "node_modules/**/*.ts",
                "src/**/*.{ts,tsx}"
            ]
        },
        "rules": {
            "object-literal-sort-keys": false,
            "jsx-no-lambda": false,
            "eofline": false,
            "no-consecutive-blank-lines": false,
            "no-var-requires": false,
            "quotemark": false,
            "space-within-parents": false,
            "no-submodule-imports": false,
            "no-implicit-dependencies": false,
            "ordered-imports": [ false ],
            "jsx-boolean-value": false,
            "no-trailing-whitespace": false,
            "semicolon": false,
            "trailing-comma": false,
            "space-in-parents": false,
            "typedef-whitespace": [ false ],
            "whitespace": [ true ],
            "interface-over-type-literal": true,
            "no-duplicate-imports": false,
            "no-namespace": true,
            "no-internal-module": true
        }
    }
  • . 至此, ts的相关配置已经全部完成, 接着该测试一下啦?

第四步

1 . 删除 ./src目录下的所有文件, 不要删文件夹;


2 . 在 ./src/routes目录下新建 Home.tsx( ./src/routes/Home.tsx)(默认首页);

Ps: dvaroutes相当于 reduxcontainers(容器组件), 具体相关概念可以参考链接描述, Home.tsx 的代码如下:

import * as React from 'react';

    export interface IAppProps {
        name?: string;
    };

    const Home: React.SFC<IAppProps> = (props: IAppProps): JSX.Element => {
        return (
            <div>
                <h1>
                    Hello {props.name ? props.name : "崩崩呢"}
                </h1>
            </div>
        );
    };

    export default Home;

3 . 在 ./src/routes目录下新建 News.tsx( ./src/routes/News.tsx)(这是二级页面);

import * as React from 'react';

    export interface INewsProps {
        newslist?: Array<{title: string, content: 'string'}>;
    };

    const News: React.SFC<INewsProps> = ( props: INewsProps ): JSX.Element => {
        const newslist = props.newslist ? props.newslist : [
            {
                title: 'title1',
                content: 'content1',
            }
        ];

        return (
            <div>
                <nav>
                    <ol>
                        <li>{newslist[0].title}</li>
                        <li>{newslist[0].content}</li>
                        <li>over</li>
                    </ol>
                </nav>
            </div>
        );
    };

4 . 写好了我们的容器组件, 进入到 ./src, 在项目根目录下新建 router.tsx( ./src/router.tsx), 配置我们的路由!

import * as React from 'react';

    import { Router, Route, Switch } from 'dva/router';

    import Home from './routes/Home';        // 引入 首页 组件
    import News from './routes/News';        // 引入 二级 页面

    export default function RouterConfig ({ history }){        // 路由配置
        return (
            <Router history={history}>
                 <Switch>
                     <Route path="/" exact component={Home} />
                     <Route path="/news" component={News} />
                 </Switch>
            </Router>
        );
    }

5 . 最后一步, 去到 ./src/根目录, 新建 index.tsx(./src/index.tsx), 并写入如下代码!

import dva from 'dva';
    import createhistory from 'history/createBrowserHistory';

    const app = dva({
        history: createhistory(),
    });

    app.router( require('./router').default );

    app.start('#root');

Ps:由于 dva的默认路由是 Hash 路由, 崩崩有点强迫, 所以在 const app = dva({})中使用了 H5historyAPI, 比较好看;


6 . 在命令行执行 npm start, 代码没写错的话,应该就能看到这样的主页


7 . 继续在浏览器地址栏中输入 /news, 即可看到跳转到了 news页面


第五步 (大功告成)

总结: 崩崩只学了 2 天的 ts,所以就迫不及待的将其融入到了 redux+react的实践中, 期间踩了不少的坑, 发现 redux 其实对 ts的支持不是很友好, 所以果断地转向了更加轻 量的 dva, 而网上的对 dva+react+ts 的配置少之又少,而且是过时的东西, 所以分享给大家..., 另外代码没有过多的注释, dva文档链接描述已经讲得很详细了, 崩崩觉得没必要再说了!

要睡觉了, 就码这么多了, 永远热爱前端的崩崩!!

原文链接:segmentfault.com

上一篇:「英」在组件化浪潮中重新思考CSS
下一篇:小程序自定义switch组件

相关推荐

  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    2 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png(https://img.javascriptcn.com/5a33946ad8c0ea8ee7870f74f331d0c0 "clipboard.png") reacta...

    9 个月前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图(https://img.javascriptcn.com/734ce56fe3a37ab11e9744473f56bae1 "效果图") 前言 此 blogreactadmin 项目是基...

    2 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    10 个月前
  • 面试官:请你在React中引入Vue3的@vue/reactivity,实现响应式。

    前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,reacteasystate,在hooks诞生...

    4 个月前
  • 面试官我想做个Reacter(React路由)

    路由的基础用法回顾,源码study,文章首发于docs,求个star 依赖 路由依赖于 reactrouter ,但是一般 pc 路由使用 reactrouterdom ,它依赖于 reactrout...

    3 个月前
  • 面试中React与Vue的比对

    1.virtual dom 用JS模拟DOM结构,DOM变化的对比,放在JS层做,以提高重绘性能 DOM操作昂贵,JS运行效率高,要减少DOM操作 使用:snabbdom的使用 ...

    2 年前

官方社区

扫码加入 JavaScript 社区