之前的文章大部分都写在CSDN，大部分文章都未迁移完成，文章内链接也展示没进行修改，点击链接会直接转跳至CSDN的文章，请见谅，过段时间迁移完成后会进行修改

系列文章目录

一、什么是typescript?

TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。 TypeScript = Type + JavaScript（在 JS 基础之上，为 JS 添加了类型支持）。

TS和JS之间的关系其实就是Less/Sass和CSS之间的关系，就像Less/Sass最终会转换成CSS一样,我们编写好的TS代码最终也会换成JS

它扩展了JavaScript，有JavaScript没有的东西。

硬要以父子类关系来说的话，TypeScript是JavaScript子类，继承的基础上去扩展。

1.1 TypeScript 与 JavaScript 的区别

TypeScript	JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
可以在编译期间发现并纠正错误	作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型	弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解	可以直接在浏览器中使用
支持模块、泛型和接口	不支持模块、泛型或接口
支持 ES3，ES4，ES5 和 ES6+功能	不支持编译其他 ES3，ES4，ES5 或 ES6+ 功能
社区的支持仍在增长，而且还不是很大	大量的社区支持以及大量文档和解决问题的支持

1.2 TypeScript特点

支持最新的JavaScript新特特性

支持代码静态检查

支持诸如C,C++,Java,Go等后端语言中的特性 (枚举、泛型、类型转换、命名空间、声明文件、类、接口等)

二、搭建typescript学习环境

2.1 安装最新版typescript

问题描述： Node.js/浏览器，只认识 JS 代码，不认识 TS 代码。需要先将 TS 代码转化为 JS 代码，然后才能运行
安装命令：npm i -g typescript
将 TS 编译为 JS： 在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）。
执行 JS 代码： 在终端中输入命令，node hello.js
说明： 所有合法的 JS 代码都是 TS 代码，有 JS 基础只需要学习 TS 的类型即可。

2.2 安装ts-node

问题描述： 每次修改代码后，都要重复执行两个命令，才能运行 TS 代码，太繁琐。
简化方式： 使用 ts-node 包，直接在 Node.js 中执行 TS 代码。
安装命令： npm i -g ts-node
使用方式： ts-node hello.ts。
解释： ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码。

2.3 创建一个 tsconfig.json 文件

tsconfig.json 是 TypeScript 项目的配置文件。如果一个目录下存在一个tsconfig.json文件，那么往往意味着这个目录就是 TypeScript 项目的根目录。
tsconfig.json 包含 TypeScript 编译的相关配置，通过更改编译配置项，我们可以让 TypeScript 编译出ES6、ES5、node 的代码。
```
tsc --init #生成配置文件
```

2.5 自动编译

问题： 每次修改ts文件后总是要重新运行
解决方式： tsc --w hello.ts。

2.6 官方playground

官方也提供了一个在线开发 TypeScript的云环境——Playground。

基于它，我们无须在本地安装环境，只需要一个浏览器即可随时学习和编写 TypeScript，同时还可以方便地选择 TypeScript

版本、配置 tsconfig，并对 TypeScript 实时静态类型检测、转译输出 JavaScript 和在线执行。

三、基本数据类型

3.1 JS的八种内置类型

let str: string = "jimmy";
let num: number = 24;
let bool: boolean = false;
let u: undefined = undefined;
let n: null = null;
let obj: object = {x: 1};
let big: bigint = 100n;
let sym: symbol = Symbol("me");

JavaScript 的类型分为两种： 原始数据类型和对象类型。

原始数据类型包括： 布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt。

本节主要介绍前五种原始数据类型和对象类型在 TypeScript 中的应用。

3.2 布尔值boolean

布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类型：

let isDone: boolean = false;

使用构造函数 Boolean 创造的对象不是布尔值，事实上 new Boolean() 返回的是一个Boolean 对象：

let createdByNewBoolean: boolean = new Boolean(1);

// Type 'Boolean' is not assignable to type 'boolean'.
//   'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.

直接调用 Boolean 才可以返回一个 boolean 类型：

