3.TS4类型系统之扩展使用

书诚小驿2024/10/09前端知识库TypeScript

一、declare 关键字

1、declare 关键字

在 TypeScript 中,declare 关键字主要用于声明全局变量、函数、模块、类型别名或枚举,以便在 TypeScript 代码中引用它们,而无需实际定义它们。

  • 声明全局变量或函数

当在 TypeScript 代码中访问某个全局变量或函数,但这个变量或函数并不是在 TypeScript 代码中定义的,而是在 JavaScript 运行时环境中定义的(如浏览器 API)。

declare var document: any;
declare function alert(message?: any): void;
  • 声明模块

当需要告诉 TypeScript 编译器某个模块存在,但不想(或不能)在 TypeScript 中实际定义它时。

declare module "party" {
  export function doSomething(): void;
}
  • 声明文件(.d.ts)

在 .d.ts 文件中使用 declare 关键字来定义类型。这些文件被称为声明文件,它们为 TypeScript 提供了关于 JavaScript 代码的额外类型信息。声明文件对于第三方库和框架特别有用,因为它们允许在 TypeScript 中使用这些库和框架,同时保留类型检查的好处。

2、"declaration": true,

在现代 TypeScript 项目中,通常不需要手动声明浏览器或 Node.js 的全局变量和函数,因为 TypeScript 已经内置了这些环境的声明文件(如 lib.dom.d.ts 和 lib.es2015.d.ts)。 在 TypeScript 的配置选项(通常是 tsconfig.json 文件中的选项)中,指定 TypeScript 编译器是否生成相应的 .d.ts 声明文件。这些声明文件包含了 TypeScript 源文件的类型信息,但不包含实现细节。它们的主要用途是允许其他 TypeScript 文件导入和使用这些类型,而无需直接访问实现文件。

二、@types 和 DefinitelyTyped 仓库

DefinitelyTyped 是一个高质量的 TypeScript 类型定义的仓库。通过@types 方式来安装常见的第三方 JavaScript 库的声明适配模块

1、@types:

@types 是一个 npm 上的命名空间,用于托管 TypeScript 的类型声明文件。这些文件通常以 @types/包名 的形式发布,为那些没有自带 TypeScript 类型声明的 JavaScript 库提供类型信息。并且所有通过 @types 安装的类型声明文件都会保存在项目的 node_modules/@types 目录下。

2、DefinitelyTyped 仓库

  • DefinitelyTyped 是一个 GitHub 仓库,由社区维护,提供了大量流行的 JavaScript 代码库的 TypeScript 类型声明文件。
  • 如果你需要使用某个第三方 JavaScript 库,并希望在 TypeScript 中获得类型检查的支持,你可以先在 DefinitelyTyped 仓库中查找是否已经存在对应的类型声明文件。如果找到了,你可以直接使用;如果没有,你也可以参考已有的类型声明文件自己编写一个。
  • DefinitelyTyped 仓库中的类型声明文件通常也是通过 npm 发布到 @types 命名空间下的。

生成packjson.json

npm init

安装第三方模块

npm i moment
import moment from 'moment'
moment().format('YYYYY')

.ts文件中引入模块,如果模块中有 ts 声明则可以直接使用,不行是一般通常会有@types/包名 的形式发布的相同模块,为那些没有自带 TypeScript 类型声明的 JavaScript 库提供类型信息

三、lib.d.ts 和 global.d.ts

1、lib.d.ts

lib.d.ts 文件是 TypeScript 编译器自带的一组核心类型声明文件。这些文件定义了 JavaScript 运行时环境(如浏览器环境或 Node.js 环境)中的全局对象、函数、接口等。当你安装 TypeScript 时,这些文件通常已经包含在 TypeScript 安装包中。在浏览器环境中,lib.d.ts 文件会包含 window、document、HTMLElement 等全局对象的类型定义。在 Node.js 环境中,它会包含 process、Buffer、__dirname 等全局对象或变量的类型定义

2、global.d.ts

global.d.ts 文件(或具有类似名称的其他全局声明文件)不是 TypeScript 的一部分,但它们是 TypeScript 社区中广泛使用的一种模式,用于声明全局变量、类型或函数。这些文件通常位于项目的根目录或某个特定的类型声明目录中。要在 TypeScript 项目中使用 global.d.ts 或其他全局声明文件,你需要确保 TypeScript 编译器能够找到它们。这可以通过在 tsconfig.json 中设置 include、files 或 typeRoots 和 types 选项来实现。

四、详解 tsconfig.json 配置文件

