TypeScript 支持

qinjs 支持使用 ts 开发，可参考 Vue.js TypeScript 支持 说明。

类型定义文件由 @fe6/qinjs-types 模块提供，安装后请注意配置 tsconfig.json 文件中的 compilerOptions > types 部分，如需其他小程序平台类型定义也可以安装，如：miniprogram-api-typings、mini-types。对于缺少或者错误的类型定义，可以自行在本地新增或修改并同时报告给官方请求更新。

开发方式

需要在创建项目时就指定 ts ，具体请另行参考文档TODO

修改 Typescript 配置

在根目录创建 tsconfig.json 文件，并进行个性化配置，推荐配置如下：

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "useDefineForClassFields": true,
    "resolveJsonModule": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "@fe6/qinjs-types"
    ]
  },
  "exclude": [
    "node_modules",
    "unpackage"
  ]
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "useDefineForClassFields": true,
    "resolveJsonModule": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "@fe6/qinjs-types"
    ]
  },
  "exclude": [
    "node_modules",
    "unpackage"
  ]
}

个性化配置是可选的，没有tsconfig.json时会自动使用默认配置运行。

TypeScript 支持兼容性说明

• qinjs 的 vue 文件支持最新版 ts 。

ts组件

声明 lang="ts" 后，该 vue 文件 import 进来的所有 vue 组件，均需要使用 ts 编写。

示例代码

改造 qin-badge.vue

<script lang="ts">
    // 仅展示需要修改的核心代码，完整代码请参考原来的组件。
  import Vue from 'vue';
  export default Vue.extend({
    props: {
      type: {
        type: String,
        default: 'default'
      },
      inverted: {
        type: Boolean,
        default: false
      },
      text: {
        type: [String, Number],
        default: ''
      },
      size: {
        type: String,
        default: 'normal'
      }
    },
    computed: {
      setClass(): string {
        const classList: string[] = ['qin-badge-' + this.type, 'qin-badge-size-' + this.size];
        if (this.inverted === true) {
          classList.push('qin-badge-inverted')
        }
        return classList.join(" ")
      }
    },
    methods: {
      onClick() {
        this.$emit('click')
      }
    }
  })
</script>

<script lang="ts">
    // 仅展示需要修改的核心代码，完整代码请参考原来的组件。
  import Vue from 'vue';
  export default Vue.extend({
    props: {
      type: {
        type: String,
        default: 'default'
      },
      inverted: {
        type: Boolean,
        default: false
      },
      text: {
        type: [String, Number],
        default: ''
      },
      size: {
        type: String,
        default: 'normal'
      }
    },
    computed: {
      setClass(): string {
        const classList: string[] = ['qin-badge-' + this.type, 'qin-badge-size-' + this.size];
        if (this.inverted === true) {
          classList.push('qin-badge-inverted')
        }
        return classList.join(" ")
      }
    },
    methods: {
      onClick() {
        this.$emit('click')
      }
    }
  })
</script>

在 index.vue 中引用 qin-badge 组件

<script lang="ts">
  import Vue from 'vue';
  import qinBadge from '../../components/qin-badge.vue';
  export default Vue.extend({
    data() {
      return {
        title: 'Hello'
      }
    },
    components:{
      qinBadge
    }
  });
</script>

<script lang="ts">
  import Vue from 'vue';
  import qinBadge from '../../components/qin-badge.vue';
  export default Vue.extend({
    data() {
      return {
        title: 'Hello'
      }
    },
    components:{
      qinBadge
    }
  });
</script>