深入浅出TypeScript ｜青训营TypeScript为JavaScript增加了静态类型检查和更强大的工具支持，

TypeScript为JavaScript增加了静态类型检查和更强大的工具支持，使得JavaScript应用程序更加可靠、易于维护和扩展。

1. 定义

TypeScript是一种静态类型的编程语言，它通过在JavaScript的基础上添加类型注解来提供静态类型检查功能。TypeScript代码经过编译后会生成纯粹的JavaScript代码，可以在任何支持JavaScript的环境中运行。

2. 相对于JavaScript的优势

静态类型检查：TypeScript能够在编译阶段捕获一些常见错误，如类型不匹配、未定义的属性或方法等，减少运行时错误。
强大的工具支持：TypeScript提供了丰富的开发工具，如智能代码补全、代码导航、重构等，显著提高开发效率。
更好的可维护性和扩展性：静态类型和面向对象的特性使得代码更易于理解、修改和扩展，减少了调试和维护的困难。

3. 函数类型： 在TypeScript中，可以为函数定义参数和返回值的类型，并且支持可选参数和默认参数。

示例代码：

function greet(name: string): void {
  console.log("Hello, " + name);
}

greet("Alice");

4. 接口

接口用于定义对象的结构和类型，可以强制要求对象包含特定的属性和方法。

示例代码：

interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

function greet(person: Person): void {
  console.log("Hello, " + person.name);
  person.sayHello();
}

const alice: Person = {
  name: "Alice",
  age: 25,
  sayHello() {
    console.log("Hi there!");
  }
};

greet(alice);

5. 修饰符

通过使用修饰符，可以限制类的属性和方法的访问权限，如public、private和protected。

示例代码：

class Animal {
  private name: string;
  
  constructor(name: string) {
    this.name = name;
  }

  public move(distance: number): void {
    console.log(this.name + " moved " + distance + " meters.");
  }
}

const cat = new Animal("Tom");
cat.move(10);

6. 类

TypeScript支持面向对象编程，可以定义类、继承和多态等概念。

示例代码：

class Shape {
  protected color: string;

  constructor(color: string) {
    this.color = color;
  }

  public draw(): void {
    console.log("Drawing a shape with color: " + this.color);
  }
}

class Circle extends Shape {
  private radius: number;

  constructor(color: string, radius: number) {
    super(color);
    this.radius = radius;
  }

  public draw(): void {
    console.log("Drawing a circle with color: " + this.color + ", radius: " + this.radius);
  }
}

const circle = new Circle("red", 5);
circle.draw();

7. 高级类型

TypeScript支持高级类型，如联合类型、交叉类型和类型别名等，用于更精确地描述数据类型。

示例代码：

type NumberOrString = number | string;

function printValue(value: NumberOrString): void {
  console.log("Value: " + value);
}

printValue(10);
printValue("Hello");

8. 实战-声明文件

TypeScript通过声明文件（.d.ts）来描述现有JavaScript库或模块的类型信息，使得在使用第三方库时能够获得代码补全和类型检查的支持。

示例代码：

// lodash.d.ts
declare function chunk<T>(array: T[], size: number): T[][];

// main.ts
import { chunk } from 'lodash';

const numbers: number[] = [1, 2, 3, 4, 5];
const chunks: number[][] = chunk(numbers, 2);
console.log(chunks); // 输出：[[1, 2], [3, 4], [5]]

深入浅出TypeScript ｜ 青训营

深入浅出TypeScript ｜青训营