一、为什么要学习TypeScript

TypeScript 是一种由 Microsoft 开发的开源编程语言,实际上是 JavaScript 的一个超集. TypeScript 可以被编译成普通的 JavaScript 代码,从而可以在任何支持 JavaScript 的浏览器、操作系统和平台上运行. 但是,TypeScript与 JavaScript 不同的是,TypeScript 支持静态类型检查和编译时错误检测.

总之,TypeScript 是一种具有静态类型检查和先进语言特性的编程语言,可以提高代码的可维护性和可读性.

• TypeScript和JavaScript的对比:

• 学习TypeScript可以给我们带来什么?

1. 类型安全
2. 下一代JS特性
3. 完善的工具链
4. 更高的可维护性和可读性

因此,TypeScript不仅仅是一门语言,更是生产力工具

二、TypeScript基础

2.1 TypeScript基本数据类型

TypeScript具备严格的类型检查,清晰的代码结,优秀的类型推导,更好的可读性和可维护性.

1. Boolean 类型: 最基本的数据类型就是简单的 true/false 值,在 JavaScript 和 TypeScript 里叫做 boolean （其它语言中也一样）. 一般适用于判断的情景, 表示是或者不是.

 let isDone1: boolean = true;
 let isDone2: boolean = false;

2. Number 类型: 用于表示数字,包括整数和浮点数.浮点数类型number,大整数类型则是bigint. 同时,在TS中除了十进制和十六进制以外,还支持八进制,二进制.

 let decLiteral: number = 6;
 let hexLiteral: number = 0xf00d;
 let binaryLiteral: number = 0b1010;
 let octalLiteral: number = 0o744;
 let bigLiteral: bigint = 100n;

3. String 类型: 用于表示字符串,使用双引号（ " ）或单引号（ ' ）表示字符串.

 let color: string = 'blue';
 let name: string = "bob";
 name = "smith";

同时,在ts中同样支持模板字符串,这种字符串是被反引号包围（``）,并且以 ${ expr } 这种形式嵌入表达式

 let name: string = `Gene`;
 let age: number = 37;
 let sentence: string = `Hello, my name is ${ name }.
 ​
 I'll be ${ age + 1 } years old next month.`;

4. Enum 类型: enum 类型是对 JavaScript 标准数据类型的一个补充. 像 C# 等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字. 在Enum中默认是从0开始给予元素编号的,但是这种默认是可以更改的,使用的方式就是赋值,当然可以给一个元素赋值也就意味着每个元素都可以赋值,可以自行尝试一下.

 enum Color {Red, Green, Blue}; 
 let c: Color = Color.Green;

从1开始为元素编号:

 enum Color {Red = 1, Green, Blue}
 let c: Color = Color.Green;

5. Any 类型: 用于表示任意类型,有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型. 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库. 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查. 那么我们可以使用 any 类型来标记这些变量.

 let notSure: any = 4;
 notSure = "maybe a string instead";
 notSure = false; // okay, definitely a boolean

6. Unknown类型:当我们在写应用的时候可能会需要描述一个我们还不知道其类型的变量. 在这些情况下,我们想要让编译器以及未来的用户知道这个变量可以是任意类型. 这个时候我们会对它使用 unknown 类型.

 let notSure: unknown = 4;
 notSure = "maybe a string instead";
 // OK, definitely a boolean
 notSure = false;

7. Void 类型: 用于表示没有任何类型,从另外一个角度思考,void和any类型是相反的.通常适用于不需要返回值的函数中.

 function warnUser(): void {
     console.log("This is my warning message");
 }

8. Never 类型: 用于表示永不存在的值的类型.

 // 返回never的函数必须存在无法达到的终点
 function error(message: string): never {
     throw new Error(message);
 }
 ​
 // 推断的返回值类型为never
 function fail() {
     return error("Something failed");
 }
 ​
 // 返回never的函数必须存在无法达到的终点
 function infiniteLoop(): never {
     while (true) {
     }
 }

