课程名称
课程章节
第2章 TypeScript 基础语法入门
- 2-2 TypeScript 相对于 JavaScript 的其他优势
- 2-3 搭建课程学习必备环境
- 2-4 TS 代码的执行原理
- 2-5 从静态类型校验的角度理解 TypeScript
课程讲师
课程内容
TypeScript 相对于 JavaScript 的其他优势
通过js写一个函数，计算两个坐标差，以数组的方式返回。
function getDistance(point1, point2) {
return [point2.x - point1.x, point2.y - point1.y];
}
getDistance({ x: 1, y: 1}, { x: 2, y:2 });
对于ts代码，首先要定义一个类型，比如定义一个point类型。
type Point = { x: number, y: number };
function getDistance(point1: Point, point2: Point) {
return [point2.x - point1.x, point2.y - point1.y];
}
getDistance({ x: 2, y: 1}, { x: 2, y:2 });
对不观察，感觉差别并不大，在ts版本上加了一个point类型，并把类型加到了函数的参数上，感觉ts的语法稍微复杂一些，但是实现的功能都一样，感觉ts没有js简单。那为啥说ts有优势呢？
假若调用getDistance函数传参传错了。
js版本不会报错。
ts会报错。
=> ts优势：更容易帮助我们发现程序里的问题。
写代码时发现，ts代码会有精确的提示。
js就没有ts那样精确的提示功能了，它只能靠一些编辑器的推断了，靠我们历史输入的一些记录，提供一些大概的提示，但是非常不准确。
=> ts优势：语法提示更加完善，有了类型之后，写代码非常爽。
先有了类型定义，其实是有语义在里面的，这里的point会告诉我们它是一个点。
=> ts优势：语义更强，代码可读性更高。
搭建必备环境
安装node的LTS版本
具体安装版本可上网查查。
ts推荐开发工具用vs code。
推荐使用nrm管理npm下载源。
全局安装ts依赖
npm install typescript -g
检查是否安装成功
tsc
TS 代码的执行原理
ts代码在浏览器中是无法直接运行的。
用node执行ts代码，node也报错，提示执行不了。
=> ts默认在浏览器和node中都是无法执行的
无论在浏览器还是在node，用的都是V8引擎，实际ts默认在v8引擎中都是无法执行的。
ts需要首先编译成js，然后去执行，用typescript工具去编译成一个新的js文件。
tsc demo.ts
紧接着发现会报错，ts会对目录进行检测，getDistance方法重复了，它在全局，可能会造成文件夹里代码一些错误，后面工程化，把ts和js放在不同的目录里，重新定义相互的关系，就不会出现这个问题了。
果需要不断修改代码，测试运行结果，则需要不断地执行tsc命令，然后再用node或者浏览器去执行js，想要方便地对ts进行调试的话，推荐一个ts-node工具。
npm install ts-node -g
它只是封装了编译执行的过程，可以直接编译并执行。
课程收获
掌握 TypeScript 相对于 JavaScript 的其他优势：
- 更容易帮助我们发现程序里的问题
- 语法提示更加完善，有了类型之后，写代码非常爽
- 语义更强，代码可读性更高
掌握搭建TS必备环境
- node
- 开发工具用vs code
- 使用nrm管理npm下载源
- 全局安装ts依赖
了解TS 代码的执行原理
无论在浏览器还是在node，用的都是V8引擎，实际ts默认在v8引擎中都是无法执行的。
ts需要首先编译成js，然后去执行，用typescript工具去编译成一个新的js文件。
从静态类型校验的角度理解 TypeScript：
ts官网有这样的一句话，ts是在js的基础上主要增加了Static Type Checker => 静态类型的校验能力。
要完全理解这个，需要将它拆分成两个词去理解。
静态校验能力：一门语言，在代码执行之前，就能做错误预警，那么我们说这门语言具备静态校验能力
● 比如在写java的时候，代码真正执行之前，代码编译之前，我们其实就可以在编辑器里面去看到代码编写的一些错误，如果有些编写不严谨的地方，编辑器就会进行一些代码提示。
● 这类语言，在代码执行之前，就可以给予错误的提示，就可以说这门语言拥有静态校验能力。
● TS 约等于 Static Checker
Ts真正实现静态类型的校验能力，需要借助一个类型系统。
● 比如想在js执行之前，就识别出问题，假设写一个vs code底层的工具，希望这个工具看到js就能自动找到js里面代码的错误，这种方式实际是根本实现不了的。要想做到这点，除了在vs code底层开发一些校验器之外，还得在js的语言中增加一些类型。类型再配合底层的静态校验能力之后，才能去实现js代码的自动识别错误。
TS底层实现逻辑：
● 希望js具备 => Static Type Checker ： 代码执行之前报错
○ VSCode 增加js静态类型校验能力，但无法对js代码进行全面的判断
○ JS + 类型 + VSCode 静态类型校验能力
总结：TS 核心要学的是 JS + 类型
又比如：
都会有类型校验报错提示