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编译器帮助信息。

TS编译器帮助信息

在帮助信息中我们可以看到tsc --init Creates a tsconfig.json with the recommended settings in the working directory.,大意是tsc --init 命令帮助我们创建一个ts配置项;执行tsc --init,生成tsconfig.json。

ts配置项

创建一个src目录,在该目录下创建一个index.ts文件,输入let hello : string = "Hello TypeScript",意思为创建一个string类型的名字为hello的变量,变量值为Hello TypeScript。执行tsc ./src/index.ts,会发现TS编译器将ts文件编译为了js文件。

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的配置文件

打开webpack.base.config.js配置文件,同时在本地开发环境安装html-webpack-plugin、ts-loader和ts npm i ts-loader typescript html-webpack-plugin -D

webpack.base.config.js

接下来编写模板文件,在src下新建一个tpl目录,在tpl目录下新建一个index.html文件,文件内容如截图所示。

index.html

修改index.ts文件,使用document.querySelectorAll选中index.html中定义的名称为app的<div>元素,并将变量渲染进去。

修改index.ts文件

打开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命令。

package.json

输入npm start,启动成功后查看localhost:8080,可以看到变量已经渲染到了页面上;执行npm build,查看编译出来的dist文件夹,index.html已经将app.js中的内容添加了进去。

渲染成功


  1. 如果安装失败可以尝试 cnpm i ........ 替代npm i ........ 命令,国内使用npm经常连接超时😅 。


标题:TypeScript学习笔记 其一
作者:AzumaTokaku
地址:https://www.azumatokaku.cc/articles/2022/01/22/1642827481206.html

    评论
    0 评论
avatar

取消