什么是 TypeScript
在了解TypeScript之前，我们先来回顾一下JavaScript的知识点
function add(n,m){ console.log(n+m) } add(10,20); // 30 add(10,"20") // 1020
TypeScript是由微软开发的超集JavaScript的编程语言。它是一种静态类型语言，意味着在编写代码时，你必须指定每个变量的类型，而不是在运行时动态检测它们的类型。
TypeScript为JavaScript提供了一些高级功能，如类型检查和面向对象编程，使得JavaScript开发人员能够更轻松地编写大型应用程序TypeScript代码可以通过编译器转换为JavaScript代码，这样就可以在浏览器或任何其他JavaScript运行环境中运行。它与JavaScript的兼容性非常好，因此你可以在现有的JavaScript项目中使用TypeScript，或者在新项目中从头开始使用TypeScript开发
function add(n:number,m:number){ console.log(n+m) } add(10,20); add(10,"20"); // Argument of type 'string' is not assignable to parameter of type 'number'
TypeScript与JavaScript的关系
为了更好的理解，我们可以将三者看成是包含关系
安装并编译TypeScript
我们所编写的应用程序最终是需要运行在浏览器中的，但是浏览器能识别的语言是JavaScript而非TypeScript。那么问题来了，我们编写TypeScript的代码如何运行在浏览器中呢？答案：将TypeScript编译成JavaScript代码在运行在浏览器中！
安装 TypeScript
npm install -g typescript
以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了
检查是否安装成功： tsc -v
编译TypeScript
// hello.ts function add(n:number,m:number){ console.log(n+m) } add(10,20);
编译一个 TypeScript 文件很简单
tsc hello.ts
运行TypeScript
function sayHello(person: string) { return "Hello, " + person; } let user = "itxiaotong"; document.body.textContent = sayHello(user);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="./hello.js"></script> </body> </html>
变量声明
let 和 const 是 JavaScript 中变量声明的两个相对较新的概念
在某些方面 let 类似于 var ，但允许用户避免用户在 JavaScript 中遇到的一些常见“陷阱”
const 是一个常量，防止变量被重新赋值
由于 TypeScript 是 JavaScript 的扩展，该语言自然支持 let 和 const
Let声明
块级作用域
{ let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1
块级作用域解决的最大问题就是在JavaScript中令人头疼的闭包问题！
var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6
不存在变量提升
// var 的情况 console.log(foo); // 输出undefined var foo = 2; // let 的情况 console.log(bar); // 报错ReferenceError let bar = 2;
不允许重复声明
// 报错 function func() { let a = 10; let a = 1; }
Const声明
const 声明一个只读的常量。一旦声明，常量的值就不能改变
基本用法
const PI = 3.1415; PI // 3.1415 PI = 3; // TypeError: Assignment to constant variable.
温馨提示
Const同样不存在变量提升与重复声明
原始数据类型
JavaScript 的类型分为两种：原始数据类型和对象类型(也就是我们平时说的基本数据类型与引用数据类型)
温馨提示
在这里 null 和 undefined 我们依然归类为特殊类型
原始数据类型包括：布尔值、数值、字符串以及 ES6 中的新类型 Symbol和 ES10 中的新类型 BigInt
接下来我们说一说原始数据类型在TypeScript中如何使用
布尔值
最基本的数据类型就是简单的 true/false 值，在 JavaScript 和 TypeScript 里叫做 boolean
let isFlag: boolean = false;
数值
和 JavaScript 一样，TypeScript 里的所有数字都是浮点数或者大整数 。 这些浮点数的类型是 number 。 除了支持十进制和十六进制字面量，TypeScript 还支持 ECMAScript 2015 中引入的二进制和八进制字面量
let age: number = 6; // 十进制 let myColor: number = 0xf00d; // 十六进制 let flag: number = 0b1010; // 二进制 let test: number = 0o744; // 八进制
其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字
字符串
我们使用 string 表示文本数据类型。 和 JavaScript 一样，可以使用双引号（ " ）或单引号（ ' ）表示字符串
let myName: string = 'iwen';
你还可以使用 模版字符串
let myName: string = 'iwen'; let myAge: number = 25; // 模板字符串 let info: string = `Hello, my name is ${myName}.I'll be ${myAge + 1} years old next month.`;
数组
TypeScript 像 JavaScript 一样可以操作数组元素。 有两种方式可以定义数组。
第一种，可以在元素类型后面接上 [] ，表示由此类型元素组成的一个数组
第二种方式是使用数组泛型， Array<元素类型>
第一种：「类型 + 方括号」表示法
let list: number[] = [1, 2, 3];
第二种：数组泛型
let list: Array<number> = [1, 2, 3];
读取数组数据
无论是那种方式，读取的方式并没有发生变化
let list: number[] = [1, 2, 3]; console.log(list[1]) for(var i =0;i<list.length;i++){ console.log(list[i]) }
任意类型
在JavaScript中，我们习惯了数组中可以存在任何类型的数据，在 TypeScript中，依然也可以
let list: any[] = ['itxiaotong', 10, { website: 'https://itxiaotong.com' }];
元组
数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
简单的例子
定义一对值分别为 string 和 number 的元组
let info: [string, number] = ['iwen', 25]
使用元组的前提就是知道元素的数量和类型，这里顺序也是不能颠倒的
let info: [string, number] = [25,'iwen'] //报错
当访问一个已知索引的元素，会得到正确的类型
let info: [string, number] = ['iwen',25] console.log(info[0]) console.log(info[0].substring(1))
也可以只赋值其中一项
但是当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项
let info: [string, number] info = ["it",30] console.log(info[0])
越界
访问越界时，会直接报错
let info: [string, number] = ['iwen',25] console.log(info[2]) // 报错
添加元素越界时，也会报错
let info: [string, number] info = ["it",30,true] // 报错
任意值
有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any 类型来标记这些变量
什么是任意值类型
如果是一个普通类型，在赋值过程中改变类型是不被允许的
let age:number = 30 age = "Hello" // 报错
但如果是 any 类型，则允许被赋值为任意类型
let age:any = 30; age = "Hello";
未声明类型的变量
变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型
let age; // 默认不要给初始值 age = "Hello"; age = 30;
任意类型数组
在JavaScript中，我们习惯了数组中可以存在任何类型的数据，在TypeScript中，依然也可以
let list: any[] = ['itxiaotong', 10, { website: 'https://itxiaotong.com' }];
