如何在TypeScript内引入静态资源

在ts文件中，如果引入了静态资源模块（比如css、图片等），会报错，提示找不到模块。

// TS2307: Cannot find module './index.css'
import './index.css';

可以使用全局类型声明写法，来声明类型。

declare module '*.css' {
  const style: { [key: string]: string };

  export default style;
}

一份可用的完整配置

declare module '*.css' {
  const style: { [key: string]: string };

  export default style;
}

declare module '*.sass' {
  const style: { [key: string]: string };

  export default style;
}

declare module '*.scss' {
  const style: { [key: string]: string };

  export default style;
}

declare module '*.less' {
  const style: { [key: string]: string };

  export default style;
}

declare module '*.styl' {
  const style: { [key: string]: string };

  export default style;
}

declare module '*.png' {
  const url: string;

  export default url;
}

declare module '*.jpg' {
  const url: string;

  export default url;
}

declare module '*.jpeg' {
  const url: string;

  export default url;
}

declare module '*.gif' {
  const url: string;

  export default url;
}

declare module '*.webp' {
  const url: string;

  export default url;
}

declare module '*.svg' {
  import type { FunctionComponent } from 'react';

  const url: string;

  // 如果使用@svgr/webpack加载svg，还会导出ReactComponent组件
  export const ReactComponent: FunctionComponent;

  export default url;
}

declare module '*.vue' {
  import { defineComponent } from 'vue';

  export default ReturnType<typeof defineComponent>;
}