ts-transformer-vue-props

A TypeScript custom transformer which generate vue3 props for given type.

How to use this package

This package exports 2 functions. One is props which is used in TypeScript codes to obtain props of given type, while the other is a TypeScript custom transformer which is used to compile the props function correctly.

How to use props

import { props } from 'ts-transformer-vue-props';

interface Props {
  id: string;
  name: string;
  age: number;
}
const p = props<Props>();

console.log(p);
--->
{
    "id": String,
    "name": String,
    "age": Number
}

How to use the custom transformer

Unfortunately, TypeScript itself does not currently provide any easy way to use custom transformers (See https://github.com/Microsoft/TypeScript/issues/14419). The followings are the example usage of the custom transformer.

webpack (with ts-loader or awesome-typescript-loader)

// webpack.config.js
const propsTransformer = require('ts-transformer-vue-props/transformer').default;

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader', // or 'awesome-typescript-loader'
        options: {
          // make sure not to set `transpileOnly: true` here, otherwise it will not work
          getCustomTransformers: program => ({
              before: [
                  propsTransformer(program)
              ]
          })
        }
      }
    ]
  }
};

Rollup (with rollup-plugin-typescript2)

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import propsTransformer from 'ts-transformer-vue-props/transformer';

export default {
  // ...
  plugins: [
    resolve(),
    typescript({ transformers: [service => ({
      before: [ propsTransformer(service.getProgram()) ],
      after: []
    })] })
  ]
};

ttypescript

See ttypescript's README for how to use this with module bundlers such as webpack or Rollup.

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "plugins": [
      { "transform": "ts-transformer-vue-props/transformer" }
    ]
  },
  // ...
}

License

MIT