【作为2018年前端最应该学习的技术】Typescript真的很火。这两天蹦蹦也自学了ts。并基于Dva+React+Typescript+Tslint配置了一个简单的环境，由于其他百度教程都是17年或者更早的，很多都已经过时了，想着和自学的朋友们分享一下经验吧！第一步安装typescript（推荐全局安装）npminstall-gtypescript第二步安装dva-cli（使用全局安装）npminstall-gdva-cli第三步，进入自己的项目目录cdd：/代码/4-Dva+React\1-dva+react_firstday。使用dva-cli创建工程，创建的工程目录如下：dvanew01-dva-quickstart。安装typescript所需的react、react-dom包，以及ts-loader和tslintnpminstall--save-dev@types/react@types/react-domts-loaderts-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”]}，“排除”：[“node_modules”，“lib”，“es”]}。配置tslint.json（tslint规范）在项目根目录（./tslint.json）新建tslint.json，写入如下必要的代码：（ps：以下规则配置项可自行添加）{"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已经全部搞定了，是时候测试一下了吗?Step41.删除./src目录下的所有文件，不要删除文件夹；2.在./src/routes目录下新建Home.tsx(./src/routes/Home.tsx)（默认主页）；ps：dva中的路由相当于redux的容器（容器组件），具体相关概念可以参考链接说明。Home的代码。tsx如下：import*asReactfrom'react';exportinterfaceIAppProps{name?:string;};constHome:React.SFC=(props:IAppProps):JSX.Element=>{return(

);};导出默认首页；3．在./src/routes目录下新建News.tsx（./src/routes/News.tsx）（这是一个二级页面）；从“反应”导入*作为反应；exportinterfaceINewsProps{newslist?:Array<{title:string,content:'string'}>;};const新闻：React.SFC=(props:INewsProps):JSX.Element=>{constnewslist=props.newslist?props.newslist:[{title:'title1',content:'content1',}];返回(

);};4。写好我们的容器组件后，进入./src，在项目根目录（./src/router.tsx）新建router.tsx，配置我们的路由！从“反应”导入*作为反应；从'dva/router'导入{Router,Route,Switch};从“./routes/Home”导入主页；//引入主页组件importNewsfrom'./路线/新闻';//引入一个二级页面导出默认函数RouterConfig({history}){//路由配置return();}5。最后一步，进入./src/根目录，新建index.tsx(./src/index.tsx)，写入如下代码！从“dva”导入dva；从“历史/createBrowserHistory”导入创建历史；constapp=dva({history:createhistory(),});app.router(require('./router').default);app.start('#root');ps:由于dva默认路由是Hash路由，蹦蹦有点逼，所以在constapp=dva({})HistoforH5中使用ryAPI，看起来更好；6.在命令行执行npmstart，如果代码正确的话，应该可以看到这样的首页7.继续在浏览器地址栏输入/news，可以看到已经跳转到新闻了page第五步（大功告成）总结：蹦蹦学ts才2天，就迫不及待的融入到redux+react的实践中。期间踩了不少坑，发现redux其实对ts的支持不是很好。友情，于是果断转向轻量级的dva，而且dva+react+ts的配置网上很少，已经过时了，分享给大家。。，代码也没有太多评论，dva文档链接说明已经解释的很详细了，蹦蹦觉得不用多说了！睡觉了，代码就这么多，我永远爱前端蹦蹦！！