如何在Nativescript-Vue项目中添加TypeScript？

Question

我已经努力了几天，试图在一个简单的模板生成的Nativescript-Vue项目中让Typescript工作。这是我所做的：

1. 使用以下命令创建项目：

vue init nativescript-vue/vue-cli-template typescript2

2. 按照这里的说明进行操作：https://nativescript-vue.org/blog/using-typescript-in-nativescript-vue/

3. 添加一个包含以下内容的env.d.ts文件：

declare var TNS_ENV: string;

4. 添加一个包含以下内容的shims.vue.d.ts文件：

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

5. 在webpack.config.js中添加.ts扩展名以解析扩展名。
6. 在webpack.config.js中添加以下规则。

{
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    loader: "ts-loader",
    options: {
        appendTsSuffixTo: [/\.vue$/]
    }
},

7. 然后使用以下命令运行应用：

tns run android --bundle

这将导致以下错误：

ERROR in Entry module not found: Error: Can't resolve './main.js' in '/Data/dev/test/Nativescript/typescript2/app'
Webpack compilation complete. Watching for file changes.
Webpack build done!
Executing before-shouldPrepare hook from /Data/dev/test/Nativescript/typescript2/hooks/before-shouldPrepare/nativescript-dev-webpack.js
Preparing project...
Executing before-prepareJSApp hook from /Data/dev/test/Nativescript/typescript2/hooks/before-prepareJSApp/nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from /Data/dev/test/Nativescript/typescript2/hooks/after-prepare/nativescript-dev-webpack.js
Building project...
Gradle build...
         + setting applicationId
         + applying user-defined configuration from /Data/dev/test/Nativescript/typescript2/app/App_Resources/Android/app.gradle
Using support library version 28.0.0
         + adding nativescript runtime package dependency: nativescript-optimized-with-inspector
         + adding aar plugin dependency: /Data/dev/test/Nativescript/typescript2/node_modules/nativescript-socket.io/platforms/android/nativescript_socket.io.aar
         + adding aar plugin dependency: /Data/dev/test/Nativescript/typescript2/node_modules/tns-core-modules-widgets/platforms/android/widgets-release.aar
(node:3079) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
java.io.FileNotFoundException: /Data/dev/test/Nativescript/typescript2/platforms/android/build-tools/sbg-bindings.txt (No such file or directory)
        at java.io.FileInputStream.open0(Native Method)
        at java.io.FileInputStream.open(FileInputStream.java:195)
        at java.io.FileInputStream.<init>(FileInputStream.java:138)
        at java.io.FileInputStream.<init>(FileInputStream.java:93)
        at org.nativescript.staticbindinggenerator.Generator.getRows(Generator.java:145)
        at org.nativescript.staticbindinggenerator.Generator.generateBindings(Generator.java:85)
        at org.nativescript.staticbindinggenerator.Generator.writeBindings(Generator.java:63)
        at org.nativescript.staticbindinggenerator.Main.main(Main.java:48)
