Error in browsers when declaring an interface in Angular

Currently, I'm enrolled in an online Angular course to brush up on my skills. However, during one of the initial classes, I encountered an error while declaring an interface.

interface face{
    name: string;
    address: string;
}

The error message "Uncaught SyntaxError: unexpected token: identifier" appeared in both Firefox and Chrome, but strangely, my code worked fine in an online editor. Could it be a compatibility issue with an outdated version?

Edit: Below is the HTML code snippet:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Intro ducción</title>
    </head>
    <body>
        <script src="app.ts"></script>
    </body>
</html>

And here is the tsconfig.json configuration:

{
  "compilerOptions": {
    "target": "es2020", 
    "module": "commonjs", 
    "strict": true,                           
    "esModuleInterop": true,                 
    "skipLibCheck": true,                     
    "forceConsistentCasingInFileNames": true  
  }
}

Answer №1

Web browsers can only interpret JavaScript, which does not have an interface type built into it. Consequently, this lack of interface type can result in errors.

For further information, refer to the question on whether JavaScript has an interface type similar to Java's 'interface'.

Answer №2

In order to run your TypeScript code, you must first pass it through the TypeScript compiler. It is not possible to declare TypeScript directly in the browser.

Chances are, the online editor you're using handles this compilation process automatically.

If you need assistance getting started, check out this resource:

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

Beginner's Guide: Building your debut JavaScript/TypeScript library on GitHub and npm

I am looking to develop a simple JavaScript/TypeScript library focused on color conversion. Some of the functions and types I aim to export include: export type HEX = string; export type RGB = { r: number; g: number; b: number }; export type RGBA = { r: n ...

Strategies for dynamically invoking a class method using a variable without encountering TypeScript error 7053

Everything is running smoothly with this code, where the method import_codeData in the class DataImporter is executed dynamically by calling this.import_codeData() based on the content of the string variable task: https://i.sstatic.net/1mSrS.png However, ...

Dynamically Disabling Form Control in Angular 2

There is a basic form with two form controls that initially have required validation. In addition to the form controls, there is a button in the template. When this button is clicked, it triggers a change in the behavior of the form group. Both form contr ...

Ensuring Immutability of React Props in TypeScript

Someone mentioned that React Props are typically read-only, but I noticed that I was able to overwrite the props value in a component without encountering any errors. Is there a way to make props truly read-only? interface Props { readonly isText: bool ...

Requires the refreshing of an Angular component without altering any @Input properties

Currently delving into the world of Angular (along with Typescript). I've put together a small application consisting of two components. This app is designed to help track work hours (yes, I am aware there are commercial products available for this pu ...

The backend is throwing a NullReference Exception specifically when handling a GET request

I am currently attempting to execute a GET request [HttpGet] public async Task<IActionResult> GetOrders() { int marketingId = int.Parse(User.FindFirst(ClaimTypes.NameIdentifier).Value); var orders = await _repo.GetMarketeerOrders(marketingId); ...

When utilizing Monggose, Angular, and Node, a route containing the deleteOne method repeatedly reports that the object has been successfully deleted, despite the delete count remaining

I've encountered a similar issue to others, but their solutions didn't work for me. I'm working on a small MEAN app with mongoose and facing a problem when trying to delete a user or any other object stored in the collection. The route seems ...

How can I link types from @types to my local code?

I've created a method that utilizes validatorjs for validation purposes. Here's an example of the code: /** * Checks if the string is a mobile phone number (locale options: ['zh-CN', 'zh-TW', 'en-ZA', 'en- ...

Error encountered when updating Angular CLI

I am currently attempting to update my Angular project from version 4 to version 6. After numerous failed attempts to upgrade, I decided to uninstall and reinstall the Angular CLI using 'npm uninstall -g angular-cli' followed by a reinstallation. ...

Aligning two identical components within the same container when triggered by a single click

Currently, I am exploring Angular 2 and Typescript and have been developing a pager component for a table. The pager functions correctly, but I have encountered an issue with having two pagers - one above the table and one below it. When the next button on ...

Encountering a 404 error while trying to deploy a React app on Verc

After deploying my React project with TypeScript using Vite, everything is working smoothly. However, I am encountering a 404 error when trying to refresh the page. Error: 404 NOT_FOUND Error Code: NOT_FOUND ...

How can you properly expand TypeScript definitions within an external library?

I am currently utilizing TypeScript version 4.5.5 In a third-party library called dva, there is an interface named DvaInstance within the existing index.d.ts file: export interface DvaInstance { // ... } export { connect, connectAdvanced, useSelector ...

Typescript: The original type cannot be indexed with a type-mapped type

I'm currently working on a class where I need to define a method that returns an object with keys based on the generic type inferred by the compiler. However, I've encountered an issue with the code snippet below. The compiler is indicating that ...

Skip creating declarations for certain files

src/ user.ts department.ts In the scenario outlined above, where there are two files in the src directory (user.ts and department.ts), is there a way to exclude the generation of declaration files specifically for department.ts when running tsc wi ...

Managing locales in Angular i18n

After referencing the Angular documentation on i18n, I configured my i18n options as shown in this screenshot: https://i.sstatic.net/3K8TxOSl.png I also specified the localize property within the build property to use the value "it-IT" https://i.sstatic.n ...

Issues with Font Awesome fonts failing to load after compiling an Angular project using `ng build`

I've encountered an issue with Angular 8 and Font Awesome icons. I initially added the font-awesome path in the angular.json as follows: "./node_modules/font-awesome/css/font-awesome.css" However, all the icons were displaying as empty boxes (not lo ...

Sign up for the identical Observable within a Child Component in Angular 2 using TypeScript

This question may seem simple, but as a newcomer to Angular 2, I often find myself needing more explanation despite the good examples and tutorials available. Within a component, I have an observable that gets updated periodically. While I've simplif ...

Creating Excel documents using Angular and XLSX template generator

In my Angular application, I am utilizing the XLSX library to manipulate an Excel file. The file I start with is encoded in base64 format, so my first task is to decode it, make some changes to specific cells, and then save the modified file back in base64 ...

The parameter type 'Object' cannot be assigned to the parameter type 'JSON' in the HttpClient GET method

Hey there! Currently, I'm deep into developing an Angular 6 + Flask application and I've encountered a bit of a snag: Error TS2345: Argument of type 'Object' is not assignable to parameter of type 'JSON'. This issue arises w ...

Can you point me in the direction of the source code for dependencies stored in the node_modules

I'm new to TypeScript and NPM, so my question might seem basic. I've added some dependencies to my package.json file and used the npm install command to install them. After installation, I noticed that many dependencies were added to the node_mod ...