johnsoncodehk / vue-tsc

vue-tsc --noEmit && vite build
https://www.npmjs.com/package/vue-tsc
MIT License
241 stars 6 forks source link

Does vue-tsc --noEmit not support vue template syntax? Or is there something wrong with my code? #38

Closed bullub closed 3 years ago

bullub commented 3 years ago

Executing vite or vite build or tsc --noEmit can work normally, but executing vue-tsc --noEmit or vue-tsc --noEmit --skipLibCheck can not work normally, showing the same error.

image

Below is the relevant code.

package.json

{
....
"dependencies": {
"vue": "^3.0.11"
},
"devDependencies": {
"@commitlint/cli": "^12.1.4",
"@commitlint/config-conventional": "^12.1.4",
"@types/jest": "^26.0.23",
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"@vitejs/plugin-vue": "^1.2.2",
"@vitejs/plugin-vue-jsx": "^1.1.5",
"@vue/compiler-sfc": "^3.0.11",
"@vue/test-utils": "^2.0.0-rc.6",
"babel-jest": "^27.0.2",
"commitizen": "^4.2.4",
"commitlint-config-cz": "^0.13.2",
"cypress": "^7.4.0",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^7.27.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-cypress": "^2.11.3",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsdoc": "^35.0.0",
"eslint-plugin-no-null": "^1.0.2",
"eslint-plugin-vue": "^7.10.0",
"husky": "^4.3.8",
"jest": "^26.6.3",
"less": "^4.1.1",
"ts-jest": "^27.0.0-next.12",
"typescript": "^4.3.1",
"vite": "^2.3.6",
"vue-jest": "^5.0.0-alpha.9",
"vue-tsc": "0.0.24"
}
...
}

src/components/list.tsx

import { SetupContext } from 'vue';
export interface  ListComponentConfig {
  data: string[],
};

function List({ data }: ListComponentConfig, { slots }: SetupContext) {
  return (
    <div>
      {slots.default && slots.default('abc')}
      <div>
        {data.join('')}
      </div>
    </div>
  );
}

export default List;

src/views/bill/index.vue

<template>
  <List :data="list">
    <template #default="props">
      Great !! {{ props }}
    </template>
  </List>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { List } from '@/components/list';

export interface BillComponent {
  list: string[];
}

export default defineComponent({
  name: 'BillComponent',
  components: {
    List,
  },
  setup(props): BillComponent {
    return {
      list: reactive(['1', '2']),
    };
  },
});
</script>
johnsoncodehk commented 3 years ago

v0.0.24 is outdated, please update to v0.1.7.