TPower Design

Appearance

Return to top
  1. 根据 webpack 版本增加两个包：ts-loader， ypescript

例： webpack4：

npm install ts-loader@8.1.0 typescript@4.4.4 --save-dev
  1. 项目根目录下创建 tsconfig.json 文件，配置如下：
json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx",
    "src/**/*.vue"
  ],
  "exclude": ["node_modules", "dist", "release"]
}
  1. vue.config.js 增加配置如下：
js
chainWebpack: (config) => {
  // ...
  config.module
    .rule('ts')
    .test(/\.(ts|tsx)?$/)
    .use('ts-loader')
    .loader('ts-loader')
    .end();
};
  1. demo
  • vue

    示例组件: 给传入的 props-testList 加类型校验

vue
<template>
  <div>
    <span v-for="(item, index) in newArr" :key="index">
      {{ item }}
    </span>
  </div>
</template>

<script>
import { testFn } from './index.ts';
export default {
  name: 'TransCom',
  props: {
    testList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      newArr1: [],
    };
  },
  created() {
    this.newArr1 = testFn(this.testList);
  },
};
</script>
  • ts

    返回一个属性为 string 的数组

ts
interface Item {
  id: string;
  name: string;
}

type Items = Item[];

type rtValue = string[];

export const testFn = (users: Items): rtValue => {
  let a: rtValue = [];
  users.forEach((record) => {
    a.push(record.name);
  });
  return a;
};