给 Angular 项目添加 TypeScript 支持的方法-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，TypeScript 逐渐成为了主流的编程语言之一，它可以增强代码的可维护性和扩展性，避免随意更改变量类型导致的错误，以及提升开发效率等方面有着显著的作用。本文将介绍如何给 Angular 项目添加 TypeScript 支持，从而发挥 TypeScript 的优势，提升项目开发的质量和效率。

准备工作

首先，需要安装 TypeScript。可以通过 npm 命令行进行安装，使用以下命令：

npm install -g typescript

在安装完 TypeScript 后，即可在项目中使用 TypeScript。

在 Angular 项目中开启 TypeScript 支持

在 Angular 项目中开启 TypeScript 支持比较简单。只需执行以下步骤：

在 src 目录下新建 tsconfig.json 配置文件
在 tsconfig.json 中添加 TypeScript 配置项
在项目 package.json 文件中添加 TypeScript 相关依赖

创建 `tsconfig.json` 配置文件

在 src 目录下创建 tsconfig.json 文件，文件内容如下所示：

-- -------------------- ---- -------
-
  ------------------ -
    --------- ------
    --------- -----------
    ------------------ -----
    ------------ -----
    -------------- ------
    --------- ---------
    -------------------- -----
    ------------------------- -----
    ------------------------ ----
  --
  ---------- -
    ---------------
    ------
  -
-

其中，compilerOptions 是 TypeScript 编译器的配置项。具体含义如下：

target：编译后的代码目标运行环境，默认为 ES5
module：生成的模块类型，默认为 commonjs
esModuleInterop：允许使用 ES6 模块和 CommonJS 之间的互操作性特性
sourceMap：生成用于调试的源代码映射文件，方便调试
declaration：是否生成声明文件，这里为了简化配置，不生成声明文件
outDir：编译后输出的目录
resolveJsonModule：允许导入 JSON 模块
experimentalDecorators：开启装饰器语法，方便在 Angular 中使用装饰器实现一些功能
emitDecoratorMetadata：生成元数据，用于运行时检查

exclude 是 TypeScript 编译器忽略的文件或目录。

添加 TypeScript 配置项

在 angular.json 文件的 "architect" 配置中，找到 "build" 配置，将原来的 "options" 属性替换成 "typescriptConfig" 属性，并将其值设置为刚才新建的 tsconfig.json 文件路径，例如：

-- -------------------- ---- -------
-------- -
  ---------- ----------------------------------------
  ---------- -
    ------------- --------------
    -------- -----------------
    ------- --------------
    ------------ -------------------
    ----------- ------------------------
    ------ -----
    --------- -
      ------------------
      ------------
    --
    --------- -
      ----------------
    --
    ---------- --
  --
  ----------------- -
    ------------- -
      ------------------- -
        -
          ---------- ----------------------------------
          ------- --------------------------------------
        -
      --
      --------------- -----
      ---------------- ------
      ------------ ------
      -------------- ------
      ------ -----
      ------------- -----
      --------------------------- -
        --------------- -
          ------------
        -
      --
      ----------- ------------------------
      --------- -
        ------------------
        ------------
      --
      ---------- ---
      --------- -
        ----------------
      -
    -
  --
  ----------------------- -------------
  ------------------- -------------------
-

配置项中，typescriptConfig 为刚才创建的 tsconfig.json 文件路径。

添加 TypeScript 相关依赖

在项目的 package.json 文件中添加 TypeScript 相关依赖：

-- -------------------- ---- -------
-
  ------------------ -
    -------------- -----------
    ------------ ---------
    ------------- ---------
    ---------- ----------
    -------------- ---------
    --------------------- --------
  --
  --------------- -
    ---------------------- ----------
    ------------------ ----------
    -------------------- ----------
    ---------------- ----------
    ----------------- ----------
    ---------------------------- ----------
    ------------------------------------ ----------
    ------------------ ---------
  -
-

其中，typescript 是 TypeScript 编译器，ts-loader 是webpack 的 TypeScript 编译器。@types/node 是 TypeScript 中的 Node.js 类型定义。webpack 和 webpack-cli 是 webpack 工具，webpack-dev-server 是 webpack 的热更新服务器。

配置完成后，执行以下命令重新安装依赖：

npm install

在 Angular 项目中使用 TypeScript

在使用 TypeScript 时，需要在组件的 .ts 文件中添加类型声明。例如，在组件中声明一个字符串类型的变量：

export class AppComponent {
  title: string = 'my-app';
}

上面的代码声明了一个 title 变量，类型为字符串，初始值为 'my-app'。

除了声明变量类型外，还可以声明函数参数和返回值类型，以及类中的属性和方法类型。

TypeScript 常见用法

类和接口

TypeScript 支持类和接口的定义。例如，定义一个接口和一个实现它的类：

-- -------------------- ---- -------
--------- ------ -
  ----- -------
  ---- -------
-

----- ------- ---------- ------ -
  ----- -------
  ---- -------
  ------ -------

  ----------------- ------- ---- ------- ------ ------- -
    --------- - -----
    -------- - ----
    ---------- - ------
  -

  -------- ---- -
    ------------------------- -- -----------
  -
-

上面代码中，Person 接口定义了 name 和 age 两个属性，而 Student 类实现了 Person 接口，并拥有自己的 grade 属性和 study() 方法。

装饰器

TypeScript 中的装饰器是一种特殊的声明，它可以被附加到类声明、方法、属性、参数和访问符等元素上以向这些元素添加额外的信息。例如，下面的装饰器将 Student 类声明为 Angular 组件：

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {
  // ...
}

这里的 @Component 装饰器表示该类是一个 Angular 组件，并为它配置了 selector、templateUrl 和 styleUrls 等属性。

泛型

泛型是 TypeScript 中特有的一种语言特性。它允许开发者在函数、类、接口等代码中定义一种特殊的类型，这种类型可以在多个地方使用，同时还可以携带一些变量参数。例如，定义一个泛型类：

-- -------------------- ---- -------
----- ---------------- -
  ---------- --
  ---- --- -- -- -- -- --
-

-- ----
--- --------------- - --- ------------------------
------------------------- - --
------------------- - ----------- -- - ------ - - -- --

上面的代码中，泛型类 GenericNumber 接受一个类型参数 T，并定义了 zeroValue 和 add 两个属性。在使用时，实例化 GenericNumber 时需要指定类型参数，这里使用 number 类型实例化，并分别给 zeroValue 赋值为 0，定义了一个求和的 add 方法。

总结

本文介绍了如何给 Angular 项目添加 TypeScript 支持，同时对 TypeScript 的常见用法进行了简单介绍。TypeScript 可以大大提高项目代码的质量和效率，希望读者们可以通过本文了解到 TypeScript 的使用方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6454d8cc968c7c53b08971bd

给 Angular 项目添加 TypeScript 支持的方法

前言