TypeScript学习笔记 其一
TypeScript学习笔记 其一
学习React时发现TS是一个绕不过去的坎儿,所以打算趁着春节有时间顺便系统的学习一下TS😄。。
第一篇记录了TypeScript相关的概念,并尝试搭建一个简单的TypeScript程序。
该系列目录:
第一篇:TypeScript学习笔记 其一
第二篇:TypeScript学习笔记 其二
....待续....
一些需要提前了解的概念
- 强类型语言:不允许改变变量的数据类型,除非进行强制类型转换
- 弱类型语言:变量可以被赋予不同的数据类型
- 动态类型语言:在编译阶段确定所有变量的类型
- 静态类型语言:在执行阶段确定所有变量的类型
为什么要学习TypeScript
尽管近些年来ECMAScript标准有了长足的进步,但在类型检查方面仍然没有建树,在前端开发过程中经常会遇到这样的问题:
- 调用别人写的没有任何注释的函数,为了搞清楚参数类型,需要花费大量的时间去看里面的逻辑;函数的封装变的毫无意义。
- 为了保证代码的健壮性,对函数输入参数进行各种假设;浪费了大量精力。
- 维护底层类库,优化了一个参数类型,但不知道有多少处引用,提交代码后提心吊胆。
- 定义好了接口,联调就报错
TypeError:Cannot read property.......
这是因为JavaScript是动态弱类型语言,对变量类型非常宽容,不会在这些变量和它们的调用者之间建立结构化契约,JavaScript并没有对类型进行约束。
在ES标准推出静态类型检查前,TypeScript是当下解决此类问题的最佳方案。
什么是TypeScript
TypeScript是JavaScript的超集,它可以编译成纯JavaScript代码。
刚学习TypeScript时要注意三个要点:
- 类型检查:TypeScript会在编译时进行严格的静态类型检查
- 语言扩展:TypeScript会包含ECMAScript 6和未来提案中的特性,比如异步操作和装饰器;也会从其它语言中借鉴某些特性,如Java中的接口和抽象类
- 工具属性:TypeScript会编译为标准JavaScript代码,所以它可以在任何浏览器、操作系统上运行,无需额外开销,从这一点看它更像一个工具而不是独立的语言
编写第一个TypeScript程序
进行到此时默认已经提前安装好了VSCode和Node.js...🙂
首先新建一个文件夹,用VSCode打开该文件夹。
我们先执行 npm init -y
进行初始化,执行完成后文件夹内会多出一个package.json文件。
接下来全局安装TypeScript npm i typescript -g
,安装成功后输入 tsc -h
查看TS编译器帮助信息。
在帮助信息中我们可以看到tsc --init Creates a tsconfig.json with the recommended settings in the working directory.
,大意是tsc --init
命令帮助我们创建一个ts配置项;执行tsc --init
,生成tsconfig.json。
创建一个src目录,在该目录下创建一个index.ts文件,输入let hello : string = "Hello TypeScript"
,意思为创建一个string类型的名字为hello的变量,变量值为Hello TypeScript。执行tsc ./src/index.ts
,会发现TS编译器将ts文件编译为了js文件。
接下来配置构建工具让TS工程跑起来;安装三个包npm i webpack webpack-cli webpack-dev-server -D
1 ;其中-D一般只用于开发环境,安装的包的名称及版本号存放于package.json的devDependencies里。新建build文件夹,将webpack的配置文件拷入进来阿里云盘分享webpack的配置文件 。其中webpack.config.js是所有配置文件的入口,webpack.base.config.js是公共环境的配置,webpack.dev.config.js是开发环境的配置,webpack.pro.config.js是生产环境的配置。
打开webpack.base.config.js配置文件,同时在本地开发环境安装html-webpack-plugin、ts-loader和ts npm i ts-loader typescript html-webpack-plugin -D
。
接下来编写模板文件,在src下新建一个tpl目录,在tpl目录下新建一个index.html文件,文件内容如截图所示。
修改index.ts文件,使用document.querySelectorAll选中index.html中定义的名称为app的<div>
元素,并将变量渲染进去。
打开webpack.pro.config.js和webpack.config.js配置文件,安装clean-webpack-plugin和webpack-merge插件npm i clean-webpack-plugin webpack-merge -D
;此时webpack配置好了。
接下来我们打开package.json文件,修改入口main并添加一个start命令和一个build命令。
输入npm start,启动成功后查看localhost:8080,可以看到变量已经渲染到了页面上;执行npm build,查看编译出来的dist文件夹,index.html已经将app.js中的内容添加了进去。
如果安装失败可以尝试
cnpm i ........
替代npm i ........
命令,国内使用npm经常连接超时😅 。 ↩
标题:TypeScript学习笔记 其一
作者:AzumaTokaku
地址:https://www.azumatokaku.cc/articles/2022/01/22/1642827481206.html