Don't suport TS4.7.0 Instantiation Expressions feature.

[johanninos]

Vue version

3.2.31

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9kcFugzAMhl/Fy4VWKqBdGUXaTn2ASrvkwqhp6YgTOYFtQrz7DIxq2qTmFMf//8X5M6hn55K+Q5Wp3FfcuAAeQ+egLem81yp4rQpNDQXkuqwQXuxnfixg0ASy+rLtMIPjk6ZRU91RFRpLYMp3XISbVbFdLSx4JhgWL4yLNXw5hENpDDLsIbrMu0h6lSUfZuDSFawI1guWs0J0MqNxloOAGWsYoWZrIJKnRdO9N5A/i10Um+iAbWvh1XJ7eoi2mvJ0CUCeK0VA49oyoFQA+eWxGIbZPI55KtV82pDrAvSxsSdsJSzpz2nl6c2tdmqZKzalS67ekiQ9J6F/GhJwtmajlcw71VpdQnA+S1NfV9P/XH1i+ZzKLuGOQmMwQW/iN7YfHlnAWu1+MVI57JFjRjohI99j/pH+405Y+aFRjd+jF8C6

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
  

[liuseen-l]

const makeHammerBox = makeBox< Hammer >('hammer');

[LinusBorg]

const makeHammerBox = makeBox< Hammer >('hammer');

I suggest you read the linked TS docs.

[sxzz]

53e3533

P.S Wait vuejs/repl#58 for Vue repl