课程名称

专为小白设计的TypeScript入门课

课程章节

第2章 TypeScript 基础语法入门

2-2 TypeScript 相对于 JavaScript 的其他优势
2-3 搭建课程学习必备环境
2-4 TS 代码的执行原理
2-5 从静态类型校验的角度理解 TypeScript

课程讲师

Dell

课程内容

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 + 类型
图片描述

又比如：

都会有类型校验报错提示

图片描述

【备战春招】第2天 专为小白设计的TypeScript入门课——基础篇