JavaScript是最广泛使用的网页开发编程语言。但它缺乏类型检查支持，这是一种现代编程语言的基本特性。

JavaScript最初被设计为一种简单的脚本语言。它的宽松特性和缺乏关键的 面向对象编程 (OOP) 特性给开发者带来了一定的挑战：

  1. 文档和自动补全有限。

  2. 无法利用OOP概念。

  3. 缺乏类型安全，导致运行时错误。

  4. 重构和维护的挑战。

  5. 缺少接口和集成点。

TypeScript解决了这些问题。它的构建旨在使JavaScript成为一种更完善的现代编程语言。它有助于改善开发者体验，提供许多有用的功能，并提高互操作性。

本文将深入探讨TypeScript基础。我将教你如何安装TS并设置项目。然后我们将涵盖一些重要的基础知识。你还将了解TypeScript如何编译为JavaScript，从而使其与浏览器和Node.js环境兼容。

我们将涵盖的内容：

先决条件

在深入学习TypeScript之前，了解并掌握一些概念是非常重要的，以确保学习之旅更加顺利。虽然TypeScript通过静态类型和其他强大的特性增强了JavaScript，但它建立在核心JavaScript原则之上。以下是您应该了解的内容：

1. JavaScript基础知识

TypeScript是JavaScript的超集，意味着它扩展了JavaScript的功能。要有效地学习TypeScript，您应首先扎实掌握JavaScript基础知识，包括：

  • 语法和数据类型：了解如何声明变量（let、const和var）、处理原始类型（字符串、数字、布尔值）以及管理数组和对象。

  • 控制流：熟悉循环（for、while）、条件语句（if-else、switch）以及它们如何控制程序执行。

  • 函数: 知道如何定义和调用函数，处理参数，返回值，并理解箭头函数和闭包等概念。

  • 面向对象编程（OOP）: 学习创建和操作对象，类和继承。 TypeScript 的基于类的特性在 JavaScript 的 OOP 模型上有很大的建设性。

  • 错误处理: 理解如何使用 try-catch 块来处理运行时错误。

2. 基本的HTML和CSS

虽然 TypeScript 主要与 JavaScript 一起使用，但对HTML和CSS有基本的了解是有帮助的，尤其是对前端开发人员。这是因为大多数 TypeScript 项目涉及创建或操作Web应用程序。

  • HTML: 理解如何使用标签，属性和元素来构建网页。

  • CSS: 学习如何使用选择器、属性和值来设置元素样式。熟悉像Bootstrap这样的CSS框架会是一个优势。

3. 熟悉开发工具

  • 一个代码编辑器，比如拥有出色的TypeScript支持和扩展功能的Visual Studio Code。

  • Node.js和npm: 了解如何搭建开发环境、在浏览器之外运行JavaScript，并使用npm（Node包管理器）安装依赖。

  • 版本控制（Git）: 学习Git的基础知识，以便在TypeScript项目上跟踪更改并有效合作。

入门指南 – 如何安装TypeScript

要开始使用 TypeScript 工作，您需要安装它。这不是一个复杂的过程。安装好 TypeScript 后，您可以利用它的功能来创建高质量的解决方案。

您可以通过两种方式安装 TS：

  1. 全局安装：使您可以从任何目录访问编译器。要全局安装 TypeScript，请执行以下命令：
npm install -g typescript

此命令利用了 Node.js 包管理器npm。它会全局安装 TypeScript，使该命令可以在命令行中使用。

  1. 本地安装：在这种情况下，TypeScript 仅在特定项目中安装。这种方法确保团队成员之间的版本兼容性和一致性。要在本地安装 TypeScript，请执行以下命令：
npm install typescript --save-dev

与全局安装不同，此命令将 TypeScript 安装为开发依赖项。tsc 命令仅供特定项目使用，即运行命令的具体项目。

您现在能无缝安装 TypeScript 吗？希望如此！

如何组织您的 TypeScript 项目

组织 TypeScript 项目涉及使用有意义的名称和目录结构化文件，分离关注点，并使用模块进行封装和重用。

文件扩展名.ts表示 TypeScript 文件，其中包含将转换为 JavaScript 以便执行的代码。

TypeScript还支持.d.ts文件，也称为类型定义文件。这些文件提供有关外部JavaScript库或模块的类型信息，有助于更好地进行类型检查和代码补全，以及提高开发效率。以下是一个良好的TS项目结构示例：

