Executing a TypeScript file in Sublime Text

Is there a way to compile a TypeScript file (.ts) in the sublime text 3 console and display the output similarly to how sublime handles Python? Since TypeScript is a compiled language, it needs to convert the .ts file to a .js file before execution. How can this be achieved?

I attempted to install the TypeScript plugin from the sublime package installer, but it required a specific architecture to run the file, as detailed here. Additionally, this post did not provide instructions on running a standalone TypeScript file, only on building after saving.

Answer №1

If you have already installed Node.js and TypeScript on your computer, then you are good to go. If not, you can download and install Node.js from here. Once Node.js is installed, you can use the following command to install the TypeScript and ts-node packages globally:

npm install -g typescript
npm install -g ts-node

Now, here are the steps you need to follow:

  • Open the TypeScript file you want to run in Sublime Text 3.

  • Go to the Tools tab, then Build System, and select New Build System. https://i.sstatic.net/FMRmn.png

  • In the new file that opens, replace its content with the following JSON object. The cmd parameter uses ts-node as per @idleberg's suggestion. @OdatNurd also recommended adding "selector": "source.ts" so that the build is automatically selected for TypeScript files.

{
    "shell": true,
    "cmd": ["ts-node", "$file"],
    "selector": "source.js"
}
  • Save the file as ts.sublime-build.
  • If the build was not automatically selected, you can manually build the script using ts.

https://i.sstatic.net/fci9K.png

  • Finally, press ctrl + B to run the script. The output should appear in the Sublime Text console.

Answer №2

To install the TypeScript package using Package Control, follow these steps: Open Package Control, search for and select "Install Package", then search for and select "TypeScript", and finally press enter.

For Mac OS users, use command+shift+p to open Package Control, search for and select "Install Package", choose "TypeScript" from the list of packages, and press enter.

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

Initialization error: ServiceIdentifier Symbol(LicencesService) not found in bindings

Encountering an error while compiling the code: Unable to find matching bindings for serviceIdentifier: Symbol(LicencesService) The issue seems to be in the constructor of the HTTP on server.ts file. How can I properly inject the LicencesService? Here is ...

Tips for including type definitions when adding elements to an array in TypeScript

Having trouble avoiding the use of 'any' as the type definition when pushing elements into an array? I attempted to specify the type but encountered an error. Here is a snippet of the code: interface answerProps { state: string; answer: s ...

How can we use an Array containing nested Objects in TypeScript?

Wondering about the best way to achieve this: let x = [{}]; in TypeScript. I've searched high and low for a definitive answer to this query. My assumption is that it can be done using the Array object: let x : Array<Object> = new Array<Obj ...

Issue encountered with ng-include compatibility in Angular 5

Just getting started with Angular and working on a small test project using Angular 5 and Visual Code. I'm attempting to use ng-include but the template is not displaying. src add-device add-device.component.html add-device.com ...

Having trouble utilizing a JavaScript file within TypeScript

I am currently exploring the integration of Three.js into an Angular application. Following the documentation, I imported Three.js using the following line: import * as THREE from 'three'; In addition, I installed the types for Three.js with th ...

Exploring the retrieval of specific values through bitwise operations in Angular

Currently, I am facing a challenge in retrieving a value that I had initially saved in the database as a sum of bits. My development work is based on Angular 9 using Typescript. I have successfully managed to store the sum of bits in the database. Now, I ...

Difficulty Converting Array of Objects to Proper Type with Q.Promise and KO.mapping

I have encountered an issue while trying to filter an observable array. It seems that the ko.utils.arrayFilter method is converting all my model's field names to lowercase, causing unexpected behavior. I should mention that this project involves Types ...

What is the validity of using Promise.reject().catch(() => 5) in Typescript?

Can you explain why the TS compiler is not flagging an error for this specific code snippet? Promise.reject().catch(() => 5) Upon inspecting the definition of the handler function within the catch, we come across the following code: interface Promise&l ...

Bars of varying heights (Google Chart)

I have incorporated a Google chart within a mat-grid-tile. In this setup, one column displays a value of 50, while the other showcases a value of 30. These particular values are sourced from myService and are accurate. Although when I hover over the bars i ...

Typescript error TS2717: All following property declarations should share the same data type

During development on my local host, the TypeScript build works perfectly fine. However, when transitioning to Docker with a Node image, I encounter a peculiar error during the build process: src/middlewares/auth.ts(16,13): error TS2717: Subsequent propert ...

I am looking for unique values from a duplicate string that is separated by commas in TypeScript

Using TypeScript, I am trying to extract unique values from a list of comma-separated duplicate strings: this.Proid = this.ProductIdList.map(function (e) { return e.ProductId;}).join(','); this.Proid = "2,5,2,3,3"; The desired output is: this. ...

Update your mappings for the city of Istanbul when utilizing both TypeScript and Babel

Currently, I am facing the challenge of generating code coverage for my TypeScript project using remap Istanbul. The issue arises due to the usage of async/await in my code, which TypeScript cannot transpile into ES5 directly. To circumvent this limitation ...

Unable to link to '' because it is not recognized as a valid attribute of '' in Angular 2

I encountered an exception while working on my Angular 2 project and I'm struggling to figure out the cause. Below is the snippet of my code: ts: import {Component} from "@angular/core"; import {GridOptions} from "ag-grid"; import {RedComponentComp ...

Utilize React to display a Selected button within a whitespace

Currently, I am encountering an issue in React where I have a group of buttons at the bottom. Upon selecting a button, the corresponding text should display at the top within a specified whitespace. However, I am looking to have the whitespace already occu ...

Adding a timestamp to an array in Angular/Typescript services

I've been struggling with adding a timestamp OnInnit to track the time a user visited a page. I want to include the timestamp in an array within my services, but I keep encountering errors and can't seem to figure it out on my own. Any assistance ...

'The object of type '{}' does not support indexing with a 'string'

I am currently working on a React component that dynamically generates an HTML Table based on an array of objects. The columns to be displayed are specified through the property called tableColumns. While iterating through the items and trying to display ...

What is the best way to retrieve and showcase data in NextJs version 13 and beyond?

Being new to NextJS, my question may seem trivial but I'd appreciate your patience. Essentially, my goal is to fetch data from a database and display it on the page upon the initial render. To achieve this, I am utilizing the useEffect and useState ho ...

Why is TypeScript unable to recognize package exports? (using CommonJS as the module system and Node as the module resolution)

I have an NPM package that is built for ESM and CJS formats. The package has a dist folder in the root directory, which contains: dist/esm - modules with ESM dist/cjs - modules with CJS dist/types - typings for all modules In the package.json file, there ...

Using Angular 5 with Typescript to generate and return an array of freshly instantiated typed objects

My backend service provides me with "moments," and I have two functions to handle this data. One is a get() method that returns a single object, and the other is a search() method that returns an array of objects. moment.service.ts The get method success ...

Having trouble implementing the ternary operator (?) in TypeScript within a Next.js project

Trying to implement a ternary operator condition within my onClick event in a Next.js application. However, encountering an error indicating that the condition is not returning any value. Seeking assistance with resolving this issue... https://i.stack.img ...