尚硅谷TypeScript教程(李立超老师TS新课)
黑马程序员最新TypeScript入门视频,不用学JavaScript也能看得懂哦
TypeScript介绍
什么是 TypeScript?
TypeScript(简称TS) 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,因为它扩展了 JavaScript,有 JavaScript 没有的东西
TypeScript 增加了什么?
TypeScript 向 JS 语言添加了可选的静态类型和基于类的面向对象编程。JavaScript 是弱类型,很多错误只有在运行时才会被发现,而 TypeScript 提供了一套静态检测机制,,可以帮助我们在编译时就发现错误
TypeScript | JavaScript |
---|---|
JavaScript 的超集用于解决大型项目的代码复杂性 | 一种脚本语言,用于创建动态网页 |
可以在编译期间发现并纠正错误 | 作为一种解释型语言,只能在运行时发现错误 |
强类型,支持静态和动态类型 | 弱类型,没有静态类型选项 |
最终被编译成 JavaScript 代码,使浏览器可以理解 | 可以直接在浏览器中使用 |
支持模块、泛型和接口 | 不支持模块,泛型或接口 |
社区的支持仍在增长,而且还不是很大 | 大量的社区支持以及大量文档和解决问题的支持 |
TypeScript 特点
1、支持最新的JavaScript新特特性
2、支持代码静态检查
3、支持诸如C,C++,Java,Go等后端语言中的特性 (枚举、泛型、类型转换、命名空间、声明文件、类、接口等)
开发环境搭建
1、安装 Node.js
TS 需要编译为 js,然后才会被 JS 解析器执行,所以我们需要安装 TS 解析器,而 TS 解析器使用 Node.js 写的,所以需要先安装 Node.js
2、安装 typescript
cmd 中使用 npm 全局安装 typescript:npm i -g typescript
安装完成后可以输入 tsc
,如果出现以下信息表示安装成功
3、新建一个 ts 文件
使用一个文本编辑器新建一个 .ts 文件(新建一个 txt 再修改后缀即可),内容为 console.log("hello ts")
,文件名为 hello_ts.ts
4、使用 tsc 对 ts 文件进行编译
在当前目录打开cmd,输入 tsc hello_ts.ts
然后会看到新增了一个 hello_ts.js,这就是 ts 通过编译器编译后产生的 js 文件
然后执行 node hello_ts.js
即可运行刚生成的 js 文件,会输出 hello ts
5、简化 ts 执行步骤
上边每次执行 ts 文件都需要执行以下两条命令:
tsc hello_ts.ts
node hello_ts.js
我们来进行简化,简化方式:使用 ts-node 包,直接在 Node.js 执行 ts 代码
1、安装:npm i -g ts-node
2、使用:ts-node hello.ts
如果安装 ts-node 后,报错:Error: Cannot find module ‘typescript’,那么重新执行npm install -g typescript
即可。例如我们有一个 hello.ts,内容为输出 我爱保温杯,那么在终端直接执行 ts-node hello.ts
即可。这次看下目录下并没有生成 hello.js。因为 ts-node 包内部偷偷将 TS 转成了 JS,然后执行 JS 代码
监视模式
我们可以使用 tsc 命令将文件转为 xx.js 文件。然后在 html 的 script 标签中引入
<script src="xx.js"></script>
问题:每次修改 ts 文件后,都要重新运行 tsc 命令将 ts 转化为 js
解决办法:使用 tsc 命令的监视模式: tsc --watch xx.ts
--watch
表示启用监视模式,只要重新保存了 ts 文件,就会自动调用 tsc 将 ts 转化为 js
注释
我使用 Webstorm
单行注释快捷键ctrl+/
多行注释快捷键ctrl+shift+/