9. Array 类型: 用于表示数组,可以是相同类型的元素数组或者不同类型的元素数组.有两种的定义方式.

 let list: number[] = [1, 2, 3];
 let list: Array<number> = [1, 2, 3];

10. Tuple 类型: 用于表示元组,即长度和元素类型都已知的数组.

 // Declare a tuple type
 let x: [string, number];
 // Initialize it
 x = ['hello', 10]; // OK
 // Initialize it incorrectly
 x = [10, 'hello']; // Error
 ​

11. Null 和 Undefined类型

 // Not much else we can assign to these variables!
 let u: undefined = undefined;
 let n: null = null;

12. Object类型: object 表示非原始类型,也就是除 number , string , boolean , bigint , symbol , null 或 undefined 之外的类型.

 // 对象类型
 let obj: object = { name: 'Alice', age: 30 };
 ​
 // 数组类型
 let arr: object[] = [{ name: 'Bob', age: 25 }, { name: 'Charlie', age: 35 }];
 ​
 // 函数类型
 let func: object = function() { console.log('hello'); };
 ​
 // 类类型
 class Person {
   name: string;
   age: number;
 }
 ​
 let person: object = new Person();
 ​

2.2 有关于any是什么东西,如何使用:

在 TypeScript 中,any 是一种特殊的类型,它表示“任意类型”,即可以赋值为任何类型的值. 当一个变量被声明为 any 类型时,它就可以接受任何类型的值,无论是字符串、数字、数组、对象等等.

通常情况下,开发者在编写 TypeScript 代码时,应该尽量避免使用 any 类型,因为这会降低代码的可读性和可维护性. 但在某些情况下,由于某些原因（比如需要与第三方库进行交互,但是该库的类型定义不完整）,我们可能会需要使用 any 类型.

以下是一个简单的例子,展示了 any 类型的使用:

 let variable: any;
 ​
 variable = "hello"; // 可以赋值为字符串
 variable = 123; // 可以赋值为数字
 variable = { name: "John", age: 30 }; // 可以赋值为对象
 variable = [1, 2, 3]; // 可以赋值为数组
 ​

在上面的例子中,变量 variable 被声明为 any 类型,它可以接受任何类型的值,包括字符串、数字、对象和数组.

需要注意的是,当使用 any 类型时,编译器将无法对变量的类型进行静态检查和类型推导,因此在使用 any 类型时,需要特别小心,确保代码的正确性和可靠性.

总之,any 类型可以被用于表示任何类型的值,它具有灵活性,但是也容易导致类型错误和代码混乱,因此应该尽量避免使用.

2.3 any和Object

any 类型和 Object 类型是 TypeScript 中两种常用的通用类型,它们有一些相同点,也有一些不同点.

相同点:

1. 都可以代表任何类型的值,包括基本类型和对象类型.
2. 在编写代码时可以省略类型声明,提高了代码编写的灵活性.

不同点:

1. any 类型是 TypeScript 中的顶级类型,表示任何类型的值都可以赋给它,而 Object 类型只能赋值为非基本类型的值. 例如,any 类型可以赋值为字符串、数字、布尔等基本类型的值,而 Object 类型不能赋值为这些值,但可以赋值为对象、数组、函数等非基本类型的值.
2. any 类型在编译时不进行类型检查,因此可以在编写代码时忽略类型检查,但可能会导致运行时的类型错误. 而 Object 类型在编译时进行类型检查,提高了代码的可靠性和安全性.
3. any 类型可以随意调用任何属性和方法,而 Object 类型只能调用 Object 类型的属性和方法,不能随意调用其它类型的属性和方法. 这是由于 Object 类型只是一个类型声明,而实际上它并没有包含任何属性和方法.
4. any 类型在代码中的使用频率相对较高,因为它提供了最大的灵活性和通用性,可以用于处理一些类型不确定的场景. 而 Object 类型的使用频率较低,因为它的使用场景比较有限,主要用于限制类型范围,提高代码的可靠性和安全性.