一、TypeScript 概述
1 JavaScript 是什么
JavaScript(缩写:JS)是一种运行在客户端(比如:浏览器)中的编程语言。 当应用于浏览器时,为网站提供动态交互特性,让网页“动”起来。
JavaScript 的运行环境:1 浏览器 2 Node.js。
Node.js 让 JavaScript 摆脱了浏览器的束缚,可以实现服务端/桌面端编程等。
其他: 微信小程序、微信小游戏 等等。
总结:JavaScript 既能运行在 浏览器 中,也可以运行在 Node.js 中,前后端通吃,无所不能。
2 TypeScript 是什么
TypeScript(简称:TS)是 JavaScript 的超集(JS 有的 TS 都有)。
TypeScript = Type + JavaScript(为 JS 添加了类型系统)。
TypeScript 是微软开发的开源编程语言,设计目标是开发大型应用。
可以在任何浏览器、任何计算机、任何操作系统上运行。
// TypeScript 代码:有明确的类型,即 : number (数值类型)
let age: number = 18
// JavaScript 代码:无明确的类型
let age = 18
3 TypeScript 相比 JS 的优势
悲伤的故事:男程序员都是好男人,因为他们总会在电脑前问:我到底又错在哪了?
JS 的类型系统存在“先天缺陷” ,绝大部分错误都是类型错误( Uncaught TypeError )
- 优势一:类型化思维方式,使得开发更加严谨,提前发现错误,减少改 Bug 时间。
- 优势二:类型系统提高了代码可读性,并使维护和重构代码更加容易。
- 优势三:补充了接口、枚举等开发大型应用时 JS 缺失的功能。
- Vue 3 源码使用 TS 重写,释放出重要信号:TS 是趋势。
- Angular 默认支持 TS;React 与 TS 完美配合,是很多大型项目的首选。
- 我呼吁:准程序员们,为了发量、为了对象,让我们手拉手一起用 TS 吧!
二、开发工具准备
1 开发工具介绍
-
写代码的工具:Visual Studio Code(简称:VSCode),微软开发的代码编辑工具。
-
运行 TS / JS 代码的工具:Node.js,一个基于 Chrome 浏览器 V8 解析引擎的 JavaScript 运行环境。
- 说明:本课程中,TypeScript 基础知识,使用 Node.js 来运行。
2 安装 VSCode
-
按照步骤引导安装即可。
-
安装中文汉化插件:Chinese (Simplified) Language Pack for Visual Studio Code
-
点击右下角弹出的对话框,重启(Restart)VSCode。
更多安装工具包可点击推荐:
juejin.cn/post/730867…
3 安装 Node.js
-
按照步骤引导安装即可。
-
在终端(黑窗口)中输入:node --version,验证是否安装成功(注意:需要重启VSCode)。
-
如果打印出版本信息说明安装成功。
4 安装解析 TS 的工具包
问题:为什么要安装这个工具包?
答案:
- Node.js/浏览器,只认识 JS 代码,不认识 TS 代码。
- 需要先将 TS 代码转化为 JS,然后就可以在 Node.js/浏览器中运行了。
。
typescript:就是用来解析 TS 的工具包。提供了 tsc 命令,实现了 TS -> JS 的转化。
npm:用来安装前端开发中用到的包,是安装 Node.js 时自动安装的。
i(install):表示安装。
-g(--global):全局标识,可以在任意目录中使用该工具。
三、第一个 TS 文件
1 步骤
-
创建ts文件:
-
在桌面中创建文件夹:code。
-
在文件夹上点击鼠标右键,然后点击 Open With Code(用VSCode打开文件夹)。
-
在 VSCode 中新建ts文件:hello.ts(注意:文件后缀名为 .ts)。
-
写代码:在 hello.ts 文件中,写入以下代码,并保存。
console.log('Hello TS')
问题1:TS 代码能直接在 Node.js 里面运行吗?
不能
问题2:该如何处理呢?
-
TS代码 -> JS代码
-
执行 JS
-
执行代码,分两步:
-
TS代码 -> JS代码:在当前目录打开终端,输入命令 tsc hello.ts 敲回车。
-
执行JS:输入命令 node hello.js(注意:后缀为 .js)。
解释:
- tsc hello.ts 会生成一个 hello.js 文件。
- node hello.js 表示执行这个 JS 文件中的代码。
2 简化执行TS的步骤
问题:每次修改代码后,都要重复执行两个命令才能执行 TS 代码,太繁琐。
执行 TS 代码的两个步骤:
1 tsc hello.ts
2 node hello.js
简化方式:使用 ts-node 包,“直接”在 Node.js 中执行 TS 代码。
- 安装命令:npm i –g ts-node。
- 使用方式:ts-node hello.ts。
解释:
- ts-node 包内部偷偷的将 TS -> JS,然后,执行 JS 代码。
- ts-node 包提供了命令 ts-node,用来执行 TS 代码。
现在只需一步:
ts-node hello.ts
四、注释和输出语句
1 注释
注释是对代码的解释说明,用来帮助阅读和理解代码。
注意:注释的内容是不会执行的。
推荐在写代码时,添加代码注释,增加代码的可读性。
北冥有鱼,其名为鲲1。
注1:鲲(kūn),本指鱼卵,此处借用为表大鱼之名。
注释有两种形式:1 单行注释 2 多行注释。
形式一:单行注释
// 两个斜线,表示单行注释,只能注释这一行内容
// 这是第二行注释
// 快捷键:ctrl + /
形式二:多行注释
/*
这是多行注释
可以注释多行内容
快捷键:shift + alt + a
*/
2 输出语句
作用:在终端(黑窗口)中打印信息。
Node.js 会执行我们写的代码,为了能够知道代码执行的结果,就需要使用输出语句,将结果打印出来。
console.log('Hello TS')
解释:
- console 表示控制台,在 Node.js 中,指的是终端(黑窗口)。
- 小括号中的内容,表示要打印的信息。
想要视频教学?
请点击下方链接吧!(本文章归于本人学习笔记,如有侵权必删)
黑马程序员前端TypeScript教程,TypeScript零基础入门到实战全套教程_哔哩哔哩_bilibili