为了账号安全,请及时绑定邮箱和手机立即绑定

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

课程名称

课程章节

第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 的其他优势:

  1. 更容易帮助我们发现程序里的问题
  2. 语法提示更加完善,有了类型之后,写代码非常爽
  3. 语义更强,代码可读性更高

掌握搭建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 + 类型
图片描述
图片描述
又比如:
图片描述
都会有类型校验报错提示
图片描述

图片描述

图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消