TypeScript学习笔记（一）—— TypeScript入门

何竹道 發表於 2022-9-21 09:30:00

TypeScript学习笔记（一）—— TypeScript入门

<h1>一、TypeScript概要</h1>
TypeScript是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，工作于TypeScript的开发。
<img src="https://img2022.cnblogs.com/blog/63651/202207/63651-20220711115930088-1978728719.png" alt="" width="269" height="210" loading="lazy">
官网：http://www.typescriptlang.org/
github：https://github.com/Microsoft/TypeScript
学习：https://www.tslang.cn/ 、http://ts.xcatliu.com/、https://www.jqhtml.com/8090.html
<img src="https://img2022.cnblogs.com/blog/63651/202207/63651-20220711120004246-1335688738.png" alt="" width="274" height="274" loading="lazy">
<h2>1.1、什么是 TypeScript</h2>
<blockquote>
Typed JavaScript at Any Scale. 添加了类型系统的 JavaScript，适用于任何规模的项目。

</blockquote>
以上描述是官网对于 TypeScript 的定义。
它强调了 TypeScript 的两个最重要的特性——类型系统、适用于任何规模。
<h2 id="typescript-%E7%9A%84%E7%89%B9%E6%80%A7">1.2、TypeScript 的特性 </h2>
<h3 id="%E7%B1%BB%E5%9E%8B%E7%B3%BB%E7%BB%9F">1.2.1、类型系统 </h3>
从 TypeScript 的名字就可以看出来，「类型」是其最核心的特性。
我们知道，JavaScript 是一门非常灵活的编程语言：
<ul>
<li>它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。</li>
<li>由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。</li>
<li>基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改。</li>
<li>函数是 JavaScript 中的一等公民，可以赋值给变量，也可以当作参数或返回值。</li>

