https://blog.csdn.net/u014633852/article/details/73706459

https://segmentfault.com/a/1190000011878086  这个是另一个typescript配置的文件

>npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

vue与TypeScript集成配置最简教程

vue与TypeScript集成配置最简教程

前言
初始化项目
配置
测试
进阶

前言

Vue的官方文档没有给出与TypeScript集成的具体步骤，网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异，让人无从下手。

下面我就给出vue-cli建立的项目与TypeScript集成的最简配置。

初始化项目

首先用vue-cli建立webpack项目。这里为了演示方便，没有打开router和eslint等，可以根据自身情况打开。

# vue init webpack vue-typescript

? Project name vue-typescript

? Project description A Vue.js project

? Author

? Vue build standalone

? Install vue-router? No

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? No

? Setup e2e tests with Nightwatch? No

1
2
3
4
5
6
7
8
9
10

安装TypeScript相关依赖和项目其余依赖，用npm或cnpm

# cd /vue-typescript

# npm install typescript ts-loader --save-dev

# npm install

1
2
3

resolve: {

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

  }

配置

修改目录下bulid/webpack.base.conf.js文件，在文件内module>rules添加以下规则

{

  test: /\.tsx?$/,

  loader: 'ts-loader',

  exclude: /node_modules/,

  options: {

    appendTsSuffixTo: [/\.vue$/],

  }

},

// 从这里复制下面的代码就可以了

        // 如果之前按照起手式配置的同学，请替换配置

      {

        test: /\.tsx?$/,

        exclude: /node_modules/,

        enforce: 'pre',

        loader: 'tslint-loader'

      },

      {

        test: /\.vue$/,

        loader: 'vue-loader',

        options: Object.assign(vueLoaderConfig, {

          loaders: {

            ts: "ts-loader",

            tsx: "babel-loader!ts-loader"

          }

        })

      },

      {

        test: /\.tsx?$/,

        exclude: /node_modules/,

        use: [

          "babel-loader",

          {

            loader: "ts-loader",

            options: { appendTsxSuffixTo: [/\.vue$/] }

          }

        ]

      },

      // 复制截止

1
2
3
4
5
6
7
8

在src目录下新建一个文件vue-shims.d.ts，用于识别单文件vue内的ts代码

declare module "*.vue" {

  import Vue from "vue";

  export default Vue;

}

1
2
3
4
5

在项目根目录下建立TypeScript配置文件tsconfig.json

{

  "compilerOptions": {

    "strict": true,

    "module": "es2015",

    "moduleResolution": "node",

    "target": "es5",

    "allowSyntheticDefaultImports": true,

    "lib": [

      "es2017",

      "dom"

    ]

  }

}

然后在 tsconfig.json中，添加对jsx的支持

 

  "compilerOptions": {

    "jsx": "preserve"

    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

重命名src下的main.js为main.ts

修改webpack.base.conf.js下的entry>app为'./src/main.ts'

修改src下的App.vue文件，在

<script lang="ts">

1

测试

下面可以测试是否集成成功，编辑src/components/Hello.vue文件，修改

<script lang="ts">

  import Vue, {ComponentOptions} from 'vue'

  export default {

    name: 'hello',

    data() {

      return {

        msg: 'this is a typescript project now'

      }

    }

  } as ComponentOptions<Vue>

</script>

1
2
3
4
5
6
7
8
9
10
11

运行项目

# npm run dev

1

测试成功，现在是一个TypeScipt项目了

进阶

配置官方推荐的vue-class-component，https://cn.vuejs.org/v2/guide/typescript.html

安装开发依赖

# npm install --save-dev vue-class-component

1

修改ts配置文件，增加以下两项配置

"allowSyntheticDefaultImports": true,

"experimentalDecorators": true,

1
2

改写我们的Hello组件

<script lang="ts">

  import Vue from 'vue'

  import Component from 'vue-class-component'

  @Component

  export default class Hello extends Vue {

    msg: string = 'this is a typescript project now'

  }

</script>

1
2
3
4
5
6
7
8

使用vue-class-component后，初始数据可以直接声明为实例的属性，而不需放入data() {return{}}中，组件方法也可以直接声明为实例的方法，如官方实例，更多使用方法可以参考其官方文档

https://github.com/vuejs/vue-class-component#vue-class-component

import Vue from 'vue'

import Component from 'vue-class-component'

// @Component 修饰符注明了此类为一个 Vue 组件

@Component({

  // 所有的组件选项都可以放在这里

  template: '<button @click="onClick">Click!</button>'

})

export default class MyComponent extends Vue {

  // 初始数据可以直接声明为实例的属性

  message: string = 'Hello!'

  // 组件方法也可以直接声明为实例的方法

  onClick (): void {

    window.alert(this.message)

  }

}

vue与TypeScript集成配置最简教程的相关教程结束。