TypeScript学习笔记

一、TypeScript简介

TypeScript是一种编程语言，可以看作是JavaScript的超集。它扩展了JavaScript并添加了静态类型检查的功能。静态类型检查可以在编译时发现和修复常见的错误，提高代码的可靠性和可维护性。

TypeScript具有与JavaScript相似的语法和语义，开发人员可以使用它来编写JavaScript应用程序。但与JavaScript不同的是，TypeScript引入了类型注解的概念，开发人员可以明确地声明变量、函数和对象的类型。这使得代码更易于理解和维护，并且可以在开发过程中提供更强大的代码提示功能。

TypeScript还支持最新的ECMAScript标准，并可以编译为纯JavaScript代码，可以在各种JavaScript运行环境中运行。

二、 TypeScript知识点

2.1 静态类型检查:

TypeScript通过在编译时进行类型检查来提高代码的可靠性和可维护性。您可以为变量、函数、对象等声明类型，并确保变量在使用之前具有正确的类型。下面是一个简单的示例：

let num: number = 10;
num = 'hello'; // Error: 不能将字符串赋值给数字类型的变量

在上面的示例中，我们将num的类型声明为number，但当我们尝试将字符串赋值给num时，TypeScript会发出类型错误提示。

2.2 类型注解:

类型注解是在变量、函数、参数等声明中指定类型的方法。它可以提供代码的可读性和类型安全性，并且可以提供更好的开发工具支持。以下是一个简单的示例：

function greet(name: string): string {
  return 'Hello, ' + name;
}

const message: string = greet('John');
console.log(message); // 输出：Hello, John

在上面的示例中，我们使用类型注解指定了name参数的类型为string，并指定函数的返回类型为string。这样，在调用greet函数时，TypeScript会检查传递的参数类型是否正确，并确保函数返回的是字符串类型。

2.3 基本类型和变量声明：

TypeScript支持JavaScript的基本类型，如number、string、boolean、object、array等。你可以使用这些类型来声明变量的类型。
TypeScript还引入了新的类型概念，如enum、tuple、any、void等。
示例代码：

let num: number = 123;
let message: string = 'Hello';
let isValid: boolean = true;
let user: { firstName: string, lastName: string } = { firstName: 'John', lastName: 'Doe' };
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ['TypeScript', 2021];

• 布尔型 (boolean): 表示逻辑值，只能为true或false。

let isActive: boolean = true;

• 数字型 (number): 表示数值，可以是整数或浮点数。

let age: number = 25;

• 字符串型 (string): 表示文本数据，可以是单引号或双引号包裹的字符序列。

let name: string = "John Doe";

• 数组型 (array): 表示一组相同类型的值。使用类型加上方括号[]来声明数组类型，并可以使用泛型表示特定类型的数组。

let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["John", "Jane", "Doe"];

• 元组型 (tuple): 表示固定长度和类型的数组。每个元素的类型是已知的，但不必都是相同的类型。

let person: [string, number] = ["John", 25];

• 枚举型 (enum): 表示一组命名的常量值。默认从0开始为每个成员进行编号，也可以手动指定编号。

enum Color {
  Red,
  Green,
  Blue,
}

let color: Color = Color.Green;

• 任意型 (any): 表示任意类型，可以是任何类型的值。

let data: any = "Hello World";

• 空值 (void): 表示没有返回值的函数或表达式。

function sayHello(): void {
  console.log("Hello!");
}

• Null和Undefined: 表示空值或未定义的值。

let value1: null = null;
let value2: undefined = undefined;

• 对象型 (object): 表示非原始类型（除了number、string、boolean、symbol、null和undefined之外的类型）。

let user: object = { name: "John", age: 25 };

2.4. 函数和箭头函数：

TypeScript可以通过函数声明和箭头函数来定义函数类型和参数类型。
示例代码：

function add(x: number, y: number): number {
  return x + y;
}

const multiply = (x: number, y: number): number => {
  return x * y;
};

• 函数声明和调用：

在 TypeScript 中，您可以使用 function 关键字来声明函数，并可以指定参数类型和返回值类型。您还可以使用可选参数和默认参数来提供更灵活的函数定义。

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

let result: number = add(3, 4);

• 函数类型：

函数类型描述了函数的参数类型和返回值类型。可以使用函数类型作为变量、参数、属性或返回值的类型。

type MathOperation = (x: number, y: number) => number;

let multiply: MathOperation = function(x, y) {
  return x * y;
};

• 箭头函数：

TypeScript 还引入了箭头函数的概念，它是一种更简洁的函数写法，具有隐式的返回值和词法作用域的 this 绑定。

let multiply: MathOperation = (x, y) => x * y;

• 高阶函数：

在 TypeScript 中，您可以编写高阶函数，即接受一个或多个函数作为参数或返回一个函数的函数。

function applyOperation(x: number, y: number, operation: MathOperation): number {
  return operation(x, y);
}

let result: number = applyOperation(5, 2, (a, b) => a + b);

• 函数重载：

TypeScript 还支持函数重载，即为同一个函数提供多个不同的类型签名。

function processArray(arr: number[]): number[];
function processArray(arr: string[]): string[];
function processArray(arr: any[]): any[] {
  // 对数组进行处理的逻辑
}

上述代码中，processArray 函数根据不同的参数类型提供了不同的返回类型。

2.5 类和接口：