my-ts-project/
├── src/ 
│   ├── components/ 
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── Modal.tsx
│   ├── services/ 
│   │   ├── api.ts
│   │   └── authService.ts
│   ├── utils/ 
│   │   ├── helpers.ts 
│   │   └── validators.ts
│   ├── models/ 
│   │   ├── User.ts
│   │   └── Product.ts
│   ├── index.tsx 
│   └── styles/ 
│       ├── global.css
│       └── theme.css
├── public/ 
│   ├── index.html
│   └── assets/ 
│       ├── images/
│       └── fonts/
├── tsconfig.json
└── package.json

让我们来了解这里发生了什么：

  1. src/：该目录包含项目的所有源代码。

    • components/：包含可重用的UI组件（例如，Button，Input，Modal）。使用.tsx（TypeScript JSX）允许您以类型安全的方式编写JSX。

    • services/：存放与外部API交互或处理应用程序逻辑的服务（例如，用于API调用的api.ts，用于身份验证的authService.ts）。

    • utils/：包含用于常见任务的辅助函数和实用程序类（例如，用于日期格式化的helpers.ts，用于输入验证的validators.ts）。

    • models/：定义TypeScript接口或类以表示数据结构（例如，User.ts，Product.ts）。

    • index.tsx：应用程序的主入口点。

    • styles/：包含CSS或其他样式文件。

  2. public/：此目录包含不需要 TypeScript 处理的静态资产（例如 HTML、图像、字体）。

  3. tsconfig.json：TypeScript 配置文件，指定编译器选项。

  4. package.json：项目清单文件，列出依赖项、脚本和其他项目元数据。

关于命名约定的简要说明，以便您理解：

  • 类名使用 PascalCase（例如，User、Product）。

  • 函数名和变量名使用 camelCase（例如，getUser、firstName）。

  • 对文件和目录使用有意义且描述性的名称。

这种结构促进了模块化、可重用性和更好的组织，使您的 TypeScript 项目更易于维护和扩展。

合理组织您的 TS 项目增强了代码的可维护性、可读性以及 TypeScript 开发工作流中的协作能力。

TypeScript 中的类型如何工作

与其他任何类型化编程语言一样，TypeScript 依赖于类型定义，一般称为 类型。

类型是编程中用于定义变量、方法参数和代码中返回值的数据类型的术语。

类型允许您在开发过程中快速及早捕捉错误，这是一种有助于保持更好代码质量的超能力。

要在 TypeScript 中指定类型，请在变量名称后加上冒号（:）和所需的数据类型。以下是一个示例：

let age: number = 2;

上述变量被声明为 number 类型。在 TypeScript 中，这意味着它只能存储数字，其他任何东西都不能存储。

类型技术

在 TypeScript 中，数据可以通过两种主要方式进行类型化：

  1. 静态类型：静态类型是指在开发过程中明确指定代码中变量和其他实体的数据类型。TypeScript 编译器强制执行这些类型定义，从而帮助及早捕捉与类型相关的错误。例如：
let age: number = 25;

在这里，变量age被明确声明为number类型。这确保只能将数值赋给它，从而降低运行时错误的风险。

  1. 动态类型：TypeScript中的动态类型指的是变量的类型在运行时确定的情况。这可能发生在将变量分配为any类型时，允许它们保存任何类型的值。TypeScript不会对涉及any类型变量的操作进行类型检查。
let value: any;
value = 25; // 数字
value = "Hello"; // 字符串

尽管TypeScript主要是一种静态类型语言，但在特定情况下动态类型仍然可能很有用，例如：

  • 与缺乏类型定义的第三方库一起工作。

  • 与动态结构化数据进行交互（例如，来自具有未知结构的API的JSON响应）。

  • 快速原型设计或在初始开发阶段缺乏类型信息时。

TypeScript中的静态与动态类型。

静态类型在 TypeScript 中更为常见，因为它是使 TypeScript 与 JavaScript 区分开来的核心特性之一。通过强制执行严格的类型检查，静态类型增强了代码的可维护性，减少了错误，并提高了开发人员的生产力。

动态类型通常用于需要灵活性或处理数据结构无法提前确定的情况。只需记住，过度依赖动态类型（例如，滥用any类型）通常是不鼓励的，因为这会削弱 TypeScript 静态类型系统的优势。

因此，在某些边缘情况下动态类型有其用武之地，但在 TypeScript 开发中，静态类型是首选且更常用的方法。

