当前位置：首页 > news >正文

40、web前端开发之Vue3保姆教程(四)

news 来源：原创 2025/6/16 10:51:35

五、TypeScript脚本

1、TypeScript 简介

1. 简介

TypeScript 是由微软开发的一种开源编程语言，它是 JavaScript 的超集，添加了可选的静态类型和基于类的面向对象编程。TypeScript 最终会被编译成 JavaScript，因此可以在任何支持 JavaScript 的环境中运行。

2. 优势

静态类型检查：可以在编译时发现并纠正错误，减少运行时错误。
更好的工具支持：IDE 可以提供更好的代码补全、重构和导航功能。
面向对象特性：支持类、接口、泛型等，帮助构建更复杂的应用。
可维护性：明确的类型定义使得代码更易读、更易维护。

3.类型系统

TypeScript 的类型系统允许开发者为变量、函数参数、返回值等定义明确的类型。类型系统包括基本类型（如 number、string、boolean）、对象类型、数组类型、联合类型、交叉类型等。

优点：

类型安全：减少类型错误，提高代码的健壮性。
自动补全：IDE 可以根据类型定义提供智能补全。
文档化：类型定义本身就是代码的文档。
可重构性：类型信息使得代码重构更加安全。

4. TypeScript 和 JavaScript 的关系

TypeScript 是 JavaScript 的超集，意味着所有的 JavaScript 代码都是有效的 TypeScript 代码。TypeScript 添加了类型注解、接口、类等特性，使得开发者可以在编译阶段捕获更多错误。

2、TypeScript 基本语法

TypeScript 的基本语法包括：

类型注解：例如 let name: string = "John";
接口：定义对象的结构，例如 interface Person { name: string; age: number; }
类：支持面向对象编程，例如 class Animal { constructor(public name: string) {} }
函数：可以指定参数和返回值的类型，例如 function greet(name: string): string { return Hello, ${name}; }

1.基本数据类型和变量声明

TypeScript 的基本数据类型包括：

布尔值：boolean
数字：number
字符串：string
数组：number[] 或 Array<number>
元组：[string, number]
枚举：enum Color { Red, Green, Blue }
任意类型：any
空值：null 和 undefined

变量声明示例：

let isDone: boolean = false;
let age: number = 25;
let name: string = "John";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["age", 25];

2. 函数、类等高级语法的 TypeScript 实现

函数：

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

类：

// 定义一个 TypeScript 类
class Person {
   
  // 公共属性 (public 可以省略，默认就是 public)
  public name: string;

  // 私有属性 (只能在类内部访问)
  private age: number;

  // 受保护的属性 (可以在类及其子类中访问)
  protected gender: string;

  // 构造函数，用于初始化对象的属性
  constructor(name: string, age: number, gender: string) {
   
    this.name = name;
    this.age = age;
    this.gend