TypeScript支持面向对象编程的概念，可以使用class关键字定义类，并使用interface关键字定义接口。
类可以包含属性、方法和构造函数，而接口可以描述类的结构和行为。
示例代码：

interface Shape {
  getArea(): number;
}

class Circle implements Shape {
  constructor(private radius: number) {}
  
  getArea(): number {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.getArea()); // 输出78.53981633974483

• 类的声明和实例化：

在 TypeScript 中，您可以使用 class 关键字来声明一个类。类可以包含属性，方法和构造函数，并且还可以继承其他类。

class Person {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

let person = new Person("John");
person.sayHello();

• 继承和多态：

TypeScript 支持类之间的继承关系。一个类可以继承另一个类的属性和方法，并且可以通过方法的重写实现多态性。

class Student extends Person {
  studentId: number;
  
  constructor(name: string, studentId: number) {
    super(name);
    this.studentId = studentId;
  }
  
  sayHello() {
    console.log(`Hello, my name is ${this.name} and my student ID is ${this.studentId}`);
  }
}

let student = new Student("Alice", 12345);
student.sayHello();

• 接口的声明：

接口用于描述对象的结构，指定属性和方法的名称和类型。通过实现接口，类可以强制符合接口的要求。

interface Shape {
  color: string;
  area(): number;
}

class Circle implements Shape {
  color: string;
  radius: number;
  
  constructor(color: string, radius: number) {
    this.color = color;
    this.radius = radius;
  }
  
  area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle("red", 5);
console.log(circle.area());

• 接口的可选属性和只读属性：

接口的属性可以是可选的，使用 “?” 标记。还可以将属性声明为只读的，使用 “readonly” 关键字。

interface Person {
  name: string;
  age?: number; // 可选属性
  readonly id: number; // 只读属性
}

let person: Person = {
  name: "John",
  id: 12345
};

person.age = 30;
person.id = 67890; // Error: 无法分配到 "id" ，因为它是只读属性。

• 接口的函数类型：

接口还可以描述函数类型，指定函数的参数和返回值类型。

interface MathOperation {
  (x: number, y: number): number;
}

let add: MathOperation = function(x, y) {
  return x + y;
};

console.log(add(3, 4));

2.6 模块和命名空间：

TypeScript支持模块化编程和命名空间（namespace），可以将代码组织成独立的模块。
使用export关键字导出模块，使用import关键字导入模块。
示例代码：

// module.ts
export const PI = 3.14159265359;

// main.ts
import { PI } from './module';

console.log(PI); // 输出3.14159265359

• 模块的声明和导出：

在 TypeScript 中，您可以使用 module 或 namespace 关键字来声明模块或命名空间。模块用于在文件内部组织代码，而命名空间用于在全局范围内组织代码。通过使用 export 关键字，您可以将模块中的函数、类、接口等导出，以便在其他文件中使用。

// Module: Math.ts
export function add(x: number, y: number): number {
  return x + y;
}
// Module: Geometry.ts
export namespace Geometry {
  export function calculateArea(radius: number): number {
    return Math.PI * radius ** 2;
  }
}

• 模块的导入：

要在另一个文件中使用导出的模块，您可以使用 import 语句进行导入。您可以选择导入整个模块或只导入特定的成员。

// Module: App.ts
import {add} from "./Math"; // 导入单个函数
import {Geometry} from "./Geometry"; // 导入整个命名空间

console.log(add(3, 4));
console.log(Geometry.calculateArea(5));

• 模块的别名：

如果您想为导入的模块或命名空间指定一个新的名称，您可以使用 as 关键字为其创建一个别名。

import {add as addition} from "./Math";

console.log(addition(3, 4));

• 默认导出：

在一个模块中，您可以指定一个默认导出，这样在导入模块时就可以不用指定成员的名称。

// Module: Math.ts
export default function add(x: number, y: number): number {
  return x + y;
}

// Module: App.ts
import add from "./Math"; // 不需要花括号包裹

console.log(add(3, 4));

三、TypeScript学习总结

在学习TypeScript的过程中，我有一些个人的学习感悟。首先，我觉得TypeScript相比于纯JavaScript更强大和可靠。通过类型注解和类型检查，我能够在开发过程中捕捉到很多潜在的错误，避免了一些常见的bug。这种类型安全和可预测性让我在编码过程中更加自信，也减少了调试的时间。
其次，我发现学习TypeScript对我的代码组织和维护也非常有帮助。通过使用接口和类，我可以更清晰地定义和描述数据结构和对象的形状，提高了代码的可读性和可维护性。此外，使用TypeScript还使我能够更好地理解和使用第三方库和框架，因为我可以查看它们的类型定义文件，这为我提供了更好的开发体验。
另外，学习TypeScript还推动了我对JavaScript的深入理解。TypeScript的语法和特性都是建立在JavaScript的基础上的，学习TypeScript不仅让我更加熟悉JavaScript的语法和API，还让我了解到JavaScript中一些隐式的行为和常见的陷阱。这使我能够编写更高质量和可维护的JavaScript代码。
总体而言，学习TypeScript是一项非常有价值的投资。它提供了更好的代码质量和可维护性，减少了错误和调试的时间。通过使用TypeScript，我感受到了静态类型的优势，并且对JavaScript有了更深入的理解。我将继续不断学习和应用TypeScript，以提高自己的开发技能和代码质量。