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

系列文章目录

引入一：Typescript基础引入（基础类型、元组、枚举）
引入二：Typescript面向对象引入（接口、类、多态、重写、抽象类、访问修饰符）
第一章：Typescript基础知识（Typescript介绍、搭建TypeScript环境、基本数据类型）
第二章：Typescript常用类型（任意值any、数组Array、函数Function、元组Tuple、类型推论、联合类型）

---

---

一、什么是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 代码。
• 安装命令： bash 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 空值void

JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数：

function alertName(): void {
    alert('My name is Tom');
}

声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null（只在 --strictNullChecks 未指定时）：

let unusable: void = undefined;

3.6 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.7 number和bigint

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

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

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