What could be the reason for encountering TypeScript within the Vue.js source code?

While exploring the vue.js source code, I stumbled upon some unfamiliar syntax that turned out to be TypeScript after further investigation. What baffled me was finding this TypeScript syntax within a ".js" file, when my understanding is that TypeScript files (.ts) should compile down to pure JS. So, why am I encountering type annotations in function parameters within a .js file?

function hasAncestorData (node: VNode) {
  const parentNode = node.parent
  return isDef(parentNode) && (isDef(parentNode.data) || hasAncestorData(parentNode))
}
javascripttypescriptvue.js

Answer №1

This is an example of using the Flow code. The /* @flow */ comment at the beginning of certain files indicates that it enables type checking for this tool. While similar to TypeScript, they are not exactly the same.

A peek into the src directory on Vue.js's GitHub repository reveals their use of .js for JavaScript with Flow annotations, as seen in 

src/core/vdom/create-component.js
:

const componentVNodeHooks = {
  init (vnode: VNodeWithData, hydrating: boolean): ?boolean {

However, when we explore the dist folder, it becomes evident that the Flow type annotations have been removed for distribution purposes. For example, the aforementioned code snippet in dist/vue.js appears like this (please note that line numbers may change over time):

var componentVNodeHooks = {
  init: function init (vnode, hydrating) {

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

The standard date format used in Javascript/Jquery programs

I have a kendo date picker set to display dates in the format "MM/dd/yyyy". I need to use jquery or javascript to ensure that the selected date is not in the future and is greater than '01/01/1900'. The problem I'm encountering is handling ...

javascriptjquerydatekendo-uikendo-datepicker

The concept of setTimeout and how it affects binding in JavaScript

I have limited experience with jquery, mainly using it for toggling classes. However, I will do my best to explain my issue clearly. I have three div elements and when one is clicked, the other two should rotate 90 degrees and then collapse to a height of ...

javascriptjquery

Guide to logging in using REST/API with a Next.js application

Issue: I am facing a challenge integrating with an existing repository that was created using Next.js. The task at hand is to enable users to sign in to the application through a specific endpoint or URL. To achieve this, I have been attempting to utilize ...

javascriptauthenticationnext.jsserver-side-rendering

Hiding the initial parent SVG element in the list will also hide all subsequent SVG elements within each section, excluding the container

I encountered a strange issue with my code in the Next framework. When using getServerSideProps, I made a request to my api folder, which resulted in a simple JSON response. Everything seemed to be working fine. The content was displayed perfectly without ...

javascriptreactjssvgnext.js

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My ...

javascripthtmlcss

Determining the data type of an object key in Typescript

Is there a way to limit the indexed access type to only return the type of the key specified? interface User { id: string, name: string, age: number, token: string | null, } interface Updates<Schema> { set: Partial<Record< ...

typescripttypes

Is it possible to utilize a variable for binding, incorporate it in a condition, and then return the variable, all while

There are times when I bind a variable, use it to check a condition, and then return it based on the result. const val = getAttribute(svgEl, "fill"); if (val) { return convertColorToTgml(val); } const ancestorVal = svgAncestorValue(svgEl, "fill"); if (a ...

typescript

sending a collection of elements to a jQuery function

I am puzzled by why this function is not working as expected when passing an array of items to it. My intention with the for-loop is to change the status of the child ctrl element to either '+' or '-'. An error occurred: Uncaught Typ ...

javascriptjquery

A helpful tip for creating line breaks within a Vue JS v-for loop using CSS

I am looking to arrange the names in alphabetical order when a list item is clicked. My tools of choice are Vue.js and Flex Grid. The list item I am working with is called ListAll, When clicking on ListAll, I want to display all the records grouped by na ...

javascriptcssvue.jsvuejs2flexboxgrid

Order an array depending on various strings

I am faced with the challenge of reordering a JSON array to mimic a conversation thread structure using Javascript. The initial array looks like this: var all_messages = [{ name: 'user1', replying_to: '', message: 'xxxxx&apo ...

javascriptarrayssorting

Deactivate numerous buttons with the help of jQuery

Within my MVC view, I have a Razor foreach loop that generates table rows with buttons: @foreach (var item in Model) { <tr> <td>@item.Id</td> <td> <button id="btn" class="button btn-primary" type= ...

javascriptjqueryhtml

The file upload issue with FormData append in CodeIgniter is causing errors

My current challenge involves uploading files using AJAX to my CodeIgniter based website. Unfortunately, I am encountering an issue where I cannot retrieve the file field value in the controller. This results in an error message stating "Undefined index: & ...

javascriptphpjqueryajaxcodeigniter

Error code -8 occurred while executing the yarn dev command, unable to identify the issue

I'm facing an issue with my development script that is structured like this: "scripts": { "dev": "./test.sh", }, Upon running the 'yarn dev' command, I encounter the following error message: Internal Error: ...

typescriptnpmyarnpkg

What is the reason behind the restriction on using capital letters in React project names?

When attempting to create a new project "newRecipeApp" in React, I encountered the following message: npx: installed 91 in 29.359s Could not create a project called "newRecipeApp" because of npm naming restrictions: * name can no longer contain capital ...

javascriptreactjsnpm

Vue encountered an error: TypeError - _c is not recognized as a function

I recently created an icon library in Vue using Vue-cli and vue-svg-loader, and then exported it as a package. However, when I tried to use the icons like this: <template> <div> <MyIcon /> </div> </template> <scri ...

vue.jssvgnpmvue-cli

Is it possible to run a Universal Windows Platform desktop app on an Android mobile device?

After successfully developing a Universal Windows Platform app in Visual Studio using WinJS, JavaScript, CSS and HTML, I am now interested in leveraging the same code base to create an Android application. Could you guide me on the necessary steps to run ...

javascriptandroidhtmlcsswinjs

Tips on how to showcase the current time in the local timezone on Next.js without encountering the error message "Text content does not match server-rendered HTML."

Currently, I am sharpening my Next.js skills by building a blog. My current challenge involves formatting a static ISO time string (which represents the creation time of blog posts) to match the local timezone of the user. <div className='post-time ...

javascriptnext.js

Creating a dropdown menu in Bootstrap 5 without using any of the Bootstrap

In my Angular application, I have a header with icons and pictures that I would like to use as dropdown menus. The code snippet for this functionality is shown below: <li class="nav-item dropdown"> <a class="nav-li ...

javascriptangulartypescriptdropdownbootstrap-5

What is the best way to clear a THREE.JS scene?

I am exploring methods to remove all objects from a scene without affecting the scene structure. I understand that naming each object individually allows for selective deletion by name. But, I am searching for a fast approach to clear a scene of all obje ...

javascriptthree.js

Is it possible to generate distance between 2 elements without utilizing padding or margin?

In my React Native project, I'm currently working with 2 inline buttons - the search and add buttons: https://i.stack.imgur.com/tKZrf.png I'm looking to add some spacing between these buttons without impacting their alignment with the left and ...

javascriptreactjscssreact-native