How should one begin a new NativeScript-Vue project while implementing Typescript support in the most effective manner?

Is it possible to incorporate Typescript into Vue instance methods? I found guidance on the blog page of nativescript-vue.org.

Whenever I initiate a new nativescript-vue project using 

vue init nativescript-vue/vue-cli-template <project-name>
, some warnings pop up on the debug screen.

tns debug android

These are the error lines that always appear...

JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> CreateElement(NativePage)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> CreateElement(NativeActionBar)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> AppendChild(ElementNode(nativepage), ElementNode(nativeactionbar))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> CreateElement(nativegridlayout)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> CreateElement(nativelabel)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> AppendChild(ElementNode(nativegridlayout), ElementNode(nativelabel))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> AppendChild(ElementNode(nativepage), ElementNode(nativegridlayout))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.5.0)} -> AppendChild(ElementNode(nativeframe), ElementNode(nativepage))'

What do these boilerplate warnings prefixed with JS:... signify?

UPDATE

The JS error lines began appearing after I added 

@vue/devtools nativescript-toasty nativescript-socketio nativescript-vue-devtools
.

Even after removing them, the console warnings persist.

I'm starting to question if the information on the quick start page is outdated? Especially since there have been no recent updates to the Vue-cli-template in the last 30 days.

NOTE: Projects created with tns create do not encounter such errors. Only vue-cli-template projects seem to display warnings.

typescriptnativescriptvue-clinativescript-vuevue-devtools

Answer №1

The information provided in the log is related to renderer logs and not errors or warnings.

To disable these renderer logs, you can use the following code:

Vue.config.silent = true

// Starting from NativeScript-Vue 2.5.0-alpha.3 version, you can now turn off renderer logs
// while keeping other important logs intact by setting:
Vue.config.suppressRenderLogs = false

You can add this code snippet in either app.js or main.js file, depending on the template you are using.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for me to define TypeScript interfaces to be used in vanilla JavaScript projects within VSCode?

While using the MS VisualCode editor, I am attempting to implement type checking in my Javascript code. I want to maintain the flexibility of Javascript while also benefiting from type checking interfaces and data structures. Based on the vscode documenta ...

javascripttypescriptinterfacevisual-studio-codetypechecking

The exploration of child routes and modules

I'm currently working on a somewhat large project and I've decided to break it down into modules. However, I'm facing an issue with accessing the routes of admin.module.ts. In my app.module, I have imported the admin Module. imports: [ Br ...

angulartypescript

What is the best approach for handling errors in a NestJS service?