</ul>
这种灵活性就像一把双刃剑，一方面使得 JavaScript 蓬勃发展，无所不能，从 2013 年开始就一直蝉联最普遍使用的编程语言排行榜冠军；另一方面也使得它的代码质量参差不齐，维护成本高，运行时错误多。
而 TypeScript 的类型系统，在很大程度上弥补了 JavaScript 的缺点。
<h3 id="%E7%B1%BB%E5%9E%8B%E7%B3%BB%E7%BB%9F">1.2.2、TypeScript 是静态类型</h3>
类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。
动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JavaScript 是一门解释型语言，没有编译阶段，所以它是动态类型，以下这段代码在运行时才会报错：
<div class="cnblogs_code">
<pre>let foo = 1;
foo.split(' ');
// Uncaught TypeError: foo.split is not a function
// 运行时会报错（foo.split 不是一个函数），造成线上 bug</pre>
</div>
静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型，这段 TypeScript 代码在编译阶段就会报错了：
<div class="cnblogs_code">
<pre>let foo = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错（数字没有 split 方法），无法通过编译</pre>
</div>
你可能会奇怪，这段 TypeScript 代码看上去和 JavaScript 没有什么区别呀。
没错！大部分 JavaScript 代码都只需要经过少量的修改（或者完全不用修改）就变成 TypeScript 代码，这得益于 TypeScript 强大的[类型推论][]，即使不去手动声明变量 <code>foo</code> 的类型，也能在变量初始化时自动推论出它是一个 <code>number</code> 类型。
完整的 TypeScript 代码是这样的：
<div class="cnblogs_code">
<pre>let foo: number = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错（数字没有 split 方法），无法通过编译</pre>
</div>
<h4 id="typescript-%E6%98%AF%E5%BC%B1%E7%B1%BB%E5%9E%8B">1.2.3、TypeScript 是弱类型 </h4>
类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型。
以下这段代码不管是在 JavaScript 中还是在 TypeScript 中都是可以正常运行的，运行时数字 <code>1</code> 会被隐式类型转换为字符串 <code>'1'</code>，加号 <code>+</code> 被识别为字符串拼接，所以打印出结果是字符串 <code>'11'</code>。
<div class="cnblogs_code">
<pre>console.log(1 + '1');
// 打印出字符串 '11'</pre>
</div>
TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。
<blockquote>
TypeScript 中不管加号两侧是什么类型，都可以通过隐式类型转换计算出一个结果——而不是报错——所以 JavaScript 和 TypeScript 都是弱类型。
</blockquote>
<blockquote>
虽然 TypeScript 不限制加号两侧的类型，但是我们可以借助 TypeScript 提供的类型系统，以及 ESLint 提供的代码检查功能，来限制加号两侧必须同为数字或同为字符串。这在一定程度上使得 TypeScript 向「强类型」更近一步了——当然，这种限制是可选的。
</blockquote>
这样的类型系统体现了 TypeScript 的核心设计理念：在完整保留 JavaScript 运行时行为的基础上，通过引入静态类型系统来提高代码的可维护性，减少可能出现的 bug。
<h3 id="%E9%80%82%E7%94%A8%E4%BA%8E%E4%BB%BB%E4%BD%95%E8%A7%84%E6%A8%A1">1.2.4、适用于任何规模 </h3>
TypeScript 非常适用于大型项目——这是显而易见的，类型系统可以为大型项目带来更高的可维护性，以及更少的 bug。
在中小型项目中推行 TypeScript 的最大障碍就是认为使用 TypeScript 需要写额外的代码，降低开发效率。但事实上，由于有[类型推论][]，大部分类型都不需要手动声明了。相反，TypeScript 增强了编辑器（IDE）的功能，包括代码补全、接口提示、跳转到定义、代码重构等，这在很大程度上提高了开发效率。而且 TypeScript 有近百个[编译选项][]，如果你认为类型检查过于严格，那么可以通过修改编译选项来降低类型检查的标准。
TypeScript 还可以和 JavaScript 共存。这意味着如果你有一个使用 JavaScript 开发的旧项目，又想使用 TypeScript 的特性，那么你不需要急着把整个项目都迁移到 TypeScript，你可以使用 TypeScript 编写新文件，然后在后续更迭中逐步迁移旧文件。如果一些 JavaScript 文件的迁移成本太高，TypeScript 也提供了一个方案，可以让你在不修改 JavaScript 文件的前提下，编写一个[类型声明文件][]，实现旧项目的渐进式迁移。
事实上，就算你从来没学习过 TypeScript，你也可能已经在不知不觉中使用到了 TypeScript——在 VSCode 编辑器中编写 JavaScript 时，代码补全和接口提示等功能就是通过 TypeScript Language Service 实现的：
<img src="http://ts.xcatliu.com/assets/what-is-typescript-vscode.png" alt="what-is-typescript-vscode">
一些第三方库原生支持了 TypeScript，在使用时就能获得代码补全了，比如 Vue 3.0：
<img src="http://ts.xcatliu.com/assets/what-is-typescript-vue.png" alt="what-is-typescript-vue">
有一些第三方库原生不支持 TypeScript，但是可以通过安装社区维护的类型声明库（比如通过运行 <code>npm install --save-dev @types/react</code> 来安装 React 的类型声明库）来获得代码补全能力——不管是在 JavaScript 项目中还是在 TypeScript 中项目中都是支持的：
<img src="http://ts.xcatliu.com/assets/what-is-typescript-react.png" alt="what-is-typescript-react">
由此可见，TypeScript 的发展已经深入到前端社区的方方面面了，任何规模的项目都或多或少得到了 TypeScript 的支持。
<h3 id="%E4%B8%8E%E6%A0%87%E5%87%86%E5%90%8C%E6%AD%A5%E5%8F%91%E5%B1%95">1.2.5、与标准同步发展 </h3>
TypeScript 的另一个重要的特性就是坚持与 ECMAScript 标准同步发展。
ECMAScript 是 JavaScript 核心语法的标准，自 2015 年起，每年都会发布一个新版本，包含一些新的语法。
一个新的语法从提案到变成正式标准，需要经历以下几个阶段：
<ul>
<li>Stage 0：展示阶段，仅仅是提出了讨论、想法，尚未正式提案。</li>
<li>Stage 1：征求意见阶段，提供抽象的 API 描述，讨论可行性，关键算法等。</li>
<li>Stage 2：草案阶段，使用正式的规范语言精确描述其语法和语义。</li>
<li>Stage 3：候选人阶段，语法的设计工作已完成，需要浏览器、Node.js 等环境支持，搜集用户的反馈。</li>
<li>Stage 4：定案阶段，已准备好将其添加到正式的 ECMAScript 标准中。</li>

