vue使用ts 引入组件_原有 vue 项目接入 typescript

为什么要接入type

java由于自身的弱类型，使用起来非常灵活。

这也就为大型项目、多人协作开发埋下了很多隐患。如果是自己的私有业务倒无所谓，主要是对外接口和公共方法，对接起来非常头疼。主要表现在几方面：

参数类型没有校验，怎么传都有，有时会出现一些由于类型转换带来的未知问题。

接口文档不规范，每次都要通过读代码才能知道传什么，怎么传

接口编写符合规范，但是公共库中有大量的处理类型校验的代码

这就非常不利于工程标准化。于是我们决定引入type进行代码层面的强校验。

概览

原有vue项目接入ts主要包含下面几大步骤：

安装type相关npm包

修改webpack和ts配置文件

项目公共库和vue文件改造ok，我们开始1. 安装type相关npm包

这块有个非常重要的点需要注意：

就是要根据你本地的环境，去升级对应版本的type

这块是很多初次使用的同学都会遇到的问题。

因为只是看到了官网的教程，一步一步安装完发现各种报错。主要问题就是webpack版本不匹配，或者其他一些npm包版本不匹配

以我本地为例：

我本地环境是webpack3，所以直接安装最新版本的type，控制台会报错webpack版本过低的问题。

所以你要不把自己的webpack升级到webapck4.要不就采用与之相匹配的type版本。

我选择的是后者，因为直接给自己的项目升级到webapck4，会花费更长的时间。我们用的脚手架是公司内部统一的。里面集成了很多底层通用的基础服务。冒然升级webpack4会带来更大的麻烦，更何况项目时间比较紧迫，你懂得。

下面是我安装的包和对应的版本：

"type": "^3.1.4" (这个是必须的，ts库)

"ts-loader": "^3.5.0" (识别ts的laoder)

"tslint": "^5.11.0" (tslint校验库)

"tslint-loader": "^3.5.4" (tslint的loader)

"tslint-config-standard": "^8.0.1" (用于tslint默认校验规则)

"vue-property-decorator": "^7.2.0" (用于在.vue文件中使用ts语法)2. 修改配置文件

修改webpack配置文件(加入ts的相关配)

base: {

entry: {

...

app: resolve('src/main.ts') // 把main.js改为main.ts

}

...

resolve: {

...

extensions: ['vue', '.js', '.ts']

}

module: {

rules: [

...,

{ // 加入对文件的ts识别

test: /.ts$/,

exclude: /node_modules/,

enforce: 'pre',

loader: 'tslint-loader'

}, {

test: /.tsx?$/,

loader: 'ts-loader',

exclude: /node_modules/,

options: {

appendTsSuffixTo: [/.vue$/],

}

}

]

}

注意： main.js改成main.ts后，还要做一些改造，这个比较简单，按照tslint的错误提示改就可以了

在根目录下创建tslint.json(类似eslint，这里设定一个校验标准)

{

"extends": "tslint-config-standard",

"globals": {

"require": true

}

}

在根目录创建tsconfig.json(type配置文件)

{

"compilerOptions": {

// 编译目标平台

"target": "es5",

// 输出目录

"