前言
阿特伍德定律,指的是any application that can be written in javascript, will eventually be written in javascript,意即“任何可以用javascript来写的应用,最终都将用javascript来写”
在使用新技术的时候,切忌要一步一步的来,如果当你尝试把两门不熟悉的新技术一起结合使用,你很大概率会被按在地上摩擦,会yarn/npm和react脚手架等技术是前提,后面我会继续写pwa深入和node.js集群负载均衡nginx,webpack原理解析等~谢谢思否官方对我上篇文章的加精~
在使用typescript前,请你务必万分投入学习好以下内容再尝试:
学技术切忌过分急躁,一步登天,什么都想学却什么都学不好。作者的心得,持之以恒的努力,把每个技术逐个击破,最后结合起来使用,如鱼得水,基础不牢,地动山摇,本文的代码会把所有配置和redux,ant-design全部配好,开箱即用,其他的功能你看ant-design的文档往里面加就行了~
正式开启
本文介绍如何配置,已经整体的业务流程如何搭建 github源码地址
请注意它是一个第三方项目,而且不是 create react app 的一部分。
需要的依赖:都在package.json文件中。
这里请万分注意,ts的包大部分都是需要下两个,一个原生,一个@types/开头
{ "name": "antd-demo-ts", "version": "0.1.0", "private": true, "dependencies": { "@types/jest": "24.0.11", "@types/node": "11.13.7", "@types/react": "16.8.14", "@types/react-dom": "16.8.4", "@types/react-redux": "^7.0.8", "@types/react-router-dom": "^4.3.2", "@types/redux-thunk": "^2.1.0", "babel-plugin-import": "^1.11.0", "customize-cra": "^0.2.12", "less": "^3.9.0", "less-loader": "^4.1.0", "prop-types": "^15.7.2", "react": "^16.8.6", "react-app-rewired": "^2.1.3", "react-dom": "^16.8.6", "react-redux": "^7.0.2", "react-router-dom": "^5.0.0", "react-scripts": "3.0.0", "redux-chunk": "^1.0.11", "redux-devtools-extension": "^2.13.8", "redux-thunk": "^2.3.0", "typescript": "3.4.5" }, "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test" }, "eslintconfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }
* `ant-design`按需加载配置 `config-overrides.js`
const { override, fixbabelimports, addlessloader } = require('customize-cra'); module.exports = override( fixbabelimports('import', { libraryname: 'antd', librarydirectory: 'es', style: true, }), addlessloader({ javascriptenabled: true, modifyvars: { '@primary-color': '#1da57a' }, }) ); ```
tsconfig.json ,ts的配置文件 我基本上没怎么改动
{ "compileroptions": { "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": "preserve" }, "include": [ "src" ] }
redux less 的配置
配置没看懂不要紧,架子我都全部给你搭好了,按着ts和ant-design的官网去操作就ok
写ts代码时候常常问问自己,这个到底可能是什么类型,这个到底是public 还是 private?这个函数要返回什么类型,接受什么参数,什么是必须的,什么是可能没有的,再去考虑命名空间接口合并,类合并,继承这些问题。
复杂软件需要用复杂的设计,面向对象就是很好的一种设计方式,使用 ts 的一大好处就是 ts 提供了业界认可的类( es5+ 也支持)、泛型、封装、接口面向对象设计能力,以提升 js 的面向对象设计能力。
当你在ts世界遨游过后,再回js的世界,那么你会发现你写代码很少会出错,除非是业务逻辑的问题~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论