类型推断和联合类型

类型推断

类型推断是 TypeScript 中一项强大的功能，允许编译器根据初始化时赋给变量的值自动推断变量的类型。简单来说，TypeScript 查看您为变量赋的值，并决定它应该是什么类型，即使您没有明确声明类型。

例如：

typescriptCopyEditlet age = 25; // TypeScript 推断 'age' 的类型为 'number'
age = "hello"; // 错误：类型 'string' 不能赋值给类型 'number'

在这个例子中，age变量会被自动推断为number，因为它的初始值是25。任何试图将age重新赋值为不同类型（如字符串）的操作都会导致类型错误。

类型推断特别有用，因为它减少了显式类型注解的需求，使您的代码更清晰、更易读。然而，它仍然提供了 TypeScript 类型检查的安全性和可靠性。

何时使用类型推断：

  • 简单赋值：对于类型从值中显而易见的简单赋值，请使用类型推断。

  • 默认值：当为变量或函数参数提供默认值时，类型推断可确保正确的类型应用，而无需手动注解。

  • 快速原型设计：在开发的早期阶段，类型推断可以减少样板代码的同时仍然强制执行类型安全性。

联合类型

联合类型允许一个变量保存多种类型的值。它们通过在类型之间放置一个竖线（|）来定义。这个特性在一个变量在其生命周期中可以合法地拥有多种类型时非常有用。

例如：

typescriptCopyEditlet numOrString: number | string; // 'numOrString' 可以保存数字或字符串
numOrString = 25; // 合法
numOrString = "hello"; // 合法
numOrString = true; // 错误: 类型 'boolean' 不能赋值给类型 'number | string'

甚至可以定义具有超过两种可能类型的联合类型：

typescriptCopyEditlet multiType: number | string | boolean;
multiType = 42; // 合法
multiType = "TypeScript"; // 合法
multiType = false; // 合法
何时使用联合类型：

  • 灵活的函数参数: 当函数可以接受多种类型的输入。

      typescriptCopyEditfunction printValue(value: string | number) {
    console.log(value);
  }

  • 处理不同的数据结构: 当与 API 或外部数据源一起工作时，字段的类型可能不同。

  • 可选或多状态变量：例如，一个变量可以表示布尔型的加载状态、字符串型的错误，或者对象型的有效数据：

    typescriptCopyEditlet status: boolean | string | { success: boolean; data: any };

如何处理 TypeScript 中的对象、数组和函数类型

要精通 TypeScript，您必须了解 TypeScript 支持的各种数据类型以及何时如何使用它们。

JavaScript 原始类型 如 字符串、数字、布尔值 等也定义了 TypeScript 中数据的基本构建块。但特别地，对象、 数组、 和 函数 对于构建强健的应用程序至关重要。通过对象、数组和函数，您可以更好地处理数据并在开发中高效使用它们。

TypeScript 中的对象类型

对象类型代表了在 TypeScript 中创建对象的蓝图。您可以使用对象来定义它们的形状，类似于在 面向对象编程 (OOP) 中使用 类。但对象缺乏类所提供的行为特性和封装性。

要定义对象类型，请在冒号（:）后明确地定义对象的蓝图。例如：

// 对象类型初始化

let student: {
    name: string;
    age: number;
    matricNumber: string | number;
 };

// 用实际数据赋值对象

student = {
    name: "Akande"
    age: 21,
    matricNumber: 21/52 + "HP" + 19,
};

请注意，属性以分号; 结束，而不是以逗号 , 结束，这在实际对象中是以逗号结束的。

上述是定义 TypeScript 中对象的主要方式。另一种方式是使用 接口，我将在本文后面讨论。

TypeScript 中的数组类型

在 TypeScript 中，数组允许您将相同或不同数据类型的多个值存储在单个变量中。通过强制数组元素之间的类型一致性，它们提高了代码的安全性和清晰度。

在 TypeScript 中，数组类型可以通过两种方式定义：

1. 使用 Array<type> 模型

这种语法使用泛型 Array 类型，其中 type 代表数组可以容纳的元素类型。

