2019有太多的东西想尝试,ts,GraphQL,SSR,docker,python,electron,小程序云后台,vue3等等,一个个来吧,用两天了解了下typescript,大概做了个webpack-ts-react-dva的脚手架出来,因为接触TS的时间才几天,所以有些地方的代码自己都觉得写的很丑,老司机请多指教

  • 是在半年前 webpack4构建react脚手架 基础上修改的,这样自己熟悉一点
  • 基于:ts3.2+react16.7全家桶+dva2.4+webpack4+antd3.13+immutable+fetch+scss
  • 源码

过程

  • 增加一个ts的配置文件tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"lib": [
"es2015",
"es2016"
]
},
"include": [ //包含的编译目录
"./src/**/*"
],
"exclude": [ //排出不编译的目录
"node_modules",
"**/*.spec.ts"
]
}
  • 修改webpack.config.base.js,增加ts的识别,修改scss中的css-load为typings-for-css-modules-loader
{
test: /\.ts$/,
loader: 'ts-loader'
},
{
test: /\.tsx$/,
loader: 'ts-loader'
}, ... {
loader: 'typings-for-css-modules-loader',
options: {
modules: true,
namedExport: true,
camelCase: true,
minimize: true,
localIdentName: "[path][name]__[local]--[hash:base64:5]"
}
},
  • 修改原来的js文件为ts,包含JSX的js文件变成tsx,对于使用dva来说就是以前的model都变成了ts,routers里面的都变成了tsx.
  • 引入写法变化:之前类似import React from 'react', import styles from './company.scss'变成了import * as React from "react", import * as styles from './Main.scss'
  • 其他的见 源码
  • 因为接触TS的时间才几天,所以有些地方的代码自己都觉得写的很丑,老司机请多指教

TS的优势

最直观的感受就是配合vscode写ts代码非常爽,智能提示太到位了。然后就是TypeScript解决JavaScript的“痛点”:弱类型。弱类型的好处是十分灵活,可以写出非常简洁的代码。但是,对于大型项目来说,强类型更有利,可以降低系统的复杂度,在编译时就发现类型错误,减轻程序员的负担。

参考

最后

大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……

个人博客:www.yangyuetao.cn

小程序:TaoLand

typescript-dva脚手架的更多相关文章

  1. taro.js & dva 脚手架搭建及常见问题

    ## taro.js & dva 脚手架 ### 启动 npm install -g @tarojs/cli // 全局安装taro-cli npm i npm run dev:weapp / ...

  2. 【React】启动dva脚手架

    开始前: 确保node版本为6.5以上. // 安装脚手架 npm i dva-cli -g // 自动安装新工程 dva new newProjectName // 导入antd包 npm i an ...

  3. dva脚手架 dva-cli 配置roadhogrc,antd-mobile样式按需加载 不生效的问题

    1.新安装dva-cli脚手架版本0.9.2,dva版本是2.4.1,roadhogrc版本是2.4.9 roadhogrc2 与1 的区别把roadhogrc 改成了webpackrc 所以配置an ...

  4. 使用dva脚手架(dva-cli)快速构建React项目

    安装 dva-cli 你应该会更希望关注逻辑本身,而不是手动敲入一行行代码来构建初始的项目结构,以及配置开发环境. 那么,首先需要安装的是 dva-cli .dva-cli 是 dva 的命令行工具, ...

  5. react的dva框架初试

    使用背景:迫不得已!!(自己入职是以vue技术入职的,说是马上vue项目就来了,让我负责这个项目的前端.但是入职后就让我下了现在这个项目看下,然后就顺理成章的帮忙进行开发了,其实自己一直想要做reac ...

  6. dva使用及项目搭建

    一.简介 本文将简单分析dva脚手架的使用及项目搭建过程. 首先,dva是一个基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva还额外内置了react-router和fet ...

  7. 在React旧项目中安装并使用TypeScript的实践

    前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...

  8. 解决基于TypeScript 的 RN项目相对路径引入组件的问题

    一.前言 在开发RN项目时,经常会要使用这样的方式(../../../)来引入组件,感觉非常繁琐,如果项目结构层级比较多,引入的头部更加分不清. 那有没有一种方案和vue项目一样,经过配置后简写路径, ...

  9. React+DvaJS 之 hook 路由权限控制

    博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...

  10. 从0到1发布一个Vue Collapse组件

    需求背景 最近在项目中遇到了一个类似Collapse的交互需求,因此到github上找了一圈关于Vue Collapse的相关轮子,但是多少都有些问题.有的是实现问题,例如vue2-collapse, ...

随机推荐

  1. visual Studio里面的代码前面多出好多小点应该怎么设置

    如果是vs中前面绿色的点的话你试试 ctrl + R 然后 ctrl + W 试试看能不能去掉

  2. Entity Framework之犹豫不决

    记得去年初就开始关注Entity Framework,那时只是简单测试了一下,发现较之Nhibernate不太成熟.当时的EF主要表驱动方式开发,过度依赖edm文件,并且数据层耦合了模型层,让一些MV ...

  3. C++ primer 第四版 练习3.13,3.14

    读一组整数到 vector 对象,计算并输出每对相邻元素的 和.如果读入元素个数为奇数,则提示用户后一个元素 没有求和,并输出其值. vector<int> ivec; int ival; ...

  4. Linux:SSH服务配置文件详解

    SSH服务配置文件详解 SSH客户端配置文件 /etc/ssh/ssh——config 配置文件概要 Host * #选项“Host”只对能够匹配后面字串的计算机有效.“*”表示所有的计算机. For ...

  5. 接下来将介绍C#如何设置子窗体在主窗体中居中显示,本文提供详细的操作步骤,需要的朋友可以参考下

    接下来将介绍C#如何设置子窗体在主窗体中居中显示,本文提供详细的操作步骤,需要的朋友可以参考下 其实表面上看是很简单的 开始吧,现在有两个窗体Form1主窗体,Form2子窗体 而且我相信大部分人都会 ...

  6. JavaWeb中监听器+过滤器+拦截器区别、配置和实际应用

    JavaWeb中监听器+过滤器+拦截器区别.配置和实际应用 1.前沿上一篇文章提到在web.xml中各个元素的执行顺序是这样的,context-param-->listener-->fil ...

  7. OK335xS GPMC nand device register hacking

    /********************************************************************************* * OK335xS GPMC na ...

  8. 【linux基础】生成目录下所有图片的路径

    command ls *.jpg > list.txt result .png .png .png .png .png command ls /home/xxx/input/*.png > ...

  9. VS2013、VS2015中,新建项目没有看到解决方案的问题(已解决)

    问题描述:装好VS2013 专业版 for Update5不知怎么弄的,突然新建项目没有了解决方案,于是各种折腾,最后终于解决了! ================================== ...

  10. day2-Iptables笔记

    1.   iptables防火墙简介 Iptables也叫netfilter是Linux下自带的一款免费且优秀的基于包过滤的防火墙工具,它的功能十分强大,使用非常灵活,可以对流入.流出.流经服务器的数 ...