compilerOptions: {} // 编译选项
files: [] // 包含在程序中的文件的允许列表
extends: " // 继承的另一个配置文件
include: [] // 指定的进行编译解析
exclude: [] // 指定的不进行编译解析
references: [] // 项目引用,提升性能
{
  "compilerOptions": {
    /* 基本选项 */
    "target": "es5" /* 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ESNEXT'. */,
    "module": "commonjs" /* 指定使用模块系统: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    "strict": true /* 启用所有严格类型检查选项。 */,
    "esModuleInterop": true /* 允许默认导入和 CommonJS 模块之间的互操作性。 */,
    "jsx": "react" /* 指定 JSX 代码的生成: 'preserve', 'react-native', or 'react'. */,
    "jsxFactory": "React.createElement" /* 指定要用于 JSX 元素的工厂函数。 */,
    "declaration": false /* 生成相应的 '.d.ts' 文件。 */,
    "declarationMap": false /* 生成 '.d.ts.map' 源文件映射以调试你的 '.d.ts' 文件。 */,
    "sourceMap": true /* 生成相应的 '.map' 文件。 */,
    "outFile": "./" /* 将所有输出合并为一个文件。 */,
    "outDir": "./dist/" /* 重定向输出结构到目录。 */,
    "rootDir": "./src" /* 用来控制输出目录结构以匹配输入的目录结构。 */,
    "composite": false /* 启用项目编译以支持使用 --build 标志。 */,
    "tsBuildInfoFile": "./" /* 指定文件来存储增量编译信息以加速后续编译。 */,
    "removeComments": true /* 不在输出文件中生成注释。 */,
    "noEmit": false /* 不生成输出文件。 */,
    "importHelpers": true /* 导入 emit helpers(例如 `__extends`,`__rest` 等)时从 tslib 导入。 */,
    "downlevelIteration": true /* 提供完全的向下兼容性,用于迭代器和生成器。 */,
    "isolatedModules": false /* 将每个文件作为单独的模块(与 'ts.transpileModule' 类似)。 */,
    /* 严格检查选项 */
    "strictNullChecks": true /* 启用严格的 null 检查。 */,
    "strictFunctionTypes": true /* 启用严格的函数类型检查。 */,
    "strictBindCallApply": true /* 启用严格的 `bind`,`call`,和 `apply` 方法检查。 */,
    "strictPropertyInitialization": true /* 启用严格的属性初始化检查。 */,
    "noImplicitThis": true /* 启用对 `this` 表达式的严格检查。 */,
    "alwaysStrict": true /* 以严格模式解析每个模块。 */,
    /* 额外的检查 */
    "noUnusedLocals": true /* 报告未使用的局部变量。 */,
    "noUnusedParameters": true /* 报告未使用的函数参数。 */,
    "noImplicitReturns": true /* 报告没有显式返回值的函数。 */,
    "noFallthroughCasesInSwitch": true /* 报告 switch 语句的 fallthrough 错误(即没有 break 的 case)。 */,
    /* 模块解析选项 */
    "moduleResolution": "node" /* 选择模块解析策略:'node' (Node.js) 或 'classic' (TypeScript pre-1.6)。 */,
    "baseUrl": "./" /* 解析非相对模块名的基准目录。 */,
    "paths": {} /* 映射模块名到基于 `baseUrl` 的路径。 */,
    "rootDirs": [] /* 将多个目录的根合并为一个。 */,
    "typeRoots": [] /* 指定要包含的类型声明文件的目录列表。 */,
    "types": [] /* 要包含的类型声明文件名列表。 */,
    "allowSyntheticDefaultImports": true /* 允许从没有默认导出的模块中默认导入。 */,
    /* Source Map 选项 */
    "sourceRoot": "./src" /* 指定调试器应该找到 TypeScript 文件的位置,如果它们不在生成的位置。 */,
    "mapRoot": "./" /* 指定调试器应该找到映射文件的位置。 */,
    "inlineSourceMap": false /* 生成单个源文件的内联 source maps。 */,
    "inlineSources": false /* 在生成的 source maps 中包含源文件的完整内容。 */,
    /* 实验性选项 */
    "experimentalDecorators": true /* 启用实验性的装饰器功能。 */,
    "emitDecoratorMetadata": true /* 为装饰器提供元数据的支持。 */,
    /* 错误诊断 */
    "diagnostics": false /* 报告这个编译器的额外诊断信息。 */,
    "traceResolution": false /* 报告模块解析的日志信息。 */,
    "listFiles": false /* 列出编译的文件。 */,
    /* 其他选项 */
    "noResolve": false /* 如果设为 true,则不会解析三方模块标识符。 */,
    "forceConsistentCasingInFileNames": true /* 确保在读取文件时大小写一致。 */,
    "skipLibCheck": false /* 跳过所有声明文件的类型检查。 */,
    /* 路径别名配置(通过 tsconfig-paths 或其他插件使用)*/
    "baseUrl": "./" /* 解析非相对模块名的基准目录。 */,
    "paths": {
      "@/*": ["src/*"]
    },
    /* 插件配置 */
    "plugins": [] /* 插件列表,用于自定义 TypeScript 的编译过程。 */,
    /* 编译时包含/排除文件 */
    "include": ["src/**/*"],
    "exclude": ["node_modules", "**/*.spec.ts"],
    /* 编译上下文配置 */
    "extends": "./configs/base" /* 从另一个文件继承 tsconfig 选项。 */,
    /* 使用 TypeScript 编译器 API 的配置 */
    "compilerHost": {} /* 允许自定义编译器主机。 */,
    /* 自定义 TypeScript 编译器选项 */
    "//": "在这里可以添加任何自定义的 TypeScript 编译器选项,但请确保它们是有效的并受到 TypeScript 的支持。",
    /* 列表文件 */
    "files": [] /* 显式指定要编译的文件列表。 */,
    /* 格式化 */
    "pretty": true /* 以格式化的 JSON 输出文件。 */
    // ... 可能还有其他不常见的或实验性的配置选项 ...
  }
}
最后更新时间' 2025/1/3 14:16:58