</ul>
一个语法进入到 Stage 3 阶段后，TypeScript 就会实现它。一方面，让我们可以尽早的使用到最新的语法，帮助它进入到下一个阶段；另一方面，处于 Stage 3 阶段的语法已经比较稳定了，基本不会有语法的变更，这使得我们能够放心的使用它。
除了实现 ECMAScript 标准之外，TypeScript 团队也推进了诸多语法提案，比如可选链操作符（<code>?.</code>）、空值合并操作符（<code>??</code>）、Throw 表达式、正则匹配索引等。
<h2 id="%E6%80%BB%E7%BB%93">1.3、总结 </h2>
什么是 TypeScript？
<ul>
<li>TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。</li>
<li>TypeScript 是一门静态类型、弱类型的语言。</li>
<li>TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。</li>
<li>TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。</li>
<li>TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。</li>
<li>TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。</li>
<li>TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。</li>
<li>TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。</li>
<li>TypeScript 与标准同步发展，符合最新的 ECMAScript 标准（stage 3）。</li>

</ul>
<h2 id="%E6%80%BB%E7%BB%93">1.4、TypeScript 的发展历史</h2>
<ul>
<li>2012-10：微软发布了 TypeScript 第一个版本（0.8），此前已经在微软内部开发了两年。</li>
<li>2014-04：TypeScript 发布了 1.0 版本。</li>
<li>2014-10：Angular 发布了 2.0 版本，它是一个基于 TypeScript 开发的前端框架。</li>
<li>2015-01：ts-loader 发布，webpack 可以编译 TypeScript 文件了。</li>
<li>2015-04：微软发布了 Visual Studio Code，它内置了对 TypeScript 语言的支持，它自身也是用 TypeScript 开发的。</li>
<li>2016-05：<code>@types/react</code> 发布，TypeScript 可以开发 React 应用了。</li>
<li>2016-05：<code>@types/node</code> 发布，TypeScript 可以开发 Node.js 应用了。</li>
<li>2016-09：TypeScript 发布了 2.0 版本。</li>
<li>2018-06：TypeScript 发布了 3.0 版本。</li>
<li>2019-02：TypeScript 宣布由官方团队来维护 typescript-eslint，以支持在 TypeScript 文件中运行 ESLint 检查。</li>
<li>2020-05：Deno 发布了 1.0 版本，它是一个 JavaScript 和 TypeScript 运行时。</li>
<li>2020-08：TypeScript 发布了 4.0 版本。</li>
<li>2020-09：Vue 发布了 3.0 版本，官方支持 TypeScript。</li>

</ul>
<h1 class="md-end-block md-heading">二、TypeScript 开发环境搭建</h1>
<ol class="ol-list" start="">
<li class="md-list-item">
下载Node.js

</li>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi

</li>
<li class="md-list-item">
32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi

</li>

</ul>
<li class="md-list-item">
安装Node.js

</li>
<li class="md-list-item">
使用npm全局安装typescript
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
进入命令行

</li>
<li class="md-list-item">
输入：npm i -g typescript

</li>

</ul>

</li>
<li class="md-list-item">
创建一个ts文件

</li>
<li class="md-list-item">
使用tsc对ts文件进行编译

</li>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
进入命令行

</li>
<li class="md-list-item">
进入ts文件所在目录

</li>
<li class="md-list-item md-focus-container">
执行命令：tsc xxx.ts

</li>

</ul>

</ol>
<img src="https://img2022.cnblogs.com/blog/63651/202207/63651-20220711145508223-1345428586.png" alt="" width="653" height="240" loading="lazy">
TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。
主流的编辑器都支持 TypeScript，这里我推荐使用 Visual Studio Code。
它是一款开源，跨终端的轻量级编辑器，内置了对 TypeScript 的支持。
另外它本身也是用 TypeScript 编写的。
下载安装：https://code.visualstudio.com/
获取其他编辑器或 IDE 对 TypeScript 的支持：
<ul>
<li>Sublime Text</li>
<li>WebStorm</li>
<li>Vim</li>
<li>Emacs</li>
<li>Eclipse</li>
<li>Atom</li>
<li>Visual Studio 2019</li>
<li>Visual Studio 2017</li>

</ul>
<h1 class="md-end-block md-heading">三、第一个TypeScript程序</h1>
<h2>3.1、非IDE环境</h2>
（1）、在磁盘上创建一个文件夹，如：F:\NF\TypeScript\demos\demo1
（2）、在文件夹下创建hello.ts文件，内容如下：
<div class="cnblogs_code">
<pre>class Greeter {
constructor(public greeting: string) { }
greet() {
 return "<h1>" + this.greeting + "</h1>";
}
};

