1. TypeScript 概述

JavaScript 是什么
TypeScript 是什么
TypeScript 相比 JavaScript 的优势

1.1 JavaScript 是什么

JavaScript（缩写：JS）是一种运行在客户端（比如：浏览器）中的编程语言。
当应用于浏览器时，为网站提供动态交互特性，让网页“动”起来。
JavaScript 的运行环境：1 浏览器 2 Node.js。

Node.js 让 JavaScript 摆脱了浏览器的束缚，可以实现服务端/桌面端编程等。

其他：微信小程序、微信小游戏等等。

总结：JavaScript 既能运行在浏览器中，也可以运行在 Node.js 中，前后端通吃，无所不能。

1.2 TypeScript 是什么

TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。

TypeScript = Type + JavaScript（为 JS 添加了类型系统）。
TypeScript 是微软开发的开源编程语言，设计目标是开发大型应用。

可以在任何浏览器、任何计算机、任何操作系统上运行。

// TypeScript 代码：有明确的类型，即 : number （数值类型）
let age: number = 18
// JavaScript 代码：无明确的类型
let age = 18

1.3 TypeScript 相比 JS 的优势

悲伤的故事：男程序员都是好男人，因为他们总会在电脑前问：我到底又错在哪了？
JS 的类型系统存在“先天缺陷” ，绝大部分错误都是类型错误（ Uncaught TypeError ）。

优势一：类型化思维方式，使得开发更加严谨，提前发现错误，减少改 Bug 时间。
优势二：类型系统提高了代码可读性，并使维护和重构代码更加容易。
优势三：补充了接口、枚举等开发大型应用时 JS 缺失的功能。
Vue 3 源码使用 TS 重写，释放出重要信号：TS 是趋势。
Angular 默认支持 TS；React 与 TS 完美配合，是很多大型项目的首选。

2. 开发工具准备

2.1 开发工具介绍

写代码的工具：Visual Studio Code（简称：VSCode），微软开发的代码编辑工具。
运行 TS / JS 代码的工具：Node.js，一个基于 Chrome 浏览器 V8 解析引擎的 JavaScript 运行环境。

说明：本课程中，TypeScript 基础知识，使用 Node.js 来运行。

2.2 安装 VSCode

按照步骤引导安装即可。
安装中文汉化插件：Chinese (Simplified) Language Pack for Visual Studio Code
点击右下角弹出的对话框，重启（Restart）VSCode。

2.3 安装 Node.js

按照步骤引导安装即可。
在终端（黑窗口）中输入：node --version，验证是否安装成功（注意：需要重启VSCode）。
如果打印出版本信息说明安装成功。

2.4 安装解析 TS 的工具包

问题：为什么要安装这个工具包？
答案：

Node.js/浏览器，只认识 JS 代码，不认识 TS 代码。
需要先将 TS 代码转化为 JS，然后就可以在 Node.js/浏览器中运行了。

安装步骤：

打开 VSCode 终端。
输入安装命令： npm i -g typescript 敲回车，来安装（注意：需要联网）。
typescript：就是用来解析 TS 的工具包。提供了 tsc 命令，实现了 TS -> JS 的转化。
npm：用来安装前端开发中用到的包，是安装 Node.js 时自动安装的。
i（install）：表示安装。
-g（–global）：全局标识，可以在任意目录中使用该工具。

3. 第一个 TS 文件

3.1 步骤

创建ts文件：
① 在桌面中创建文件夹：code。
② 在文件夹上点击鼠标右键，然后点击 Open With Code（用VSCode打开文件夹）。
③ 在 VSCode 中新建ts文件：hello.ts（注意：文件后缀名为 .ts）。
写代码：在 hello.ts 文件中，写入以下代码，并保存。
```
console.log('Hello TS')
```
问题1：TS 代码能直接在 Node.js 里面运行吗？不能

