typescript报错

typescript和vue结合，引入文件报错vetur [2307]

typescript中导入.png/.json/.mp3等文件时同样需要编写声明文件。不添加声明文件会出现引入类型错误。
可以创建一个声明文件src/@types/definition.d.ts

// definition.d.ts
declare module '*.png' {
  const value: string
  export = value
}
// index.ts
// 之后在 TS 中导入也不会有问题
import avatar from './img/avatar.png'

第三方模块没有可用的声明文件

使用第三方不是 TypeScript 编写的模块时，我们可以直接下载对应的声明文件：yarn add @types/{模块名}。然而有些模块是没有对应的声明文件的，这时候就需要我们自己编写声明文件，以rc-form为例，只需在src/@types/definition.d.ts中添加对应代码：

// definition.d.ts
declare module "rc-form" {
  // 在此只是简单地进行类型描述
  export const createForm: any;
  export const createFormField: any;
  export const formShape: any;
}

webpack中配置别名，在TS中使用时会出现找不到模块

// webpack.config.js
const config = {
  // ...
  aliases: {
    // 公共的工具类、容器和组件
    utils: path.resolve('../utils'),
  },
  // ...
}
// index.ts
import {ua} from 'utils/broswer'
// Cannot find module 'utils/browser'

需在 tsconfig.json 添加baseUrl和paths的配置：

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "noImplicitAny": true,
    // 添加配置
    "baseUrl": ".",
    "paths": {
      "utils/*": ["../utils/*"],
      "components/*": ["../components/*"]
    }
  },
  "include": ["./src/*", "./src/**/*"],
  "exclude": ["node_modules"]
}