Typescript support on Emacs

"Is there a way to enable Typescript syntax highlighting in Emacs?"

I have been struggling with this for quite some time. Using Emacs 24 on an Ubuntu Virtualbox VM, I can't seem to get package-refresh-contents to work as it just hangs on "Contacting host: elpa.gnu.org:80".

Despite successfully configuring other customizations like Emacs Neotree sidebar, the Typescript syntax highlighting has me completely puzzled. I feel like I need someone to guide me through each step patiently.

"How do I get Emacs to syntax highlight Typescript?"

Please bear with me if my post lacks proper etiquette, as this is my first interaction in any online forum. The frustration is real! aaarggghhh!!!

Answer №1

Working with Typescript offers a variety of packages to choose from, ranging from basic syntax highlighting using typescript.el to more comprehensive development environments like tide, among others. The emacswiki website has a helpful list of these packages. Just keep in mind that you'll need to configure MELPA by following the steps outlined in this guide in order to make use of them.

P.S. If you're experiencing issues with the VM, ensure that the standard browser within the VM can connect to the internet and double-check the network settings. Sometimes conflicts between VirtualBox and Windows HyperV can cause connectivity problems.

Answer №2

When faced with the challenge of installation from the package list, one simple workaround is to access the ELPA page through a web browser, grab the tar file for the desired package, and then proceed to install it using the command M-x package-install-file.

Answer №3

Great news, Alex Ott is the hero of the day! All I had to do was enter m-x install-packages and then type typescr [tab] in response to "install-package:" to see a list of completions, one of which was typescript. Press Enter and suddenly .ts files are highlighting their syntax!

I have no idea where this package is located or anything about it, but who cares when it works so well!

A huge thank you to everyone involved, especially Alex.

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 access automatically generated JavaScript variables in TypeScript?

I am currently facing an issue with integrating a Google login API in my React project and I need some help. The problem arises when the user already has an active session, rendering the API unnecessary. The Javascript solution provided is as follows: co ...

The pipe property cannot be accessed for the specified type "OperatorFunction<unknown, [unknown, boolean, any]>"

I have set up a data subscription that I want to utilize through piping, but for some reason it's not working as expected. The error message I'm receiving is: The property pipe is not available for type "OperatorFunction<unknown, [unknown, b ...

The chosen index in the Material Stepper feature is experiencing a malfunction

I've been busy working on a Mat-Stepper, actually two of them. I have a component that contains two ng-templates set up like this: Question: Why is my selected index not functioning as expected? Am I missing something? I know you can define [selected ...

The element is not defined in the Document Object Model

There are two global properties defined as: htmlContentElement htmlContentContainer These are set in the ngAfterViewInit() method: ngAfterViewInit() { this.htmlContentElement = document.getElementById("messageContent"); this.htmlContentCont ...

Exploring the capabilities of using the injectGlobal API from styled-components in a TypeScript

I've been attempting to utilize the simple injectGlobal API, but I am encountering difficulties getting it to work with TypeScript. Here is my setup in theme.tsx: import * as styledComponents from "styled-components"; import { ThemedStyledComponentsM ...

What is the proper way to utilize RxJS to append a new property to every object within an array that is returned as an Observable?

I'm not very familiar with RxJS and I have a question. In an Angular service class, there is a method that retrieves data from Firebase Firestore database: async getAllEmployees() { return <Observable<User[]>> this.firestore.collectio ...

Having trouble deciding between flatMap and concatMap in rxJs?

Having trouble grasping the distinction between flatMap and concatMap in rxJs. The most enlightening explanation I found was on this Stack Overflow post about the difference between concatMap and flatMap So, I decided to experiment with it myself. import ...

Unit testing of an expired JWT token fails due to the incorrect setting of the "options.expiresIn" parameter, as the payload already contains an "exp" property

I am having trouble generating an expired JWT token for testing purposes and need some guidance on how to approach it. How do you handle expiration times in unit tests? This is what I have attempted so far : it('should return a new token if expired& ...

Dropdown box not displaying any choices

I developed a basic reusable component in the following way: Typescript (TS) import {Component, Input, OnInit} from '@angular/core'; import {FormControl} from '@angular/forms'; @Component({ selector: 'app-select', templa ...

Dealing with TypeScript issues while implementing Multer in an Express application

import multer, { FileFilterCallback } from "multer"; import sharp from "sharp"; import { NextFunction, Request, Response } from "express"; const multerStorage = multer.memoryStorage(); const multerFilter = ( req: Request, ...

"Introducing a brand new column in ng2-smart-table that is generated from an Object

Can anyone provide guidance on how to create a new column from an Object datatype? I'm struggling with this task. Below are the settings and data for better clarity: private settings = { columns: { firstName: { title: &apo ...

The module 'json-stringify-safe' could not be located

Encountering an issue while executing the command - ionic serve The code was functioning properly on a different system but seems to be causing trouble for me at the moment. ...

Is using instanceof the most effective method to verify type in Angular?

When working with the model, we import Type1 and Type2. Using the TypeComp variable which is a union of Type1 and Type2. import { Type1, Type2 } from '.'; export type TypeComp = Type1 | Type2; In the some.component.ts file, the selectedData$ obs ...

Is there a way to display the input value from an on-screen keyboard in an Angular application?

I have included my code and output snippet below. Is there a better way to display the input value when clicking on the virtual keyboard? ...

Fixing ngModel and click functionality issues in dynamic HTML content within Angular 4

I am struggling to insert HTML content into a specific id by using Angular. Although the HTML displays, the functionality of ngModel and click event is not working. How do I resolve this issue? app.component.html <div id="myid"> </div> app. ...

How to transfer a parameter in Angular 2

I am currently facing a challenge in passing a value from the HTML file to my component and then incorporating it into my JSON feed URL. While I have successfully transferred the value to the component and displayed it in the HTML file, I am struggling to ...

In Rxjs, ConcatMap doesn't get executed

I am currently developing a file upload component that involves checking for the existence of a file before proceeding with the upload process. If the file already exists, the user is given the option to either save as a copy or overwrite the existing file ...

A convenient utility for generating React components with pre-populated Tailwind CSS classes

When it comes to extracting local Tailwind-styled components, I tend to do it like this: const Container: React.FC = ({ children }) => ( <div className="bg-white px-5 py-5"> {children} </div> ); To simplify this process, I ...

Understanding how the context of an Angular2 component interacts within a jQuery timepicker method

Scenario: I am developing a time picker component for Angular 2. I need to pass values from Angular 2 Components to the jQuery timepicker in order to set parameters like minTime and maxTime. Below is the code snippet: export class TimePicker{ @Input() ...

Accessing observable property in Angular 2 with TypeScript: A comprehensive guide

My observable is populated in the following manner: this._mySubscription = this._myService.fetchData(id) .subscribe( response => this._myData = response, ...