问题2：该如何处理呢？1 TS代码 -> JS代码 2 执行
执行代码，分两步：
① TS代码 -> JS代码：在当前目录打开终端，输入命令 tsc hello.ts 敲回车。
② 执行JS：输入命令 node hello.js（注意：后缀为 .js）。

解释：

tsc hello.ts 会生成一个 hello.js 文件。
node hello.js 表示执行这个 JS 文件中的代码。

3.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

4. 注释和输出语句

4.1 注释

注释是对代码的解释说明，用来帮助阅读和理解代码。

注意：注释的内容是不会执行的。
推荐在写代码时，添加代码注释，增加代码的可读性。

北冥有鱼，其名为鲲1。
注1：鲲(kūn)，本指鱼卵，此处借用为表大鱼之名。

注释有两种形式：1 单行注释 2 多行注释。
形式一：单行注释

// 两个斜线，表示单行注释，只能注释这一行内容
// 这是第二行注释
// 快捷键：ctrl + /

形式二：多行注释

/*
这是多行注释
可以注释多行内容
快捷键：shift + alt + a
*/

4.2 输出语句

作用：在终端（黑窗口）中打印信息。
Node.js 会执行我们写的代码，为了能够知道代码执行的结果，就需要使用输出语句，将结果打印出来。

console.log('Hello TS')

解释：

console 表示控制台，在 Node.js 中，指的是终端（黑窗口）。
小括号中的内容，表示要打印的信息。

5. 总结

TypeScript初体验

TypeScript 是 JS 的超集，为 JS 添加了类型系统。相比 JS，开发体验更友好，提前发现错误，Bug更少，增加开发的幸福度。
JavaScript 的两个运行环境是什么？1 浏览器 2 Node.js
TypeScript 能直接在浏览器或 Node.js 中执行吗？不能
如何将 ts 编译为 js？tsc hello.ts -> hello.js
如何简化执行 ts 代码？ts-node hello.ts
代码注释有哪两种？1 单行注释 2 多行注释
在控制台打印信息的代码是什么？console.log()

TypeScript：初体验相关推荐

vue create()获取ref_vue-next+typescript 初体验
无意间又一次刷到了尤大介绍 Vue 3 的文章,这次决定试一下 Vue 3 的 TypeScript 支持到底如何,不管别人说什么,只有自己用的舒服才是真的舒服.Vue 2 可是因为 ts 的缘故被喷 ...
vue-cli3+typescript初体验
前言气势汹涌,ts似乎已经在来的路上,随时可能敲门. 2015年,三大前端框架开始火爆的时候,我还在抱着Backbone不放,一直觉得可以轻易转到其他框架去.后来换工作,现实把脸都打肿了,没做过vu ...
TypeScript 初体验：开发工具准备
本次我们使用的工具是VScode和node.js 安装解析 TS 的工具包问题:为什么要安装这个工具包? 答案: Node.js/浏览器,只认识 JS 代码,不认识 TS 代码. 需要先将 TS 代 ...
TypeScript 初体验：第一个 TS 文件
步骤 1. 创建ts文件: ① 在桌面中创建文件夹:code. ② 在文件夹上点击鼠标右键,然后点击 Open With Code(用VSCode打开文件夹). ③ 在 VSCode 中新建ts文件: ...
1.TypeScript入门之TS初体验（运行TS代码）
Ⅰ.TypeScript介绍 1.1 TypeScript是什么 TypeScript(简称TS)是JavaScript的超集(JS有的TS都有). TypeScript = Type + JavaS ...
Copilot 初体验
Copilot 初体验大家好,我是小陆,亚欧大陆的陆.小陆是一个对一切新奇的事物充满了兴趣的人. GitHub Copilot (https://copilot.github.com/) 是 Git ...
苹果电脑安装python3密码_mac系统安装Python3初体验
前沿对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...
MapReduce编程初体验
需求:在给定的文本文件中统计输出每一个单词出现的总次数第一步: 准备一个aaa.txt文本文档第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...

TypeScript：初体验