初识TypeScript
一. TypeScript简介
- 官网：https://www.typescriptlang.org/
1.1 TypeScript发展介绍
- 什么是TypeScript
- TypeScript简称 TS，可以理解为是 JavaScript 的扩展，扩展了 js 的语法，因此我们可以在 ts 中继续写 js 的代码而不会报错
- TypeScript 又叫做静态的 JavaScript，不能直接引入到 html 中，不能直接被浏览器识别，需要经过 ts 转换器或者是 babel 转化后才能使用
- Typed JavaScript at Any Scale (它强调了 TypeScript 的两个最重要的特性——类型系统、适用于任何规模)；也就是说：TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。
- 关于 TypeScript
- TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。
- 它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 开发的 Angular 从 2.0 开始就使用了 TypeScript 作为开发语言，Vue 3.0 也使用 TypeScript 进行了重构。
1.2 类型系统介绍
-
如何理解静态语言和动态语言
-
类型系统按照类型检查的时机来分类，可以分为动态类型和静态类型
-
动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JavaScript 是一门解释型语言，没有编译阶段，所以它是动态类型；以下这段代码在运行时才会报错：
let foo = 1; foo.split(' '); // Uncaught TypeError: foo.split is not a function // 运行时会报错（foo.split 不是一个函数），造成线上 bug -
静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型;这段 TypeScript 代码在编译阶段就会报错了：
let foo = 1; foo.split(' '); // Property 'split' does not exist on type 'number'. // 3
-
-
如何理解强类型和弱类型的语言
类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型
以下这段代码不管是在 JavaScript 中还是在 TypeScript 中都是可以正常运行的，运行时数字
1会被隐式类型转换为字符串'1'，加号+被识别为字符串拼接，所以打印出结果是字符串'11'console.log(1 + '1'); // 打印出字符串 '11'TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。
1.3 适用规模介绍
1. TypeScript 非常适用于大型项目——这是显而易见的，类型系统可以为大型项目带来更高的可维护性，以及更少的 bug
2. 在中小型项目中推行 TypeScript 的最大障碍就是认为使用 TypeScript 需要写额外的代码，降低开发效率。但事实上，由于有[类型推论][]，大部分类型都不需要手动声明了。相反，TypeScript 增强了编辑器（IDE）的功能，包括代码补全、接口提示、跳转到定义、代码重构等，这在很大程度上提高了开发效率。而且 TypeScript 有近百个[编译选项][]，如果你认为类型检查过于严格，那么可以通过修改编译选项来降低类型检查的标准。
3. TypeScript 还可以和 JavaScript 共存。这意味着如果你有一个使用 JavaScript 开发的旧项目，又想使用 TypeScript 的特性，那么你不需要急着把整个项目都迁移到 TypeScript，你可以使用 TypeScript 编写新文件，然后在后续更迭中逐步迁移旧文件。如果一些 JavaScript 文件的迁移成本太高，TypeScript 也提供了一个方案，可以让你在不修改 JavaScript 文件的前提下，编写一个[类型声明文件][]，实现旧项目的渐进式迁移。
1.4 支持性、兼容性、扩展性、实用性介绍
1. TypeScript 的另一个重要的特性就是坚持与 ECMAScript 标准同步发展。
1. 除了实现 ECMAScript 标准之外，TypeScript 团队也推进了诸多语法提案，比如可选链操作符（`?.`）、空值合并操作符（`??`)、Throw 表达式、正则匹配索引等。
二. TS安装
2.1 全局安装命令
TypeScript 的命令行工具安装方法如下：
npm install -g typescript
以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了
检测是否安装成功命令：
tsc -v // Version 版本号 证明安装成功
2.2 编译
编译一个 TypeScript 文件很简单,
- 创建一个ts文件
- 进入命令行
- 进入ts文件所在的目录
- 执行以下命令
tsc hello.ts
三 Visual Studio Code 配置自动编译
3.1 自动编译配置
-
首先在放 ts 的文件夹下打开终端 执行 tsc --init 命令 会生成一个 tsconfig.json 文件
tsc --init // 在文件夹下自动生成一个 tsconfig.json 文件 -
点击 vscode 终端–>选择运行任务–>输入 tsc 按下回车–>选择 tsc:监视 xxxx 文件夹下的 tsconfig.json 文件
-
之后再写的 ts 代码就会自动转化为 js
3.2 tsconfig.json介绍
如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。
- 文件选项配置
- 编译选项配置
- 工程引用配置
四 TS数据类型
ts中为了使编写的代码更规范，更有利于维护，增加了类型校验，在ts中主要提供了以下数据类型
4.1 布尔类型
布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类型：
let isDone: boolean = false;
// 编译通过
// 后面约定，未强调编译错误的代码片段，默认为编译通过
4.2 数字类型
使用 number 定义数值类型：
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
4.3 字符串类型
使用 string 定义字符串类型：
let myName: string = 'Tom';
let myAge: number = 25;
// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;
4.4 void类型
JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数
function alertName(): void {
console.log('My name is Tom');
}
声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null
let unusable: void = undefined;
4.5 undefined 和null 类型
在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：
let u: undefined = undefined;
let n: null = null;
与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：
// 这样不会报错;注意需要提前关闭严格模式
let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;
4.6 never其他类型
never类型表示的是那些永不存在的值的类型。 例如，never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是never类型，当它们被永不为真的类型保护所约束时。never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使any也不可以赋值给never。
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
