如何在已有vue项目中应用ts

首先安装ts

npm install --save-dev typescript  //安装ts
npm install --save-dev ts-loader@8.3.0   //安装ts-loader

• 限制ts-loader版本，兼容webpack

在根目录建tsconfig.json文件

{
    "compilerOptions": {
      "target": "es5",
      "module": "esnext",
      "strict": true,
      "allowJs": true,
      "sourceMap": true,
      "moduleResolution": "node",
      "baseUrl": ".",
      "paths": {
        "@/*": [
            "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ],
    },
   
    "include": [
        "src/**/*.ts"
    ]
}

tsconfig配置

{

    "compileOnSave": false,

    "compilerOptions": {

        "outDir": "./dist/out-tsc",//输出目录

        "baseUrl": "src",

        "sourceMap": true,//把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件

        "removeComments": true,//编译 js 的时候，删除掉注释

        "declaration": false,

        "moduleResolution": "node",//模块的解析

        "emitDecoratorMetadata": true,//给源码里的装饰器声明加上设计类型元数据。查看issue #2577了解更多信息。

        "experimentalDecorators": true,//启用实验性的ES装饰器。

        "target": "es5",//编译目标平台

        //exclude：不包含的编译目录

        //noImplicitAny：true/false；为 false 时，如果编译器无法根据变量的使用来判断类型时，将用 any 类型代替。为 true 时，进行强类型检查，会报错

        "typeRoots": [

        "node_modules/@types"

        ],

        "lib": [//添加需要的解析的语法，否则TS会检测出错。

        "es2016",

        "dom"

        ]

      }

}

声明ts类型

增加.d.ts文件，如index.d.ts，如果不做声明会有错误提示

declare module '*.js'

declare module '*.ts'

declare module '*.png' {
    const value: any;
    export default value;
}
  
declare module '*.gif' {
    const value: any;
    export default value;
}

declare module '*.json' {
    const jsonValue: any;
    export default jsonValue;
}

在配置中添加 ts-loader

vue.config.js

chainWebpack: (config) => {
    config.module
    .rule('ts')
    .test(/\.ts$/)
    .use('ts-loader')
    .loader('ts-loader')
    .options({
        appendTsSuffixTo: [/\.vue$/],
    })
    .end()
}

添加typscript类型声明文件

index.d.ts

declare module '*.js'

declare module '*.ts'

declare module '*.png' {
    const value: any;
    export default value;
}
  
declare module '*.gif' {
    const value: any;
    export default value;
}

declare module '*.json' {
    const jsonValue: any;
    export default jsonValue;
}

//添加库的TypeScript类型声明
declare module ' ';

现在就可以在我们原本的项目中使用ts文件了

参考链接 cli.vuejs.org/zh/guide/we…