typescriptCopyEditlet numbers: Array<number> = [1, 2, 3, 4, 5];
let mixedArray: Array<number | string> = [1, 2, 3, 4, 5, "Hello"];

  • numbers 示例：此数组只能包含数字。尝试向该数组添加字符串或其他类型将导致类型错误。

      typescriptCopyEditnumbers.push(6); // 有效
  numbers.push("Hello"); // 错误：类型'string'不能赋值给类型'number'

  • mixedArray 示例：该数组使用联合类型 (number | string)，允许存储数字和字符串。

      typescriptCopyEditmixedArray.push(42); // 有效
  mixedArray.push("TypeScript"); // 有效
  mixedArray.push(true); // 错误：类型 'boolean' 不能赋值给类型 'number | string'

2. 使用 type[] 模型

这种语法在数组可以容纳的元素类型后添加方括号 ([])。

typescriptCopyEditconst numbers: number[] = [1, 2, 3, 4, 5];
const mixedArray: (string | number)[] = [1, 2, 3, 4, 5, "Hello"];

  • numbers 示例：类似于 Array<number> 示例，该数组只能包含数字。

      typescriptCopyEditnumbers[0] = 10; // 有效
  numbers.push("Hi"); // 错误：类型 'string' 不能赋值给类型 'number'

  • mixedArray 示例：与之前的mixedArray类似，此数组允许同时存储数字和字符串，提供了在数据类型可能变化的情况下灵活性。

      typescriptCopyEditmixedArray[1] = "World"; // 有效
  mixedArray.push(true); // 错误：类型'boolean'不能赋值给类型'string | number'

如何在 TypeScript 中使用数组

数组是多才多艺的，通常用于存储相关数据集合。以下是一些实际场景：

存储同类数据：
当数组中的所有元素共享相同类型时，比如用户ID列表或产品价格列表：

typescriptCopyEditconst userIds: number[] = [101, 102, 103];
const productPrices: Array<number> = [29.99, 49.99, 19.99];

存储异构数据：
当元素可以具有不同类型时，例如包含文本和可选元数据的消息列表：

typescriptCopyEditconst messages: (string | object)[] = [
  "Welcome",
  { type: "error", text: "Something went wrong" },
];

遍历数组：
TypeScript 中的数组可以在循环中使用，具有完全的类型安全性：

typescriptCopyEditconst scores: number[] = [80, 90, 70];
scores.forEach((score) => console.log(score + 5)); // 为每个分数增加 5

函数参数和返回类型：
数组也可以作为函数参数传递或通过函数以严格类型返回：

typescriptCopyEditfunction getNumbers(): number[] {
  return [1, 2, 3];
}
function printStrings(strings: string[]): void {
  strings.forEach((str) => console.log(str));
}

TypeScript 中的函数类型

TypeScript 中的函数类型描述了函数的形状，包括参数类型和返回类型。函数类型通过在声明时显式指定参数类型来定义。返回类型通过在括号后面立即添加 : 和要返回的类型进行指定。例如：

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

上述函数接受两个数字，将它们相加，并返回一个数字。如果其任何参数不是数字，或者返回任何其他类型，则函数将无法工作。例如：

  1. 用字符串作为参数调用函数：
// 这将无法工作，因为它期望数字，而一个参数是字符串

addition(1, "two");
  1. 重写函数以返回字符串：
// 函数将返回错误，因为它返回的是字符串

function addition (a: number, b: number): string {
    let result = a + b;
    let returnStatement = `Addition of ${a} and ${b} is: ${result}`;
    return returnStatement;
}

自己测试一下代码，看看这些例子是如何工作的。

理解和有效处理 TypeScript 中的对象、数组和函数，使您能够编写类型安全且可维护的代码，从而增强您的应用程序的可靠性和可扩展性。

如何在 TypeScript 中创建自定义类型

通常，您的设计模式并不遵循 TypeScript 中的内置数据类型。例如，您可能有使用动态编程的模式。这可能会在您的代码库中造成问题。TypeScript 提供了一种创建 自定义类型 的解决方案，以解决此问题。

自定义类型允许您根据需要定义数据结构和形状。这增强了代码的可读性和可维护性。

类型关键字

type 关键字允许您创建 类型别名，为创建自定义类型提供了一种方式。您创建的类型可以在整个代码库中重复使用。类型别名有助于定义联合类型或将类型组合为单个别名。创建自定义类型的语法如下：

// 语法

type TypeAlias = type;

以下是一个示例：

上述代码创建了一个自定义类型 UserName，它是数字和字符串的联合体。它使用创建的类型定义两个变量，以相对检查该类型是否有效。

请注意，建议以大写字母开头来命名类型别名。

类型关键字通常用于原始类型——但如何创建自定义对象类型呢？

