Skip to main content

常见错误

index.ts(1,8): error TS1192: Module '"xxxx"' has no default export.​

  • 原因
import xx fom 'xx'

// 编译成 CommonJS后，如果"xx"没有default，则会报错
exports.__esModule = true;
var xx = require("xx").default

由于 CommonJS 和 ESModule 规范两者导出方式的不同

  • 解决 1
import * as xx from "xx";

// 编译后
exports.__esModule = true;
var xx = require("xx");
  • 解决 2
import { xx } from "xx";

// 编译后
exports.__esModule = true;
var xx_1 = require("xx");
console.log(fs_1.xx);

读取本地的tsconfig.json失败​

有时项目嵌套过深，使用命令tsc xxx.ts的时候默认没有使用本地的配置文件，这时候就需要指定

# 直接指定
tsc -p .

cannot redeclare block-scoped variable​

发生原因：

  • 可能存在重复定义的全局变量

ERR_UNKNOWN_FILE_EXTENSION​

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for

In order to fix this problem, you need to remove "type": "modules" from the packages.json file. Once this has been removed, your project should work.

尝试 1​

// packages.json
"type": "modules", // 修改为 modules 注意带s结尾

尝试 2​

如果方法 1 不行，再

# 项目本地安装
yarn add typescript ts-node -D
// tsconfig 修改
{
  "ts-node": {
    "target": "ESNext",
    "module": "ESNext"
  }
}
# 使用新的命令
# 注意此处 node版本为 16.6.2

ts-node --esm ./test.ts
# or
node --loader ts-node/esm ./test.ts

Cannot redeclare block-scoped variable 'xxxx'​

HTMLElement | null’ is not assignable to type ‘HTMLElement’. Type ‘null’ is not assignable to type ‘HTMLElement’​

发生场景:

当从document.getElementByxx获取元素时，该 api 返回值可能会是 HTMLElement|null

const drag: HTMLElement = document.getElementById("drag");

解决 1：

添加一个临时变量用作中间值判断

let drag: HTMLElement;

const res = document.getElementById("drag");
if (res) drag = res;

使用mjs文件时*.d.ts（tsd）文件不生效​

原因

猜测因为*.d.ts 文件是在import的时候同步引入到项目中的，所以如果import模块时，使用的模块名称如果是以 *.mjs来引入，此时将不会触发导入tsd文件的查找机制，所以不会导入任何*.d.ts文件

解决

以 node16 为例，因为 node16 版本开始

  • mjs文件以 ES6 方式导入
  • cjs文件以 CommonJS 方式导入
  • *.js文件则以 package.json 中字段 type 来决定导入方式
    • {"type":"module"} - 以 ES6 形式处理导入
    • {"type":"commonjs"} - 以 commonjs 形式处理导入

修改好pacakge.json文件后，以 js 后缀引入模块，即可触发 ts 导入 tsd 文件的机制

  • 方式 1
// 以js后缀形式导入模块
import xxxx from "xxx.js";
  • 方式 2
// 通过 node 模式启动项目，可以使用无后缀的形式加载
// node --experimental-specifier-resolution=node index.js
import xxxx from "xxx"

// 同时模块的入口文件添加以下后缀
#!/usr/bin/node --experimental-specifier-resolution=node

// or(建议)

// 修改 package.json 的bin字段
{
    "bin":
    "scripts":{
      "bin":"node --experimental-specifier-resolution=node"
    }
}

定义变量报错cannot be compiled under '--isolatedModules' because it is considered​

问题​

在vue中使用ts定义变量的时候报如下错误：

cannot be compiled under --isolatedModulesbecause it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

原因​

Typescript 将没有导入/导出的文件视为旧脚本文件。这样的文件不是模块，它们的任何定义都已合并到全局名称空间中。 isolatedModules禁止此类文件。

将任何导入或导出添加到文件都使其成为一个模块，并且错误消失。

export {}也是一种方便的方法，可以在不导入任何内容的情况下使文件成为模块。

解决方法​

找到tsconfig.json配置文件，把isolatedModules字段改为false