Gatsby项目中TypeScript类型声明未生效，类型校验失效求助

你的核心问题是把TypeScript的类型（接口）当成JavaScript值来导出和使用，同时混淆了TypeScript与PHP的类型机制，导致类型检查完全失效。

为什么类型检查不起作用？ #

1. TypeScript类型与JavaScript值的本质区别 #

TypeScript的接口、类型别名等是纯编译时概念，编译成JavaScript后会被完全移除，不会存在于运行时环境中。你不能像导出普通JS对象、函数那样，把接口打包到一个对象里导出——因为编译后这个对象里的接口属性全是undefined，同时TypeScript的类型系统也无法识别这种错误的导出方式。

2. 你的代码里的两处关键错误 #

• 接口导入方式错误：draggable.ts里用export interface Draggable做的是命名导出，但你在index.ts里用import Draggable from './draggable'（默认导入）来获取它，这会导致Draggable变量实际是undefined（因为没有默认导出）。
• 错误的类型导出方式：你试图把接口作为属性放到一个对象里export default { Draggable, ... }，这完全违背了TypeScript的类型导出规则——类型不能作为JS值的属性存在，编译后这个对象里的所有类型属性都会丢失。

修复步骤 #

步骤1：修正类型的导入导出逻辑 #

把index.ts改成用export type批量导出类型（TypeScript 3.8+支持），这是导出类型集合的标准方式：

// interfaces/index.ts
export type { Draggable } from './draggable';
export type { Resizable } from './resizable';
export type { Stageable } from './stageable';
export type { Page } from './page';
export type { ToolState } from './states/tool-state';
export type { CommonAction } from './states/action';
export type { ToolItem } from './tool';

步骤2：正确导入并使用类型 #

在组件里用import type明确导入类型（避免和值导入混淆），按需使用：

// 组件文件
import type { Draggable } from '../interfaces';

// 函数定义中使用类型
reposition: (event: MouseEvent, diffPos: Draggable) => {
  const position = {
    x: event.screenX - diffPos.x,
    y: event.screenY - diffPos.y
  }

  dispatch({ type: 'UPDATE_BAR_POSITION', payload: { position }})
}

如果需要一次性导入所有类型，也可以这样写：

import type * as Interfaces from '../interfaces';

// 使用时
reposition: (event: MouseEvent, diffPos: Interfaces.Draggable) => { /* ... */ }

步骤3：验证类型检查 #

现在当你传入错误类型的参数（比如字符串'blaa'，或者{x: 'blaa', y: 'blablaaa'}），TypeScript会在编译阶段直接抛出错误，阻止你把错误代码打包。

TypeScript与PHP类型机制的核心区别 #

• PHP的类型提示是运行时生效的，会在代码执行时检查参数类型，不符合就抛出错误。
• TypeScript是编译时类型检查，所有类型信息在编译成JS后都会被移除，运行时不会做任何类型验证——它的作用是在开发阶段提前发现类型错误，而不是在运行时限制参数。

内容的提问来源于stack exchange，提问作者domjanzsoo