Project successfully built.
Installing on device FA7A11A03046...
Successfully installed on device with identifier 'FA7A11A03046'.
Refreshing application on device FA7A11A03046...
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:
System.err:
System.err: Error calling module function
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: "./vendor", relative to: app/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:553)
System.err:     com.tns.Runtime.run(Runtime.java:545)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:5882)
System.err:     android.app.ActivityThread.access$1100(ActivityThread.java:200)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1651)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:193)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: File: "<unknown>, line: 1, column: 265
System.err:
System.err: StackTrace:
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 1, column: 61
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: "./vendor", relative to: app/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:553)
System.err:     com.tns.Runtime.run(Runtime.java:545)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:5882)
System.err:     android.app.ActivityThread.access$1100(ActivityThread.java:200)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1651)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:193)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: File: "<unknown>, line: 1, column: 265
System.err:
System.err: StackTrace:
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 1, column: 61
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5887)
System.err:     at android.app.ActivityThread.access$1100(ActivityThread.java:200)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1651)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:193)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: Caused by: com.tns.NativeScriptException:
System.err:
System.err: Error calling module function
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: "./vendor", relative to: app/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:553)
System.err:     com.tns.Runtime.run(Runtime.java:545)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:5882)
System.err:     android.app.ActivityThread.access$1100(ActivityThread.java:200)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1651)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:193)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: File: "<unknown>, line: 1, column: 265
System.err:
System.err: StackTrace:
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 1, column: 61
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: "./vendor", relative to: app/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:553)
System.err:     com.tns.Runtime.run(Runtime.java:545)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:5882)
System.err:     android.app.ActivityThread.access$1100(ActivityThread.java:200)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1651)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:193)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6680)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: File: "<unknown>, line: 1, column: 265
System.err:
System.err: StackTrace:
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/starter.js', line: 1, column: 61
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err:
System.err:     at com.tns.Runtime.runModule(Native Method)
System.err:     at com.tns.Runtime.runModule(Runtime.java:553)
System.err:     at com.tns.Runtime.run(Runtime.java:545)
System.err:     at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1154)
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5882)
System.err:     ... 8 more
Successfully synced application org.nativescript.application on device FA7A11A03046.
^[[A^CExecuting after-watch hook from /Data/dev/test/Nativescript/typescript2/hooks/after-watch/nativescript-dev-webpack.js
Stopping webpack watch
Executing after-watch hook from /Data/dev/test/Nativescript/typescript2/hooks/after-watch/nativescript-dev-webpack.js
Stopping webpack watch

有什么我错过的吗？我希望在即将开始的Nativescript-Vue项目中获得Typescript的好处。

这是以下版本：

Nativescript CLI: 5.0.3
Nativescript-Vue: 2.0.2
Webpack: 4.27.1

更新：快速提醒，在第一步创建应用程序时，我选择了简单模板，安装了VueX和Vue-Devtools。

- Jason

---

你能否在不添加 TypeScript 的情况下运行该项目？我使用 vue init nativescript-vue/vue-cli-template typescript2 创建了一个新项目，并运行了 tns run android --bundle 命令，但仍然出现相同的错误。 - Narendra

@NarendraMongiya 是的，我已经成功运行它了，没有使用Typescript也没有问题。也许你可以检查一下你正在使用的CLI、Nativescript-Vue和Webpack的版本？ - Jason

Answer 1

现在还有一个Vue CLI 3插件用于Nativescript-Vue，它将在Javascript或Typescript中创建整个项目，并利用Vue CLI 3基础设施来帮助您。免责声明：我是当前插件主要贡献者。

它还包括在Web和Native项目之间共享代码的能力，或者您可以继续只做本地项目。

您可以使用CLI 3 UI体验或使用终端。无论哪种方式，您都可以执行以下操作：

1. 创建一个新的Vue项目，并确保选择Typescript。在终端中，这将是vue create my-app，然后在提示中选择Typescript。 2. 如果您在终端中，请确保更改到项目目录。如果您在UI中，则不需要这样做。 3. 将插件添加到项目中。在终端中，这将是vue add vue-cli-plugin-nativescript-vue。

- Jawa the Hutt

Answer 2

更新（2019年1月30日）：好消息 - 我认为他们正在使用此PR中的模板添加对Typescript的开箱即用支持。

因此，从现在开始，在使用该模板启动项目时，我们应该能够选择Typescript作为语言选项。

---

我曾经遇到过同样的问题，这是我在我的Nativescript-Vue项目中添加TypeScript的方法。（由于我的声望不足以添加评论，所以我必须将其发布为答案）

1. 使用 vue init nativescript-vue/vue-cli-template <project-name> 创建项目
   • 在创建项目时会有一个关于 webpack.config.js 的警告，需要运行 ./node_modules/.bin/update-ns-webpack --configs
   • Vue Devtools 无法与 tns preview 一起使用，因此我也将其禁用了
2. 添加以下内容：
   • 安装 typescript 和 vue 作为 devDependencies
   • 将 app/main.js 重命名为 app/main.ts
   • 在 app/main.ts 中，将 import App from './components/App' 改为 import App from './components/App.vue'
   • 添加 tsconfig.json（从 这个启动项目 复制，并注释掉 "strict": true,）
   • 在 webpack.config.js 中，在 alias 下添加 'vue$': 'nativescript-vue'，在 module.rules 下添加 exclude: /node_modules|vue\/src/,（对于 ts 的那个 - 详情请见）
   • 如您在步骤 3 和 4 中所提到的，我也已经相应地在 types/ 文件夹下创建了 env.d.ts 和 shims.vue.d.ts（请注意，在我复制的 tsconfig.json 文件中，它定义了 "typeRoots": ["types"]）
3. 我已使用 tns preview --bundle 进行了测试
   • 应用在我的安卓手机上运行良好（没有错误，在手机上可以看到更改）
   • 如果需要，我可以测试一下是否可以使用命令 tns run android --bundle 运行

希望以上内容能够帮到您。

版本

使用的版本如下：

- Nativescript CLI：5.1.0 - nativescript-vue：2.0.2 - webpack：4.28.3

参考资料

以下是参考资料：

1. 这是我为了将TypeScript添加到项目中所做的git提交。 2. 官方博客文章关于将TypeScript添加到nativescript-vue中非常有帮助，但遗憾的是，在按照这些步骤后它并没有立即起作用（可能是因为我使用了不同的vue-init模板）。 3. 当然，感谢这个stackoverflow问题列出的详细步骤，它给了我修复项目的方向 :-)

- H.T. Koo

---

抱歉回复慢了，但我刚有机会尝试这个，它起作用了！哇！ - Jason

没问题，很高兴它起作用了。 :-) 顺便说一下，关于这个问题的更新是，我认为他们正在这个PR中添加开箱即用的TypeScript支持。我会相应地更新我的答案。 - H.T. Koo

Answer 3

如果您喜欢模板，支持nativescript导航器（路由器）、vuex、typescript/eslint、prettier，并使用面向模块的方法（https://mnapoli.fr/organizing-code-into-domain-modules/）进行结构化，以便在应用程序增长时轻松维护，那么您可以克隆我们的开源项目：https://github.com/Lyduz/nitibo。

- Karl Anthony Baluyot