var greeter = new Greeter("Hello, world!");
document.body.innerHTML = greeter.greet();</pre>
</div>
（3）、进入命令行，执行编译
<img src="https://img2022.cnblogs.com/blog/63651/202207/63651-20220711150533266-1803848081.png" alt="" loading="lazy">
 编译后的hello.js文件：
<div class="cnblogs_code">
<pre>var Greeter = /** @class */ (function () {
function Greeter(greeting) {
 this.greeting = greeting;
}
Greeter.prototype.greet = function () {
 return "<h1>" + this.greeting + "</h1>";
};
return Greeter;
}());
;
var greeter = new Greeter("Hello, world!");</pre>
</div>
<div class="cnblogs_code">
<pre>document.body.innerHTML = greeter.greet();</pre>
</div>
（4）、调用hello.js，创建hello.html
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="hello.js"></script>
</body>
</html></pre>
</div>
（5）、查看运行效果
<img src="https://img2022.cnblogs.com/blog/63651/202207/63651-20220711151109051-278632828.png" alt="" width="473" height="332" loading="lazy">
<h2>3.2、IDE环境（VSCode）</h2>
（1）、在VSCode中创建一个空项目
（2）、创建文件hello.ts
（3）、点击“终端”->"启动终端"
<img src="https://img2022.cnblogs.com/blog/63651/202207/63651-20220711161321347-540140127.png" alt="" loading="lazy">
 （4）、输入指令：tsc hello.ts
 （5）、创建hello.html文件
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="hello.js"></script>
</body>
</html></pre>
</div>
（6）、右键“open with live server”运行结果如下：
<img src="https://img2022.cnblogs.com/blog/63651/202207/63651-20220711161600096-780091633.png" alt="" loading="lazy">
<h2>3.3、使用ts-node直接运行ts文件</h2>
写Typescript文件，node命令可以直接编运行，我们不想ts转换为js，再去执行，安装指令如下：
<div class="cnblogs_code">
<pre># Or globally with TypeScript.
npm install -g typescript
npm install -g ts-node

# Depending on configuration, you may also need these
npm install -D tslib @types/node</pre>
</div>
<img src="https://img2022.cnblogs.com/blog/63651/202207/63651-20220712083908849-2000857895.png" alt="" loading="lazy">
 新建一个ts01.ts文件，并执行效果如下：
<img src="https://img2022.cnblogs.com/blog/63651/202207/63651-20220712084410738-1401975182.png" alt="" loading="lazy">
tslib 这是的运行时库，其中包含所有TypeScript辅助函数。该库主要由TypeScript中的--importHelpers标志使用。使用--importHelpers ，在以下发出的文件中使用诸如__extends和__assign类的辅助函数的模块
tsc参数详细：
<img src="https://img2022.cnblogs.com/blog/63651/202209/63651-20220921115506212-1612738662.png" alt="" loading="lazy">
更多>>
<h4>vscode推荐插件</h4>
<ul>
<li>JavaScript and TypeScript Nightly</li>
</ul>
<h2>3.4、关于code runner运行typescript输出乱码问题</h2>
打开 VS Code，点击左侧菜单栏的“设置”按钮（齿轮图标）。
1，在搜索框中输入“Code Runner”。
<img src="https://img2023.cnblogs.com/blog/63651/202309/63651-20230919140553186-1361593218.png" alt="" loading="lazy">
2，找到“Code-runner: File Directory as CWD”选项，将其勾选上。
3，找到“Code-runner: Clear Previous Output”选项，将其勾选上。
4，找到“Code-runner: Language Mapping”选项，点击“Edit in settings.json”按钮。
<img src="https://img2023.cnblogs.com/blog/63651/202309/63651-20230919140530712-512565741.png" alt="" loading="lazy">
5，在打开的 settings.json 文件中添加以下代码：
<div class="cnblogs_code">
<pre>"code-runner.executorMap": {

"typescript": "npx ts-node --files"

}</pre>
</div>
保存文件并关闭。
完成以上配置后，再次使用 Code Runner 运行 TypeScript 文件时，应该就可以正常显示中文字符了
 
<h1>四、作业</h1>
1、搭建好typescript开发环境。
2、重现老师上课的每一个示例
3、了解tsc命令参数，使用至少3个不同的参数
<h1>五、视频</h1>
 【TypeScript】 https://www.bilibili.com/video/BV1rT411T7JN?share_source=copy_web&vd_source=475a31f3c5d6353a782007cd4c638a8a 
来源：https://www.cnblogs.com/best/p/16465935.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript学习笔记（一）—— TypeScript入门