typescript 编译成 javascript 后的问题. 三斜线和导入语句报错.

Question

typescript 初学者. 发现typescript在编译成javascript后有一些问题.

1. .ts文件开头引用了声明文件. 如下
   /// <reference path="typings/layui-ts/index.d.ts" />
   在编译后这条语句原样写到了.js文件中, 因为输出目录是在./dist下, 所以编辑器报找不到文件. 但不影响执行效果.
2. .ts文件中有导入外部类. 语句如下
   import {SupplierAPI} from './api/supplier_api'
   编译后也是原样写入.js. 编辑器正常, 但执行时浏览器会报错找不到文件. 加上.js的扩展名就可以了.

现在我的处理办法是忽略第一条报错, 第二条每编译生成.js后手动加上.js扩展名.
在网上和站内搜索没发现类似的问题. 还请了解的同学不吝赐教.

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6"
    "module": "ES6"
    "strict": true
    "esModuleInterop": true
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

VSCode, eslint, prettier, chrome

Answer 1

第一个问题解决了. 把layui的声明文件移到了node_modules/@types 下. 这样会自动寻找, 去掉三斜线指令就可以了.
第二个还没解决, 而且随着导入的文件越来越多, 编译后要加.js的地方也更多了...
应该是跟module的设置有关. 但是我改成commonjs或es2015也是会有其它的问题. 看网上大部分都是用webpack来编译的, 不知道这个问题是不是跟我直接用tsc编译有关系.
第二个问题也解决了. 我写了一个小程序, 每次编译完, 扫描dist目录中的js文件, 把import语句后面加上.js

这两个问题也不能说是解决了, 只是先绕过去了. 后续有时间再学webpack吧.

应该是模块的问题。 实际代码中的模块方式是针对node的， 浏览器无法识别。 改用webpack打包生成js就好了。 会把多模块合并成一个js文件。