StackBlitz中TypeScript模块导入及shortid安装后导入失败问题

一、在StackBlitz里导入TypeScript模块的正确姿势 #

其实和本地开发导入模块的逻辑差不多，只是操作界面是在线的，具体步骤如下：

• 先把要用的模块装到项目里：打开左侧的Dependencies面板，搜索你要的模块名，点击安装就行；嫌麻烦的话也可以打开终端（底部面板的Terminal标签），敲npm install 模块名来安装。
• 然后在需要用的TS文件里，根据模块的导出方式选对应的导入语法：
  • 要是模块是默认导出的，就用import 自定义别名 from '模块名';
  • 要是是命名导出，就用import { 具体导出的成员 } from '模块名';
  • 想把整个模块的内容都导进来，就用import * as 模块别名 from '模块名';
• 导完之后就正常用就行，比如调用模块里的方法、实例化类啥的。

二、解决shortid安装后提示"Cannot find module 'shortid'"的坑 #

这个问题我之前也遇到过，本质是shortid这个包本身没带TypeScript的类型定义文件，StackBlitz的TS编译器不认它，所以才报错。给你几个解决办法：

1. 装对应的类型定义包
   最直接的办法就是装@types/shortid这个类型包——在左侧Dependencies里搜这个名字，点安装；或者终端敲：

   npm install @types/shortid --save-dev
   

   装完之后TS就能识别shortid的类型了，错误提示基本就没了。

2. 手动声明模块（如果类型包找不到的话）
   要是@types/shortid搜不到或者装了还是不行，那就在项目根目录建个typings.d.ts文件（没有的话直接新建），然后加一行：

   declare module 'shortid';
   

   这样TS就会把shortid当成一个任意模块处理，不会再揪着“找不到模块”这个问题不放了。

3. 检查依赖是否真的装成功了
   有时候可能是StackBlitz的缓存搞的鬼，你可以点左侧Dependencies面板右上角的刷新按钮，确认shortid确实在已安装的列表里；或者终端敲npm install重新装一遍所有依赖，说不定就好了。

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