Typescript

---

一、Javascript

TypeScript是JavaScript的超集，它扩展了JavaScript的语法和功能，同时增加了类型系统和其他工具，使得代码更加可读性和可维护性。

text::JavaScript

---

二、补充

对Js文章的补充，其中有一些不一定是Ts的特性。

1 限定类型

Ts特性。

// 变量名后加冒号，再指定类型
const url: string = "https://www.baidu.com";

// 限定值
const sex: "male" | "female";

// 限定函数返回类型
addData(data: number): void{}

2 限定修饰符

Ts特性。

public表示公共变量，可以被任何地方访问。

private表示私有变量，只能在类内部访问，不能被子类或实例访问。

protected表示受保护变量，只能在类内部和子类中访问，不能被实例访问。

class Person {
    public name: string; // 公共变量
    private age: number; // 私有变量
    protected gender: 'male' | 'female'; // 受保护变量

    constructor(name: string, age: number, gender: 'male' | 'female') {
        this.name = name;
        this.age = age;
        this.gender = gender;
  }
}

class Student extends Person {
    constructor(name: string, age: number, gender: 'male' | 'female', public studentId: string) {
        super(name, age, gender);
  }
    public sayHello() {
        console.log(`Hello, my name is ${this.name}, and my student ID is ${this.studentId}.`);
        // console.log(`My age is ${this.age}`); // 错误，age是私有变量，不能在子类中访问
        console.log(`My gender is ${this.gender}`); // 正确，gender是受保护变量，可以在子类中访问
    }
}

const student1 = new Student('Alice', 20, 'female', '001');
console.log(student1.name); // 'Alice'
// console.log(student1.age); // 错误，age是私有变量，不能在实例中访问
// console.log(student1.gender); // 错误，gender是受保护变量，不能在实例中访问
console.log(student1.studentId); // '001'


// 静态属性与静态方法
class MathUtils {
    static PI = 3.14;
    static add(a: number, b: number) {
    	return a + b;
    }
    
    static multiply(a: number, b: number) {
        return a * b;
    }

    static calculateCircumference(radius: number) {
        return 2 * this.PI * radius;
    }
}
console.log(MathUtils.add(1, 2)); // 3
console.log(MathUtils.multiply(3, 4)); // 12
console.log(MathUtils.calculateCircumference(2)); // 12.56

3 函数重载

Ts特性。

在Js中后面的定义的函数会覆盖掉前面的函数。

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

console.log(add(1, 2));           // 输出: 3
console.log(add("hello", "world")); // 输出: "helloworld"

4 接口

Js、Ts中都存在。

接口中的内容都要在类中实现。

如果有不确定的属性要实现，可以在属性名后加一个?，这样它就不一定要被实现。

// 定义接口
interface Person {
  name: string;
  age: number;
  gender: 'male' | 'female' | 'other';
  sayHello(): void;
}

// 实现接口
class Student implements Person {
    name: string;
    age: number;
    gender: 'male' | 'female' | 'other';
    studentId: string;
    
    constructor(name: string, age: number, gender: 'male' | 'female' | 'other', studentId: string) {
        this.name = name;
        this.age = age;
        this.gender = gender;
        this.studentId = studentId;
  }

    sayHello() {
    	console.log(`Hello, my name is ${this.name}, and my student ID is ${this.studentId}.`);
  }
}

const student1 = new Student('Alice', 20, 'female', '001');
// Hello, my name is Alice, and my student ID is 001.
student1.sayHello(); 

5 断言

Ts特性。

明确告诉编译器某个类型存在

// 明确告诉编译器类型存在（as）
const button = document.querySelector('button') as HTMLButtonElement;

6 异步

Js、Ts中都存在。

// 基础

// 案例
function getData(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Hello, world!");
    }, 2000);
  });
}

async function main() {
  console.log("Start");

  try {
    const result = await getData();
    console.log(result);
  } catch (error) {
    console.error("Error: ", error);
  }

  console.log("End");
}

main();

7 泛型

Ts特性。

T表示任意类型，用尖括号包裹，使用时需要补充类型。

identity<T>(arg: T): T {
    return arg;
}

console.log(this.identity<Number>(123));
console.log(this.identity<string>("hello"));