Don't suport TS4.7.0 Instantiation Expressions feature.
Vue version
3.2.31
Link to minimal reproduction
Steps to reproduce
just types following codes(example in www.typescriptlang.org) https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-7.html#instantiation-expressions
interface Box<T> {
value: T;
}
function makeBox<T>(value: T) {
return { value };
}
type Hammer = 'hammer';
const makeHammerBox = makeBox<Hammer>;
What is expected?
Compile successfully
What is actually happening?
throw error
SyntaxError: [@vue/compiler-sfc] Unexpected token (9:37)
App.vue
7 | }
8 | type Hammer = 'hammer';
9 | const makeHammerBox = makeBox<Hammer>;
| ^
10 |
11 | import { ref } from 'vue'
at DE._raise (https://sfc.vuejs.org/assets/index.ea8e2cf9.js:58:2930)
at DE.raiseWithData (https://sfc.vuejs.org/assets/index.ea8e2cf9.js:58:2869)
at DE.raise (https://sfc.vuejs.org/assets/index.ea8e2cf9.js:58:2329)
System Info
System: OS: macOS 13.0 CPU: (8) x64 Apple M1 Pro Memory: 17.38 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 14.19.1 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 6.14.16 - /usr/local/bin/npm Browsers: Chrome: 107.0.5304.110 Firefox: 100.0 Safari: 16.1 npmPackages: vue: ^3.2.41 => 3.2.41
Any additional comments?
doc for typescript4.7.0 instantiation expressions https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-7.html#instantiation-expressions
And in my project
there is error throw by vue-loader too
ERROR in .xxxxx.vue?vue&type=script&lang=ts&setup=true (./node_modules/@quasar/app/lib/webpack/loader.js.transform-quasar-imports.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/@quasar/app/lib/webpack/loader.vue.auto-import-quasar.js??ruleSet[0].use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./xxx.vue?vue&type=script&lang=ts&setup=true)
Module Error (from ./node_modules/vue-loader/dist/index.js):
[@vue/compiler-sfc] Missing semicolon. (38:26)
/Users/hezhuohang/Workspace/broctagon-crm-admin-portal/src/pages/customer/customerDetail/CustomerBankcard/Form.vue
61 | });
62 | const dynamicFormRef = ref<InstanceType<typeof DynamicForm>>();
63 | type Test = typeof CrmForm<FormFields>;
| ^
64 | const f = () => CrmForm<FormFields>({});
65 | const formRef = ref<ReturnType<typeof f>>();
ERROR in ./xxx.vue?vue&type=script&lang=ts&setup=true (./node_modules/@quasar/app/lib/webpack/loader.js.transform-quasar-imports.js!./node_modules/ts-loader/index.js??clonedRuleSet-3.use[0]!./node_modules/@quasar/app/lib/webpack/loader.vue.auto-import-quasar.js??ruleSet[0].use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./xxxvue?vue&type=script&lang=ts&setup=true)
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read property 'content' of null
- select.js:23 selectBlock
[broctagon-crm-admin-portal]/[vue-loader]/dist/select.js:23:45
- index.js:67 Object.loader
[broctagon-crm-admin-portal]/[vue-loader]/dist/index.js:67:41
const makeHammerBox = makeBox< Hammer >('hammer');
const makeHammerBox = makeBox< Hammer >('hammer');
I suggest you read the linked TS docs.
