Typescript 类型声明未按预期工作

Question

正在从事盖茨比方面的项目，我也在该项目中使用 Typescript。我以前从未使用过 Typescript，所以我期待某种 PHP 类型声明行为，但不确定它是否是这样工作的。当我意识到我的一些导入接口未定义并且从未因此而出现任何错误时，我已经做了相当多的工作并愉快地继续进行（想想我对 Typescript 的使用有多好）。所以我试图通过使用错误的类型来破坏我的代码，但 Typescript 似乎忽略了所有声明。 这是一个例子： 我得到了这个界面（draggable.ts）：

export interface Draggable {
   x: number,
   y: number
}

这家伙导出的（index.ts）

import Draggable from './draggable';
import Resizable from './resizable';
import Stageable from './stageable';
import Page from './page';
import ToolState from './states/tool-state';
import CommonAction from './states/action';
import ToolItem from './tool';

export default {
   Draggable,
   Resizable,
   Stageable,
   ToolState,
   Page,
   CommonAction,
   ToolItem
}

然后将其导入到组件中，如下所示

import Interfaces from '../interfaces';

并用于以下方法的类型提示：

 reposition: (event: MouseEvent, diffPos: Interfaces.Draggable) => {
     const position = {
         x: event.screenX - diffPos.x,
         y: event.screenY - diffPos.y
     }

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

现在，如果我尝试使用错误的参数类型调用该方法，代码将毫无问题地运行：

<div 
  className="bg-gray-600 toolbar" 
  style={{top: barPosition.y + 'px', left: barPosition.x + 'px', width: barWidth}}
  onDragStart={dragStart}
  onDrag={e => reposition(e, 'blaa')}
  onDragEnd={e => reposition(e, diffPos)}
  draggable={true}
>

即使我尝试类似的事情

onDrag={e => reposition(e, {x: 'blaa', y: 'blablaaa'})}

没有任何区别。 可能我对 Typescript 的工作原理有一些误解。 谢谢。

Answer 1

Typescript 在 JavaScript 运行时不会抛出任何错误。但如果打字稿服务器正常工作，它应该向您显示工作环境（IDE）内的错误。

看一下示例这里，即使在打字稿游乐场中，您也可以看到，即使它在打字稿代码中显示错误，它仍然可以运行并且在运行时不会出现错误。

Typescript 代码应该编译/转换为 JavaScript 代码才能运行，并且根据编译/转换环境，它可能会忽略一些 TypeScript 错误。

完全正确。同样，在开始时，当我编写一些简单的 Typescript 学习代码示例时，我也在浏览器控制台中遇到类型错误，现在这种情况没有发生。该函数只是以错误的类型运行

另外，看起来你提到的“类型错误”是TypeError，它是Javascript对象，这不是由Typescript抛出的。

我认为你必须检查你的编码环境（也许是IDE？），它应该显示通过运行打字稿服务器发现的打字稿错误。