您好!
欢迎来到京东云开发者社区
登录
首页
博文
课程
大赛
工具
用户中心
开源
首页
博文
课程
大赛
工具
开源
更多
用户中心
开发者社区
>
博文
>
Typescript合成Webpack中
分享
打开微信扫码分享
点击前往QQ分享
点击前往微博分享
点击复制链接
Typescript合成Webpack中
京东ZERO团队
2021-01-07
IP归属:未知
238760浏览
Js
## 前言 TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript,简称ts。相对于ES6,TypeScript最大的改善是增加了类型系统,国内外很多大型工程都用它,如AngularJs,白鹭引擎、Antd。 下面我将在React&Webpack代码库下基础下搭建TypeScript开发环境。 ## 安装 ### 第一步 安装React相关包的声明文件 可直接安装npm包,一般包前面加@types,就是加载该包的声明文件以.d.ts结尾 ```bash npm install --save @types/react @types/react-dom @types/react-router-dom @types/react-redux ``` 或 安装typings包进行搜索安装 ```bash # Install Typings CLI utility. npm install typings --global # Search for definitions. typings search react typings install react --save ``` ### 第二步 安装Webpack对应的加载器loader awesome-typescript-loader是typescript官网推荐的loader,ts-loader是wepack官网推荐的loader,两者用法一样都可用,但是要注意版本。 ```bash # 安装Ts npm install typescript --save-dev # 安装Webpack的ts loader npm install awesome-typescript-loader --save-dev npm install ts-loader --save-dev # 安装源文件,方便调试 npm install source-map-loader --save-dev ``` 提示 > 如果你的webpack版本是^4.0.0,则安装 awesome-typescript-loader的^5.0.0版本, 或ts-loader的^3.5.0版本 > 如果你的webpack版本是^3.0.0,则安装 awesome-typescript-loader的^4.0.0版本, 或ts-loader的^4.3.0版本 ### 第三步 修改Webpack配置文件 ```javascript module.exports = { resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx',".ts", ".tsx"], }, module: { rules: [ // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. // { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, { test: /\.tsx?$/, loader: "ts-loader" }, // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } ] } }; ``` ### 第四步 新建Ts配置文件 新建tsconfig.json, ```json { "compilerOptions": { "outDir": "./ts/", "sourceMap": true, "noImplicitAny": true, "target": "es6", "jsx": "react", "allowJs": true, "moduleResolution":"node" }, "include": [ "./src/**/*" ], "exclude": [ "node_modules" ], "files": [ "./node_modules/immutable/dist/immutable.d.ts" ] } ``` > * outDir:输出文件夹路径 > * sourceMap:是否要源码; > * noImplicitAny:是否警告any类型 > * target:编译目标语法 > * allowJs:允许所有js文件可编译 > * moduleResolution:模块解析策略 > * include:ts存放目录 > * exclude:编译排除目录 > * file:ts文件,编译包含'include'和'file'指定的文件。 ### 下面可以尽情编写TS文件了 ```javascript import * as React from "React"; import Baseinfo from "./baseinfo/baseinfo"; import { Switch, Route,Link } from 'react-router-dom'; import {is, fromJS} from 'immutable'; export interface Props { match: {url:string}} export class ConvertBean extends React.Component<Props, {}> { constructor(props:Props) { super(props); } shouldComponentUpdate(nextProps:any, nextState:any) { return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState)) } render() { const { match } = this.props; return ( <div className="toast-wrapper"> <Link to={`${match.url}/baseinfo`}>baseinfo</Link> <Switch> <Route path={`${match.url}/baseinfo`} component={Baseinfo}/> </Switch> </div> ); } } ``` > * [https://www.typescriptlang.org/docs/handbook/react-&-webpack.html](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html) > * [https://github.com/Microsoft/TypeScript-Handbook/pull/767](https://github.com/Microsoft/TypeScript-Handbook/pull/767) > * [https://www.tslang.cn/index.html](https://www.tslang.cn/index.html) > * [http://json.schemastore.org/tsconfig](http://json.schemastore.org/tsconfig/) Happy coding .. :)
原创文章,需联系作者,授权转载
上一篇:spring boot actuator info端点背后的密码
下一篇:Es6 featrues
相关文章
【技术干货】企业级扫描平台EOS-Jenkins集群进阶之路
Typescript合成Webpack中
不为熟知的ES5 api(一)
京东ZERO团队
文章数
39
阅读量
91749
作者其他文章
01
webpack打包组件配置(React版本)
这篇文章是以打包react插件的形式,介绍webpack的一些配置信息。如果写简单插件的话还是推荐使用rollup,但是可以用写插件的形式去学习一下webpack的一些东西。(适用于初中级webpack学者)
01
webpack核心概念与基本实现
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。**
01
Typescript合成Webpack中
TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript,简称ts。相对于ES6,TypeScript最大的改善是增加了类型系统,国内外很多大型工程都用它,如AngularJs,白鹭引擎、Antd。
01
小程序加载svg图片
小程序的[组件](https://developers.weixin.qq.com/miniprogram/dev/component/)中是没有支持`SVG`标签的。 但是在前端小伙伴的实际开发中,UED经常提供SVG图片过来,如果不想用引入`iconfont`的话,那么妹子我将介绍个很好用的方法。
最新回复
丨
点赞排行
共0条评论
京东ZERO团队
文章数
39
阅读量
91749
作者其他文章
01
webpack打包组件配置(React版本)
01
webpack核心概念与基本实现
01
小程序加载svg图片
添加企业微信
获取1V1专业服务
扫码关注
京东云开发者公众号