TypeScript--配置篇到这里,基本配置就完成了,但是----你以为事情就这样结束了吗,并没有... 这里配置基本

本配置是在vue-cli的基础脚手架上进行配置的

1.安装基础依赖 typescript,ts-loader,vue-property-decorator

typescript是ts的基础库

ts-loader是webpack编译typescript的库

vue-property-decorator是vue对应的语法装饰器

2.编写tsconfig.json文件(tsconfig配置文件,这里给的例子是官方的默认版本)

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。

{
    "compilerOptions": {
        "sourceMap": true,
        "types": ["node"],
        "strict": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "experimentalDecorators": true
    },
    "include": [
        "./src/**/*"
    ],
    "lib": [
      "dom",
      "es2015",
      "es2015.promise"
    ]
}

各配置项分别代表什么,这里有一份清单,可以对照着看一下tsconfig.json配置详解

3.webpack配置ts-loader

// resolve配置
resolve: {
    ...,
    extensions: [".ts", ".js", ".vue", ".json"], //加上ts
    ...
  },

// loader配置，添加一个tsx?$的配置，匹配ts(tsx)文件
module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [ /\.vue$/ ],
          appendTsxSuffixTo: [ /\.vue$/ ]
        }
      }
    ]
  }

4.src目录添加vue模块、tsx模块注入配置文件 vue-shims.d.ts tsx-shims.d.ts(这里可能刚开始用的有点蒙,先别蒙,先这么配,后面慢慢的用着你就知道怎么回事了)

vue-shims.d.ts
import Vue from "vue";
import VueRouter, { Route } from "vue-router"

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

declare module "vue/types/vue" {
    interface Vue {
        $router: VueRouter;
        $route: Route;
        $store: any;
        $next: any;
    }

}

tsx-shims.d.ts
import Vue, { VNode } from 'vue'

declare global {
    namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

到这里,基本配置就完成了,但是----你以为事情就这样结束了吗,并没有...

你会遇到TS2688: Cannot find type definition file for 'node'

这是为什么呢? 原因是node.js不是内置对象的一部分，如果想用typescript写Node.js，则需要引入第三方声明文件npm install @types/node --save-dev

@types下面是所引放第三方库的静态资源文件，比如我们要引入echarts插件，需要先安装@type/echarts，这样就可以引用到了，总结，@types是npm的一个分支，用来存放*.d.ts文件，如果对应的npm包存放在@types种，要使用必须下载！如果是自己本地的*.d.ts申明文件，则和@types没有任何关系！

这里有一个重点，当我们引用的第三方库没有对应该的在.d.ts文件怎么办，这个时候我需要声明他的类型，比如项目里用到了v-charts,我们需要在src目录下新建一个v-charts.d.ts文件，内容为declare module 'v-charts/lib/line'

写在结尾

这里配置基本上不难,对应的网上这类的教程也很多,可以对照着看下,基本上按这么写,项目就可以跑起来了.

小技巧

1.引用组件必须要写上.vue后缀，不然会报错

2.$router我们常用的可能有这样写法

liClick (id: number) {
    this.$router.push({
        path: '/dashboard/topDetail',
        query: {id: id}
    })
}

看起来好像没有问题，其实是有问题的，从源码里我们可以看到$router是RawLocation这个类型的

export type RawLocation = string | Location;

export interface Location {
  name?: string;
  path?: string;
  hash?: string;
  query?: Dictionary<string | string[]>;
  params?: Dictionary<string>;
  append?: boolean;
  replace?: boolean;
}

type Dictionary<T> = { [key: string]: T }

接收的obj里的key的键值是string，所以要把query: {id: id}改成query: {id: id.toString}

3.json的引入

import business from 'src/assets/data/business.json'=>const business = require('src/assets/data/business.json')