这就是 接口 的用武之地。

TypeScript 接口

在 TypeScript 中，接口用于定义对象的结构。它们充当蓝图，指定对象应具有的属性及其相应的类型。这确保对象符合一致的形状，实现类型安全和更清晰的代码。

定义一个接口

接口使用关键字interface进行定义。语法如下：

typescriptCopyEditinterface InterfaceName {
  property1: Type;
  property2: Type;
}

示例：

typescriptCopyEditinterface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
};

这个示例中发生了什么：

  1. 接口声明（interface User）：

    • 在这里，我们为User对象定义了一个蓝图。它指定任何类型为User的对象必须具有以下属性：

      • id，类型为number

      • name，类型为string

      • email，类型为string

  2. 使用接口 (const user: User):

    • 我们声明一个类型为 User 的对象user。

    • 对象必须具有在User接口中定义的所有属性，且其值为指定的类型。如果缺少属性或其类型不匹配，TypeScript 将抛出编译时错误。

例如：

    typescriptCopyEditconst invalidUser: User = {
      id: 1,
      name: "Alice",
      // 错误：类型中缺少 'email' 属性
    };

那么你可能会想，为什么要使用接口呢？

  • 类型安全：确保对象符合预期结构，防止运行时错误。

  • 可重用性：相同的接口可以在应用程序的不同部分中重复使用，从而减少重复。

  • 代码清晰度：通过明确描述对象的形状，使代码更易于阅读和理解。

接口的高级特性

  1. 可选属性：通过添加问号（?）可以使属性变为可选。

     typescriptCopyEditinterface Product {
   id: number;
   name: string;
   description?: string; // 可选属性
 }

 const product: Product = {
   id: 101,
   name: "Laptop",
 }; // 由于'description'是可选的，因此是有效的

  2. 只读属性: 使用 readonly 来防止属性在初始化后被修改。

     typescriptCopyEditinterface Point {
   readonly x: number;
   readonly y: number;
 }

 const point: Point = { x: 10, y: 20 };
 point.x = 15; // Error: Cannot assign to 'x' because it is a read-only property

  3. 扩展接口：接口可以从其他接口继承属性，实现组合。

     typescriptCopyEditinterface Person {
   name: string;
   age: number;
 }

 interface Employee extends Person {
   employeeId: number;
 }

 const employee: Employee = {
   name: "John",
   age: 30,
   employeeId: 1234,
 };

何时使用接口

在各种情况下使用接口是一个好主意。当您想要定义和强制代码中传递的对象的结构时，可以使用它们。

它们在 API 响应中也很有用，因为它们帮助您对从 API 接收的对象进行类型检查。这确保数据符合您的期望。

当使用可重用类型时，接口也非常方便。当应用程序的多个部分使用具有相同结构的对象时，接口可以防止重复。

通过利用接口，您可以创建健壮、可维护和类型安全的应用程序。它们是 TypeScript 的一个重要特性，可以促进清晰和可预测的代码。

泛型和字面量类型

泛型 允许您在 TypeScript 中创建可重用的组件，可以与各种数据类型一起使用。它们允许您编写函数、类和接口，而无需事先指定确切的类型，使您的代码更灵活和可维护。

以下是 TypeScript 中泛型函数和泛型接口的示例：

// 用于保存任何值的泛型接口

interface  Box<T> { 
    value: T; 
}

// 使用示例

let  numberBox: Box<number> = { value: 10 };
let  stringBox: Box<string> = { value: "TypeScript" };

console.log(numberBox.value); // 输出：10
console.log(stringBox.value); // 输出：TypeScript

当您不确定数据类型时，可以使用泛型。

与泛型相比，文字类型允许您指定变量可以保存的确切值。这为您的代码增加了更高的特异性和类型安全性，防止意外赋予变量不期望的值。以下是一个示例：

type Direction = 'up' | 'down' | 'left' | 'right';

使用上述类型创建的变量只能赋予字符串 up、down、left 和 right。

总的来说，在 TypeScript 中利用自定义类型使您能够创建富有表现力、可重用和类型安全的数据结构，帮助您开发更加健壮和可维护的应用程序。

如何在 TypeScript 中合并类型

在 TypeScript 中合并类型将多个类型声明组合成一个统一的类型。这种能力使开发人员能够从较小、可重用的部分构建复杂类型，增强代码的清晰度、可重用性和可维护性。

1. 在接口中进行声明合并

