Typescript not working in vue SFC - laravel

Question

Well, after spending literally all day and 10 hours trying to get up and running with typescript, I'm at a loss why this isn't working.
NOTES:
- using Laravel and webpack, fresh install, nothing fancy that would have broken any of the 50+ guides I've looked at in setting this up
- all normal .ts files compile, but I cannot use in my vue components.
Webpack.mix.js file:
mix.js('resources/assets/js/app.ts', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.webpackConfig({
devtool: mix.inProduction() ? '' : 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
},
exclude: /node_modules/,
}
],
},
resolve: {
extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
alias: {
styles: path.resolve(__dirname, 'resources/assets/sass'),
'#': path.resolve(__dirname, 'resources/assets/js'),
},
},
});
tsconfig.json:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"experimentalDecorators": true,
"module": "es2015",
"moduleResolution": "node",
"noImplicitAny": false,
"strict": true,
"strictPropertyInitialization": false,
"target": "es2015",
"lib": [
"dom",
"es2017"
],
"paths": {
"#/*": [
"resources/assets/js/*"
]
}
},
"include": [
"resources/assets/js/**/*.ts",
"resources/assets/js/**/*.vue"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
sfc.d.ts file:
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
Any help would be greatly appreciated, I'll continue looking around but I feel as though I've exhausted most of the routes I can take.

Answer 1

I hope you are using vue-loader or something similar to be able to write single-file components(SFCs) in the first place.
This sfc.d.ts should be renamed to a vue.shims.d.ts or index.d.ts where type definitions are held. You don't need to import this file anywhere. Typescript will use it this whenever it encounters a .vue file
Now you can create an SFC with lang attribute set to ts.
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
Here is a Microsoft Doc that explains the same. In our project, I have defined it as index.d.ts.