初尝TypeScript

TypeScript是什么？

TypeScript是什么？从技术上讲TypeScript就是具有静态类型的 JavaScript 。就是在JavaScript的基础上着重强调了类型，但是在编译之后会转换为纯JavaScript，最终在浏览器执行的也是JavaScript。所以它并不依赖浏览器的支持，其次TypeScript是JavaScript的超集，所以它支持JavaScript的所有语法，且在兼容性方面也无需担心。

---

为什么要使用TypeScript？

1.使得代码重构更加容易

2.面对大型项目时不会显得混乱，更加容易阅读

3.能够避免因为类型导致的经典错误（'undefined' is not a function.）

---

如何使用TypeScript？

从技术上讲，任何JavaScript文件都可以是TypeScript文件，因此您只需将文件扩展名从.js切换到.ts即可。

---

TypeScript的基本类型

布尔值（boolean）：最基本的数据类型是简单的真/假值，JavaScript 和 TypeScript 称之为值。

let isDone: boolean = false;

number：与JavaScript一样，TypeScript中的所有数字要么是浮点值，要么是BigIntegers。这些浮点数获取类型，而 BigIntegers 获取类型。除了十六进制和十进制文本之外，TypeScript 还支持 ECMAScript 2015 中引入的二进制和八进制文本。

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

string：使用类型来引用这些文本数据类型。就像JavaScript一样，TypeScript也使用双引号或单引号来将字符串数据括起来。

let color: string = "blue";
color = 'red';

还可以使用模板字符串，这些字符串可以跨越多行并具有嵌入式表达式。这些字符串由反引号字符包围。

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`;

可以这么声明上述例子：

let sentence: string =
  "Hello, my name is " +
  fullName +
  ".\n\n" +
  "I'll be " +
  (age + 1) +
  " years old next month.";

数组：

TypeScript，像JavaScript一样，允许你使用值数组。数组类型可以通过以下两种方式之一编写。在第一种情况下，使用元素的类型后跟来表示该元素类型的数组：[]

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

第二种方法使用泛型数组类型：Array<elemType>

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

元组：

元组类型使用固定数量的元素来表示数组，这些元素的类型是已知的，但不必相同。

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

枚举

提高代码可维护性，统一维护某些枚举值

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

默认情况下，枚举从开始成员进行编号。可以通过手动设置其成员之一的值来更改此设置。例如以下例子：

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

或者，甚至可以手动设置枚举中的所有值：

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

枚举的一个方便功能是，还可以在枚举中从数值转到该值的名称。例如，如果我们有值，但不确定在上面的枚举中映射到什么，我们可以查找相应的名称

enum Color {
  Red = 1,
  Green,
  Blue,
}
let colorName: string = Color[2];

// Displays 'Green'
console.log(colorName); 

unknow：

如果我们正在编写的时候还不知道的类型变量，或者希望能够接受所有类型的值，则可使用unknow

any：

在某些情况下，并非所有类型信息都可用，或者其声明将花费太多的工作量。想要不让TypeScript进行类型检查，可使用any

any与unknow的区别：

在你想要转义类型的时候，any都允许你将任何JavaScript变量赋给它。它经常用于对尚未检查且类型未知的传入变量时。

unknow在显式类型检查之前，它不允许您对变量执行任何操作。

void：

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是void：

function warnUser(): void { alert("This is my warning message"); }

断言

有时候，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。在“相信我，我知道我在干什么！我比你更清楚它是个啥”的时候，你可以使用断言。

类型断言有两种形式。 其一是“尖括号”语法：

let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length;

另一个为as语法：

let someValue: any = "this is a string"; let strLength: number = (someValue as string).length;

两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 as 语法断言是被允许的。