TypeScript 支持声明合并，当具有相同名称的多个接口声明时，它们会自动合并为一个接口。这使您能够通过定义附加属性或方法来增强现有接口。

示例：
typescriptCopyEditinterface User {
  id: number;
  name: string;
}

interface User {
  email: string;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
};
工作原理：

  • User 接口被声明两次，每次具有不同的属性。

  • TypeScript会自动将这些声明合并为一个单一接口:

      typescriptCopyEditinterface User {
    id: number;
    name: string;
    email: string;
  }

  • 创建user对象时，必须包含来自合并接口的所有属性。如果有任何属性丢失，TypeScript将引发错误。

声明合并在使用第三方库时特别有用。您可以扩展或添加新属性到现有接口，而无需修改库的源代码。

2. 使用 extends 关键字进行接口合并

extends 关键字允许一个接口继承另一个接口的属性和方法，创建一个将两者属性结合的新接口。

示例:
typescriptCopyEditinterface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: "John",
  age: 30,
  employeeId: 101,
};
工作原理:

  • 接口Person定义了两个属性：name和age。

  • 接口Employee使用extends关键字从Person继承属性。

  • 接口Employee还添加了一个新属性：employeeId。

  • employee对象必须包含Person和Employee的所有属性。

这种方法非常适合层次关系。例如，您可以为共享属性定义一个基础接口，并为专门的类型进行扩展。

3. 使用&运算符进行类型合并

&运算符，也称为交集类型，允许您将多个类型合并为一个类型。生成的类型包含每种类型的所有属性和方法。

示例：
typescriptCopyEdittype Address = {
  city: string;
  country: string;
};

type ContactInfo = {
  email: string;
  phone: string;
};

type EmployeeDetails = Address & ContactInfo;

const employee: EmployeeDetails = {
  city: "New York",
  country: "USA",
  email: "[email protected]",
  phone: "123-456-7890",
};
工作原理：

  • Address和ContactInfo是两种单独的类型。

  • 员工详情 是使用 地址 & 联系信息 创建的交集类型。

  • 员工 对象必须包含来自 地址 和 联系信息 的所有属性。缺少或错误类型的属性将导致 TypeScript 错误。

交集类型在需要组合不相关类型或为特定用例创建复合类型时非常有用，比如合并不同数据结构的 API 响应。

何时使用这些方法

  1. 声明合并： 在想要扩展或增强现有接口时使用，特别是在第三方库或共享代码库中。

  2. extends 关键词： 用于基础接口可以被专门化为更具体类型的分层关系。

  3. 交集类型（&）：在特定用例中需要将多个不相关的类型合并为单一类型时使用。

通过了解这些合并技术及其影响，您可以有效地构建您的 TypeScript 代码，提高可重用性和可维护性，同时保持类型安全性。

TypeScript 中的打包和转换

并非所有浏览器都支持 TypeScript 使用的最新 JavaScript。因此，您可以使用TypeScript 编译器，或者 tsc，将 TypeScript 代码（.ts 文件）转换为传统的 JavaScript（.js 文件），以使其在所有浏览器上普遍兼容。 tsc 将 TypeScript 特定元素如类型和类转换为浏览器可以解释的 JavaScript 代码。

要执行 TypeScript 文件，tsc 是您的首选。您可以使用 npm 安装 tsc，然后将您的 .ts 文件转换为 .js 文件。要使用 tsc，只需在 tsc 命令之前指定 TypeScript 文件的名称。例如，如果您有一个名为 app.ts 的文件，您可以通过键入以下命令来运行它：

tsc app.ts

Webpack 或 Parcel 经常用于在浏览器上部署 TypeScript 代码。这些工具将所有 JavaScript 文件（包括来自 TypeScript 的文件）捆绑在一起，以提高性能和更轻松地实现网站。它们还通过减少代码大小和增强浏览器速度来优化代码加载。

利用 TypeScript 构建更好的代码

作为 JavaScript 开发者采用 TypeScript 打开了编写更强大和易维护代码的可能性。通过理解本指南中概述的基础知识和核心概念，您可以利用 TypeScript 的静态类型系统在开发早期捕获错误，减少错误和更顺畅的代码维护。

通过使用 TypeScript，JavaScript 开发人员可以提高代码质量和生产力。随着不断探索和实践 TypeScript，您将发现更多强大的功能和特性。

继续挑战自己，深入探索 TypeScript 的世界。😉