前端项目练习(练习-006-typescript-01)

学习前,首先,创建一个web-006项目,内容和web-005一样。(注意将package.json中的name改为web-006)

TypeScript 

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。

TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

前端项目练习(练习-006-typescript-01)_第1张图片                        前端项目练习(练习-006-typescript-01)_第2张图片

关于TypeScript的学习和语法,对于会Java的程序员来说,易如反掌,想系统学习的可以在网上找个教程系统学习一下即可。

现在开始在我们前面的项目里面加入ts(typescript),说白了就是新写一个ts文件,替换掉原来的js文件,并实现和上一个例子相同的功能。

首先,使用npm安装 TypeScript 编译器和 loader:

npm install --save-dev typescript ts-loader

前端项目练习(练习-006-typescript-01)_第3张图片

下面把原来的js文件删除,写一个index.ts文件,实现和js类似的代码功能:

前端项目练习(练习-006-typescript-01)_第4张图片

在ts中类似的,同样可以引入css和html模块。接着定义了个字符串类型的hello字段,后面跟着冒号和string,表示显式的定义hello的类型为string,假如后面写成其它类型就会报错,例如:

前端项目练习(练习-006-typescript-01)_第5张图片

具体的ts用法这里不再描述,这里的代码总的来说,还是引入css和html,并打印一个字符串语句。

js文件可以被浏览器识别,ts文件如何运行呢?上面我们通过npm安装了typescript,可以在命令行查看它的版本,typescript的命令是tsc,执行 tsc -v 如图:

前端项目练习(练习-006-typescript-01)_第6张图片

下面通过tsc命令,把ts文件转为js文件,因为要单独的运行这个ts,所以先把上面两个import注释掉:

前端项目练习(练习-006-typescript-01)_第7张图片

然后执行 tsc index.ts命令将文件转为js文件:

前端项目练习(练习-006-typescript-01)_第8张图片

可以看到ts文件的同级目录下,多了一个index.js文件,这就是新生成的。我们在项目目录中也可以看到这个文件:

前端项目练习(练习-006-typescript-01)_第9张图片

打开生成的index.js文件,可以看到里面的内容都变成了js代码:

前端项目练习(练习-006-typescript-01)_第10张图片

通过上面的例子可以看到,ts是我们开发时使用的代码语法,最终我们运行的还是js,这也是我们为什么要安装typescript和ts-loader的原因。

接下来继续完善项目,先把ts文件的注释去掉:

前端项目练习(练习-006-typescript-01)_第11张图片

然后修改webpack.config.js配置文件的内容,把入口entry配置的js改为ts:

为了能在运行时,修改ts文件在页面上能实时响应,在module中加一个新的 rules,也就是把

ts-loader加进去:

前端项目练习(练习-006-typescript-01)_第12张图片

webpack.config.js文件就修改完成了,整体看一下:

前端项目练习(练习-006-typescript-01)_第13张图片

除了上面几个配置的修改,想在项目中加入typescript,还需要单独在根目录加一个配置文件:tsconfig.json,官方文档具体说明如下:

TypeScript | webpack 官方文档 链接

前端项目练习(练习-006-typescript-01)_第14张图片

上面图中是官方文档的简单说明,上面的箭头指的tsconfig.json文件的名字和在项目中的位置,下面的箭头指的是官网展示的一个配置的具体例子,我们直接把这个例子复制到自己的项目中:

前端项目练习(练习-006-typescript-01)_第15张图片

这里面都是一些基础的配置,暂时不用修改,如果想了解tsconfig文件的详细配置,可以百度

"tsconfig.json配置详解"   去查看。

经过上面几步,typescript已经成功加入到项目中,替换了js文件。下面运行打包命令:

前端项目练习(练习-006-typescript-01)_第16张图片

可以看到ts文件打包成功。接下来直接运行项目,执行npm run dev:

前端项目练习(练习-006-typescript-01)_第17张图片

启动成功,浏览器自动弹出,并打开页面:

前端项目练习(练习-006-typescript-01)_第18张图片

可以看到,html中显示的内容,css配置的样式,和ts中打印的内容都能看到并且执行成功。

下面不关闭和重启项目,直接修改html,css和ts,修改后保存文件,可以看到浏览器会自动响应出最新的内容:

前端项目练习(练习-006-typescript-01)_第19张图片

typescript添加成功。

你可能感兴趣的:(前端项目搭建练习,前端,typescript,javascript,webpack)