1.Typescript概述
融合了后端面向对象思想的超级版的JavaScript语言。
TypeScript是JavaScript的超集,扩展了JavaScript的语法。
特点:
(1) TypeScript: 【静态类型检查器】 可在编译时检查错误
(2) TypeScript为JS的超集
(3) TS === JS + 【类型】 js有的ts都有
(4) TS 规范了 JS类型声明 使之更加严谨
TypeScript本质就是带有类型检查的JavaScript。
好处:
javascript,灵活,但会使程序出现不可预知的错误,运行时才检测。
typescript,编译时发现错误,更好的代码提示。规范代码,提升代码可读性,提高开发效率。
2.环境准备
基于node环境,vscode工具+Typescript插件。
npm i typescript -g // 全局安装Typescript
tsc -v // 查看ts版本
新建一个项目,在其中新建一个ts文件demo.ts,文件内容如下
console.log("hi Typescript") //先使用js的代码内容
由于ts文件是不能够在浏览器中解析的,ts文件首先需通过编译,编译后才能被浏览器解析,用命令
// tsc + 文件名
tsc demo.ts // 将ts转为js浏览器可识别的代码
原因:PowerShell的默认执行策略是Restricted,它禁止运行任何脚本和配置文件。故需更改PowerShell的设置来更改脚本的执行策略。
编译后在目录下产生一个和ts文件同名的js文件,此时用node命令对该js文件进行解析,用node命令
// node + 文件名
node demo.js
由于每次ts修改都需使用tsc命令进行编译成js,比较麻烦,可使用以下命令进行侦听,当文件发生变化后,会自动编译ts。
tsc demo.ts -w
此时该终端窗口不关,新开一个窗口 直接执行node命令
node demo.js
这里只是对单个文件进行监听,若项目中有很多的ts文件,如何对所有文件进行侦听呢。
先在项目下新建一个tsconfig配置文件,也可执行以下命令生成:
tsc --init // 生成tsconfig配置文件
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=C%3A%5CUsers%5CYTT%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1701508204525.png&pos_id=img-QUdjgcr7-1728961407600)
此时再在项目中执行以下命令则可以对整个项目的ts文件进行监听了。
tsc -w
还有更简洁的方式(直接运行ts文件方法),需安装以下包
安装ts-node
*ts-node* 是一个TypeScript执行引擎,能让我们在 Node.js 环境下直接运行 TypeScript 代码。
npm i ts-node -g
npm init -y // 初始化一个package.json
安装声明文件
npm i @types/node -D
**@types/node**是TypeScript的一个声明文件包,用于描述Node.js核心模块和常用的第三方库的类型信息。
这些声明文件增加了对ts在Node.js环境下的支持,并提供了更好的类型安全和编辑器智能提醒。
@types/node提供了更好的Node.js环境下TypeScript的类型声明支持,能够获得更好的类型提示及错误提示等。
安装完毕后,可直接用命令执行ts文件!
ts-node index.ts
此时可直接用命令执行ts文件!
### 3.数据类型
#### 3.1 基本类型(原始类型)
原始类型(string, number, boolean, undefined, null)
特点:简单,这些类型,完全按照 JS 中类型的名称来书写。
//string类型
let str: string = ‘abcdefg’; //:string 表示【类型注解】,声明变量的时候就进行类型约束
console.log(“