Converting constants into JavaScript code

I've been diving into typescript recently and came across a simple code snippet that defines a constant variable and logs it to the console.

const versionNuber : number = 1.3;
console.log(versionNuber);

Upon running the tsc command on the file, I noticed that the generated javascript code looked like this:

var versionNuber = 1.3;
console.log(versionNuber);

This led me to wonder how I can transpile the constant correctly in javascript. Why doesn't tsc convert it properly even though constants are supported in javascript?

javascripttypescript

Answer №1

When it comes to the compiler options, one important setting is the target option. This option determines the version of the target language to which Typescript will be transpiled. By default, it is set to ES3, which was standardized in 1999 and is compatible with a wide range of environments.

If you wish to prevent const from being converted into var, you can change the target to ES2015 or a newer version. Before ES2015, const was not officially supported in JavaScript. Using it in older environments like IE10 (released in 2012) would result in errors.

You can check out this Playground link with ESNext target to see how const is preserved with the new target setting.

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

What is the best way to navigate back on a button click in jquery AJAX without causing a page refresh?

Is there a way to navigate back without refreshing the page? I am fetching data dynamically using AJAX, but when I try to go back using the browser button, it takes me all the way back to the starting point. Let's look at the situation: 3 Different ...

javascriptphpjqueryhtmlajax

Can GET or POST variables be transmitted to external JavaScript?

Is it possible to pass a variable to an external JavaScript file? For instance: Suppose I have the following code: <script type="text/javascript" src="gallery.js"></script> I'm curious to know if it's feasible to pass an argument ...

javascriptjquery

When iterating through it, a sorted array in Javascript mutates the window object, but not in any

I am working with Python Django to create a view that returns JSON data to a template. In this template, I initialize a global JavaScript variable like so: <script type="text/javascript"> coordinates = {{ coordinates | safe}} </script> Th ...

javascriptarraysjsonsorting

What is the correct way to route requests to /api/ressource in a production environment?

In my development environment, I have set up a webpack dev configuration where my front-end server runs on port 8080 and my backend server runs on port 3000. Here is how I configured my webpack dev server: proxy: { '/api': 'http://localh ...

javascriptnode.jsexpresswebpack

HTML5 canvas processing causing web worker to run out of memory

Within the Main thread: The source image array is obtained using the getImageData method. It is represented as a uint8ClampedArray to store the image data. Below is the code executed in a web worker: (This operation generates a high-resolution image, but ...

javascripthtmlmultithreadingcanvasweb-worker

Using [(ngModel)] in Angular does not capture changes made to input values by JavaScript

I have developed a custom input called formControl, which requires me to fetch and set its value using [(ngModel)]: import { Component, Injector, OnInit, forwardRef } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCE ...

javascriptjqueryangulartypescriptangular-directive

Need to import Vue from a JavaScript file

I am relatively new to modern frontend development tools. After installing Nodejs and NPM, I successfully downloaded packages such as "jquery" and everything was working fine. However, when I installed Webpack (version 2) and created a demo configuration f ...

javascriptnpmwebpackvue.jsweb-frontend

Issue: The TypeError reported is due to the absence of any definition for "_co.category.category_type"

I have two models: CategoryTypes and Categories. Each category type contains multiple categories. These are my two models. Categories Model import { Categories } from '../../categories/Mode/Categories' export class CategoryType { _id: strin ...

angulartypescript

Exploring plyr and vue.js: utilizing a computed property to fetch video duration

I am currently attempting to load content dynamically based on the duration of a video being displayed. However, I am encountering issues when trying to access the duration property. Could this problem be related to the timing of plyr's appearance wit ...

javascriptvue.jsplyr

Guide on displaying the AJAX response in CakePHP 3.1

I'm working with a table that contains checkboxes. After selecting them, I want to calculate the sum of values from the table in a modal before confirming the form submission. Can someone guide me on how to render the AJAX response from the controller ...

javascriptphpjqueryajaxcakephp

Experience seamless transitions with Material UI when toggling a single button click

When looking at the examples in the Material UI Transitions documentation, I noticed that there are cases where a button triggers a transition. In my scenario, I have a button that triggers a state change and I want the previous data to transition out befo ...

javascriptmaterial-uitransition

The Bootstrap dropdown vanishes before I can even click on it

I recently encountered an issue with my Bootstrap dropdown menu on my website. After making some changes, the dropdown disappears after 1-2 seconds when viewed on a mobile phone. Interestingly, the original Bootstrap menu works fine, but not my customized ...

javascripthtmlcsstwitter-bootstrapdrop-down-menu

Utilize TypeScript File array within the image tag in HTML with Angular 2

I am in the process of developing a web application that allows users to upload CSV data and images, which are then displayed on the application. However, I have encountered an issue where I am unable to display the imported images. The images are imported ...

htmlangulartypescript

Changing the Style of a CSS Module Using JavaScript

Embarking on a journey into Javascript and React, I am currently working on my first React app. My aim is to adjust the number of "gridTemplateRows" displayed on the screen using a variable that will be updated based on data. Right now, it's hardcode ...

javascriptcssreactjssasscss-modules

Generating a type definition from a JavaScript file

Looking to convert a .js file to a d.ts file, I've noticed that most resources on this topic are from 2 years ago How do you produce a .d.ts "typings" definition file from an existing JavaScript library? My question is, after 2 years, is there a simp ...

typescript

Combining several objects into a one-dimensional array

I am encountering a small issue with correctly passing the data. My form is coming in the format {comment:'this is my comment'} and the id is coming as a number. I need to send this data to the backend. let arr = []; let obj = {}; o ...

javascriptphpjquery

Live Search: Find Your Answers with Ajax

I've come across this issue multiple times, but haven't found a solution that fits my specific requirements. I've encountered several URLs with links like example.com/ajax/search?query=Thing I'm currently working on a header and using ...

javascriptphpjqueryajax

Using PHP to extract all occurrences of window.location from an HTML document using regex

Is there a way to extract all the window.location instances in PHP? I have a list of URLs that I am fetching using cURL, saving the HTML content as a string, and now I need to identify and display all the occurrences of window.location separately. I atte ...

javascriptphpregex

Variables in the $scope object in AngularJS

Within my $scope in angularJS, I am working with two types of variables. 1). $scope.name and $scope.title are linked to input boxes in the UI html code. 2). On the other hand, $scope.sum and $scope.difference are internally used within my JS code. I need ...

javascriptangularjsperformanceangularjs-scope

"Encountered an issue while attempting to send the message: Unable to retrieve data" while utilizing NextJS and the

Currently, I am utilizing fetch along with NextJS to attempt to send information such as name, phone number, email, company, and message to an API. However, I am encountering an issue where the error message simply states 'Failed to fetch' in the ...

javascriptreactjsnext.jsfetch