【TS】declare 声明文件

来源: https://blog.csdn.net/qq_45677671/article/details/128543080?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-3-128543080-blog-123338651.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-3-128543080-blog-123338651.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=6

一、文件类型

TS 中有两种文件类型：

• ts文件（代码实现文件）
• d.ts文件（类型声明文件）

.ts文件

1. 既包含类型信息又可执行代码
2. 可以被编译为 .js 文件，然后执行代码
3. 通常用于编写程序代码的地方

.d.ts文件

1. 只包含类型信息的类型声明文件
2. 不会生成 .js 文件，仅用于提供类型信息
3. 通常用于为 js 提供类型信息。

二、基本用法

创建自己的类型声明文件有两种：

• 项目类共享类型
• 为已有JS文件提供类型声明
  2.1、项目类共享类型
• 如果多个.ts文件中都用到用一个类型，此时可以创建.d.ts文件提供该类型，实现类型共享。
• 操作步骤：

1. 创建 index.d.ts 类型声明文件
2. 创建共享的类型，并使用 export 导出（TS中的类型也可以使用import/export实现模块化功能）
3. 在需要使用共享类型的 .ts 文件中，通过import导入即可（.d.ts后缀导入时，直接省略）

• index.d.ts文件

type Props = {x: number; y: number;}
export {Props}

import { Props } from './index'
let pp: Props = {
    x: 1,
    y: 2,
}

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

• 一般用于：

1. 在将JS项目迁移到TS项目时，为了让已有的 .js 文件有类型声明
2. 成为库作者，创建库给其他人使用

• 在导入 .js 文件时，TS会自动加载与 .js 同名的 .d.ts文件，以提供类型声明。
• declare 关键字：用于类型声明，为其他地方（比如：.js文件）一存在的变量声明类型，而不是创建应该新的变量。

3. 对于 type、interface 等这些明确就是TS类型的，可以省略declare关键字
4. 对于 let、function 等具有双重含义（在JS、TS中都能用），应该使用declare关键字，明确指定此处用于类型声明

• utils.js文件

let count = 10;
let songName = 'aaa';
let position = {
    x: 0,
    y: 0,
}
function add (x,y){
    return x + y;
}
function changeDirection(direction) {
    console.log(direction)
}
const fomartPoint = point => {
    console.log('当前坐标：',point)
}
export {count, songName, position, add, changeDirection, fomartPoint}

• utils.d.ts文件

declare let count: number;
declare let songName: string;
interface Point {
    x: number;
    y: number;
}
declare let position: Point;
declare funcition add(x:number, y:number):number
declare funcition  changeDirection(
    direction: 'up' | 'down' | 'left' | 'right'
): void
type FomartPoint = (point: Point)=>void
declare const fomartPoint: FonmarePoint;

// 需要导出声明好的类型，才能在其他的 .ts 文件中使用
export {count, songName, position, add, changeDirection, fomartPoint}

声明文件或模块的语法格式如下：

declare module Module_Name {
}

declare module 'vue-router' {
interface RouteMeta{
  keepalive?: boolean;
  title: string;
 }
}

声明全局global格式如下：

export{};
declare global {
interface Window{
    dd: any;
  }
}