const movieData = await this.movieService.getOne(movie_id); if(!movieData){ throw new Error( JSON.stringify({ message:'Error: Movie not found', status:'404' }) ); } const rating = await this.ratingRepository.find( ...

javascriptnode.jstypescriptnestjs

How can Karma unit tests with Jasmine in a TypeScript Node project accurately measure code coverage, even with external dependencies?

We have a unique situation with the code coverage of our project involving a node dependency. It's important to note that the npm dependency source code is actually part of our project, as we are responsible for its development and publication. Here&a ...

typescriptkarma-jasmineistanbulkarma-coverage

Uncertainty surrounding the combination of observables due to their varying outcomes

Currently, I am developing an angular2 application that implements the ngrx store approach for state management. The source code for the app is available on github here The Issue at Hand The specific challenge I am encountering with this method involves ...

angulartypescriptreduxobservablengrx

Tips for accessing the following element within an array using a for loop with the syntax for (let obj of objects)

Is there a way to access the next element in an array while iterating through it? for (let item of list) { // accessing the item at index + 1 } Although I am aware that I could use a traditional for loop, I would rather stick with this syntax. for (i ...

javascriptarraystypescriptobject

Ways to EXPAND styled components from imported components

After researching the styled components documentation, I discovered that in version 4+, the "as" prop should allow me to extend my imported component. However, I am having trouble getting it to work. COMPONENT: type Options = { margin: strin ...

reactjstypescriptstyled-components

The .ts source file is mysteriously missing from the development tool's view after being deployed

When I work locally, I can see the .ts source files, but once I deploy them, they are not visible in any environment. Despite setting my sourcemap to true and configuring browserTargets for serve, it still doesn't work. Can someone help with this issu ...

angulartypescriptgoogle-chrome-devtoolspackage.jsonangular.json

Error: Reference to an undeclared variable cannot be accessed. TypeScript, Cordova, iOS platforms

Can anyone offer some advice on what might be the issue? I'm encountering an error while building my Ionic app on the IOS platform, but everything is running smoothly on Android. ReferenceError: Cannot access uninitialized variable. service.ts:31 O ...

iostypescriptcordovaionic-frameworkreferenceerror

How can I subtract a value from my array in Angular?

I've been troubleshooting this problem for a while now and I'm hoping that someone here can assist me with finding a solution. The issue at hand involves an array object containing various values such as id, title, amountCounter. Specifically, t ...

arraysangulartypescriptdecrement

The sum is being treated as a concatenation instead of an addition in this case

Why is the somma value showing the concatenation of totaleEnergetico and totaleStrutturale instead of a sum? RiepilogoCombinatoStComponent.ts export class RiepilogoCombinatoStComponent implements OnInit { constructor() { } interventi: AssociazioneI ...

javascriptarraysangulartypescriptsum

When an input event is dispatched in a unit test, the value changes of a form are not activated

Currently, I am testing a scenario where I need to verify if a value changes on the form when input is typed in. This particular project utilizes Nrwl nx as well as jest for testing purposes. The component code snippet is as follows: export class InputNu ...

angulartypescriptunit-testingjestjsnrwl-nx

I'm encountering a Typescript error where I'm unable to assign a function to RefObject.current and it's indicating that the function is not callable

Does anyone know why assigning a function type to a ref.current type is causing me issues? useEffect(() => { savedHandler.current = handler; // ERROR HERE: }, [handler]); TS2741: Property 'current' is missing in type '(e: Chang ...

reactjstypescript

Enhancing class functionality with decorators in TypeScript

Over on the TypeScript's Decorator reference page, there is a code snippet showcasing how to override a constructor with a class decorator: function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) { return class extends con ...

typescriptdecoratormixins

Despite being listed in the entry components, HelloComponent is not actually included in the NgModule

Check out my StackBlitz demo where I am experimenting with dynamically instantiating the HelloComponent using the ReflexiveInjector. The HelloComponent is added to the app modules entryComponents array. Despite this setup, I am still encountering the foll ...

javascriptangulartypescript

Mapping a TypeScript tuple into a new tuple by leveraging Array.map

I attempted to transform a TypeScript tuple into another tuple using Array.map in the following manner: const tuple1: [number, number, number] = [1, 2, 3]; const tuple2: [number, number, number] = tuple1.map(x => x * 2); console.log(tuple2); TypeScript ...

typescripttuples

How can a property be made mandatory in Typescript when another property is set as optional?

Currently, I am unsure about what to search for in order to fulfill the following requirement. Specifically, I am utilizing the given type for react props: interface ComponentProps { message : string, minValue? : number, minValueValidationMessage? ...

reactjstypescriptreact-props

How can you verify the value of a disabled HTML input element in TestCafe using Typescript?

TestCafe Typescript - how to verify the value of a disabled HTML input element? Despite being disabled for user interaction, I want to ensure that this element still holds the anticipated value. example public async checksomething(text: string) { co ...

javascripttypescriptui-automatione2e-testingtestcafe

Looking to execute multiple programs simultaneously within the prestart script in the package.json file, and bypass any exit error codes

I need to run yarn tsc and yarn lint during every yarn start to identify any code errors. This is how my scripts property is set up: "scripts": { "start": "expo start", "android": "expo start --android" ...

typescripteslintyarnpkgpackage.jsontsc

Issues with naming in Gulp, Angular2 Final, and Visual Studio: "Cannot find name" and "Duplicate identifier" errors

Recently, I updated my project to utilize the final release of Angular 2 and also upgraded Visual Studio to use TypeScript 2.0.3 from the Tool -> Extensions and Updates manager. I compile my TypeScript using Gulp, and it compiles without any errors. Ho ...

angulartypescriptvisual-studio-2015npmgulp