let createdByBoolean: boolean = Boolean(1);

在 TypeScript 中，boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数。

3.3 数值number

使用 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;

3.4 字符串string

使用 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.`;

3.5 null 和 undefined

在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：

let u: undefined = undefined;
let n: null = null;

与 void 的区别是，undefined 和 null 是所有类型的子类型。就是说你可以把 null 和 undefined 赋值给其他类型：

// 这样不会报错
let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;

// null和undefined赋值给string
let str:string = "666";
str = null
str= undefined

// null和undefined赋值给object
let obj:object ={};
obj = null
obj= undefined

而 void 类型的变量不能赋值给其他类型的变量：

let u: void;
let num: number = u;
// Type 'void' is not assignable to type 'number'.

注：如果你在tsconfig.json指定了"strictNullChecks":true ，null 和 undefined 只能赋值给 void 和它们各自的类型

3.6 number和bigint

虽然number和bigint都表示数字，但是这两个类型不兼容。

let big: bigint =  100n;
let num: number = 6;
big = num;
num = big;

会抛出一个类型不兼容的 ts(2322) 错误

3.7 Number、String、Boolean、Symbol(基本包装对象)

原始类型 number、string、boolean、symbol 和首字母大写的 Number、String、Boolean、Symbol 的类型，后者是相应原始类型的包装对象，姑且把它们称之为对象类型。

从类型兼容性上看，原始类型兼容对应的对象类型，反过来对象类型不兼容对应的原始类型。

let num: number;
let Num: Number;
Num = num; // ok
num = Num; // ts(2322)报错

==不要使用对象类型来注解值的类型，这没有任何意义。==

四、object、Object 和 {}

object 代表的是所有非原始类型，也就是说我们不能把 number、string、boolean、symbol等原始类型赋值给 object。在严格模式下，null 和 undefined 类型也不能赋给 object。

JavaScript 中以下类型被视为原始类型：string、boolean、number、bigint、symbol、null 和 undefined

let lowerCaseObject: object;
lowerCaseObject = {}; 
lowerCaseObject = 1; // error
lowerCaseObject = 'a'; // error
lowerCaseObject = true; // error
lowerCaseObject = null; // error
lowerCaseObject = undefined; // error

Object 代表所有拥有 toString、hasOwnProperty 方法的类型，所有原始类型、非原始类型都可以赋给 Object。同样，在严格模式下，null 和 undefined 类型也不能赋给 Object。

let upperCaseObject: Object;
upperCaseObject = 1;
upperCaseObject = 'a'; 
upperCaseObject = true;
upperCaseObject = {}; 
upperCaseObject = null; // error
upperCaseObject = undefined; // error

从上面示例可以看到，Object 包含原始类型，object 仅包含非原始类型，所以 Object 似乎是 object 的父类型。实际上，Object 不仅是 object 的父类型，同时也是object 的子类型

type isLowerCaseObjectExtendsUpperCaseObject = object extends Object ? true : false; // true
type isUpperCaseObjectExtendsLowerCaseObject = Object extends object ? true : false; // true
upperCaseObject = lowerCaseObject;

{}空对象类型和大 Object 一样，也是表示原始类型和非原始类型的集合，并且在严格模式下，null 和 undefined 也不能赋给 {} 。

let ObjectLiteral: {};
ObjectLiteral = 1; 
ObjectLiteral = 'a'; 
ObjectLiteral = true; 
ObjectLiteral = null; // error
ObjectLiteral = undefined; // error
ObjectLiteral = {}; 
type isLiteralCaseObjectExtendsUpperCaseObject = {} extends Object ? true : false; // true
type isUpperCaseObjectExtendsLiteralCaseObject = Object extends {} ? true : false; // true
upperCaseObject = ObjectLiteral;
ObjectLiteral = upperCaseObject;

{}、Object 是比object 更宽泛的类型，{} 和Object 可以互相代替，用来表示原始类型（null、undefined 除外）和非原始类型；而object 则表示非原始类型。

Typescript基础知识（Typescript介绍、搭建TypeScript环境、基本数据类型、对象类型）