Question

好吧，在花了一整天的时间和10个小时试图使用打字稿来运行之后，我不知道为什么这不起作用。

注意：
- 使用Laravel和webpack，全新安装，没有任何花哨的东西会破坏我在设置时所看到的50多个指南中的任何一个 - 所有正常的.ts文件都可以编译，但我不能在我的vue组件中使用。

Webpack.mix.js文件：

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文件：

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

任何帮助都会非常感激，我会继续环顾四周，但我觉得我已经筋疲力尽了大部分的路线。

Answer 1

我希望您首先使用vue-loader或类似的东西才能编写单文件组件（SFC）。

此sfc.d.ts应该重命名为保存类型定义的vue.shims.d.ts或index.d.ts。您无需在任何地方导入该文件。只要遇到.vue文件，Typescript都会使用它现在，您可以将lang属性设置为ts来创建SFC。

<script lang="ts">
import Vue from "vue";

export default Vue.extend({

以下是Microsoft Doc的解释。在我们的项目中，我将其定义为index.d.ts。

打字稿不适用于vue SFC

1 个答案: