TypeScript 类型声明文件.d.ts

文章目录

  • 一、TS 中的两种文件类型
  • 二、类型声明文件的使用说明
    • 1. 使用已有的类型声明文件
      • 1.1 内置类型声明文件
      • 1.2 第三方库类型声明文件
        • 1.2.1 库自带声明文件
        • 1.2.2 DefinitelyTyped
    • 2.创建自己的类型声明文件
      • 2.1 项目内共享类型
      • 2.2 为已有 JS 文件提供类型声明

一、TS 中的两种文件类型

TypeScript 类型声明文件.d.ts_第1张图片
TypeScript 类型声明文件.d.ts_第2张图片
TypeScript 类型声明文件.d.ts_第3张图片

二、类型声明文件的使用说明

在使用 TS 开发项目时,类型声明文件的使用包括以下两种方式:

1. 使用已有的类型声明文件

1.1 内置类型声明文件

TypeScript 类型声明文件.d.ts_第4张图片
TypeScript 类型声明文件.d.ts_第5张图片
TypeScript 类型声明文件.d.ts_第6张图片

1.2 第三方库类型声明文件

1.2.1 库自带声明文件

TypeScript 类型声明文件.d.ts_第7张图片

1.2.2 DefinitelyTyped

TypeScript 类型声明文件.d.ts_第8张图片
https://github.com/DefinitelyTyped/DefinitelyTyped/
https://www.typescriptlang.org/dt

2.创建自己的类型声明文件

2.1 项目内共享类型

TypeScript 类型声明文件.d.ts_第9张图片
TypeScript 类型声明文件.d.ts_第10张图片

2.2 为已有 JS 文件提供类型声明

TypeScript 类型声明文件.d.ts_第11张图片
迁移:https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html

TypeScript 类型声明文件.d.ts_第12张图片

例如:已有until.js 迁移到ts项目
TypeScript 类型声明文件.d.ts_第13张图片
TypeScript 类型声明文件.d.ts_第14张图片

创建webpack

  1. 新建项目 npm init -y

  2. 安装 webpack
    npm install webpack webpack-cli --global //这是安装全局webpack及webpack-cli模块
    npm install webpack webpack-cli --save-dev //这是安装本地项目模块

  3. 新建文件目录
    在根目录件夹中新建两个文件夹,分别为 src 文件夹,接下来再创建三个文件:此时,项目结构如下
    index.html --放在 src 文件夹中;
    index.ts --放在 src 文件夹中;
    TypeScript 类型声明文件.d.ts_第15张图片

  4. 配置 webpack.config.js
    TypeScript 类型声明文件.d.ts_第16张图片

  5. 生成tsconfig.json
    tsc--init
    TypeScript 类型声明文件.d.ts_第17张图片

使用ts-loader
TypeScript 类型声明文件.d.ts_第18张图片
TypeScript 类型声明文件.d.ts_第19张图片
为 utils.js 文件来提供类型声明
TypeScript 类型声明文件.d.ts_第20张图片

你可能感兴趣的:(TypeScript,typescript,javascript,前端)