这是我参与「第五届青训营」笔记创作活动的第7天

一、本堂课重点内容：

TypeScript 历史及定义解析
TypeScript 优势解读
TypeScript 练习工具

二、详细知识点介绍：

什么是TypeScript

TypeScript是微软开发的一种开源超集JavaScript语言。它在JavaScript的基础上加入了静态类型检查、类型推断和类型定义的功能。TypeScript的语法和JavaScript相似，能够轻松地与现有的JavaScript代码和工具集成。

TypeScript由微软开发，于2012年10月1日发布，并成为开源项目。它的主要目的是解决JavaScript缺乏静态类型检查和类型定义的问题，提高大型JavaScript项目的可维护性和可读性。现在已经成为一个流行的编程语言,在前端和后端都有广泛使用。

TypeScript基本语法

变量定义: 使用 let 或 var 关键字来定义变量，并使用:来声明变量类型
```
let name:string = "John Smith";
var age:number = 30;
```
函数定义: 使用 function 关键字来定义函数，并使用 : 来声明函数返回值类型，参数类型
```
function add(a: number, b: number): number {
    return a + b;
}
```

类定义: 使用 class 关键字来定义类，构造函数使用 constructor 关键字声明，属性和方法使用 public 关键字声明

class Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    getName(): string {
        return this.name;
    }
}

接口定义: 使用 interface 关键字来定义接口，声明一组属性和方法的类型
```
interface Shape {
    width: number;
    height: number;
    getArea(): number;
}
class Rectangle implements Shape {
    width: number;
    height: number;
    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }
    getArea(): number {
        return this.width * this.height;
    }
}
```
这段 TypeScript 代码定义了一个名为 Shape 的接口，它有三个属性：width、height 和 getArea。width 和 height 是数值类型，getArea 是一个返回值为数值类型的函数。

接着定义了一个名为 Rectangle 的类，它实现了 Shape 接口。Rectangle 类有两个属性：width 和 height，它们都是数值类型。还有一个构造函数，用来初始化 width 和 height 的值。

最后有一个名为 getArea 的函数，用来计算矩形面积，返回值为 width * height。

以上是TS的基本使用，下面将从不同角度来深入学习TS语法：

基础数据类型: TypeScript支持常见的基础数据类型，如数字、字符串、布尔值、数组、元组、枚举等。

let num: number = 12;
let str: string = "hello";
let isTrue: boolean = true;
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ["name", 20];
enum Color {Red, Green, Blue};
let c: Color = Color.Green;

对象类型: TypeScript支持对象类型，可以使用花括号{}表示一个对象。

let obj: {name: string, age: number} = {name: "John", age: 30};

函数类型: TypeScript支持函数类型，可以使用 function 关键字来定义函数，并使用 : 来声明函数返回值类型，参数类型

function add(a: number, b: number): number {
    return a + b;
}

函数重载: TypeScript支持函数重载，可以在同一个函数名下定义多个重载函数，通过不同的参数类型和数量来进行重载。

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
    return a + b;
}

数组类型: TypeScript支持数组类型，可以使用 [] 定义一个数组。

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

Typescript补充类型: TypeScript支持一些补充的类型，如 any、void、null、undefined。

let notSure: any = 4;
let noReturn = function(): void {};
let nullValue: null = null;
let undefinedValue: undefined = undefined;

Typescript泛型: TypeScript支持泛型，可以使用尖括号<>来定义泛型类型。

function identity<T>(arg: T): T {
    return arg;
}
let output = identity<string>("myString");

类型别名 & 类型断言: TypeScript支持类型别名，可以使用 type 关键字来定义一个类型别名，类型断言则可以使用 as 或尖括号<>来断言一个变量的类型。

type StringOrNumber = string | number;
let value: StringOrNumber = "hello";
let strLength = (value as string).length;

字面量: TypeScript支持字符串字面量和数字字面量类型，可以使用一个联合类型来限制字符串或数字的值。

let direction: "north" | "east" | "south" | "west" = "north";
let num: 1 | 2 | 3 | 4 | 5 = 2;

三、实践练习例子：

in的使用: in 是 TypeScript 中的一个关键字，用于类型保护。它可以用来判断一个变量是否属于一个类型。

type TypeName = "string" | "number" | "boolean";

function getType(value: any): TypeName {
  if (typeof value === "string") return "string";
  if (typeof value === "number") return "number";
  if (typeof value === "boolean") return "boolean";
}
let value: any = "hello";
if("string" in value) {
    console.log("string type");
}

这段 TypeScript 代码定义了一个名为 TypeName 的类型别名，它是 "string"、"number"、"boolean" 三种类型的联合类型。

然后定义了一个名为 getType 的函数，接受一个 any 类型的参数 value，并返回 TypeName 类型。它通过判断 value 的类型来返回 "string"、"number"、"boolean" 中的一种。

最后定义了一个变量 value，并将其赋值为字符串 "hello"。然后通过 in 运算符来判断 "string" 是否在 TypeName 中，如果是，则打印 "string type"。

这段代码使用了 TypeScript 中的类型联合，可以通过 in 运算符来判断一个值是否在指定的类型联合中。这样可以更好地控制类型，并确保程序的正确性。

四、课后个人总结：

TypeScript 是一种由微软开发的静态类型、强类型语言。它是 JavaScript 的超集，主要用于编写大型应用程序。TypeScript 的语法基于 ECMAScript，但添加了类型系统、接口、模块等高级特性，使得代码更加稳定和安全。它的发展也得到了广泛的关注和支持。

TypeScript 与 JavaScript 的主要区别在于前者引入了静态类型检查机制，这样可以在开发过程中发现错误，并且提高代码的可读性和可维护性。

使用 VSCode 作为 TypeScript 的编辑器和调试工具，可以方便地编写和调试 TypeScript 代码。在 VSCode 中，我们可以使用内置的类型检查功能来及时发现错误，并且还支持自动补全、代码提示等功能，帮助我们更高效地编码。

在学习 TypeScript 的过程中，我们还学习了 in 运算符的用法，它可以帮助我们在编写代码时确保类型的正确性，并且能够更好地控制类型。

总的来说，学习 TypeScript 对我的编程能力有了很大的提高，我更加喜欢使用它来编写应用程序，因为它能够帮助我们更早地发现错误，并且让我们的代码更加稳定、可读、可维护。

五、引用参考：

TypeScript的发展与基本语法

TypeScript 的发展与基本语法 ｜ 青训营笔记