Enhance TypeScript functionality with operator overloading

Question

Enhance TypeScript functionality with operator overloading

I am currently involved in a project that heavily relies on vector and matrix mathematics, and I am keen on incorporating operator overloading into my code.

Although there are Babel plugins available (such as https://github.com/rob-blackbourn/jetblack-operator-overloading) that enable operator overloading for JavaScript, they do not seem to work seamlessly with TypeScript, especially when it comes to the TS language server for VS Code. While there are workarounds involving the use of // @ts-ignore, I personally find this approach unappealing as it undermines the benefits of type checking for the subsequent line of code.

My goal is to transform code like this (where a, b, and c represent custom objects):

a + b * c

Into something along the lines of:

a.__add__(b.__mul__(c))

In case, for instance, c is incompatible with the function __mul__, I would like VS Code to highlight either the original line or ideally the symbol c itself.

I envision the ability to preprocess the code before submitting it to the TS compiler (similar to what the Babel plugin accomplishes). However, I anticipate that VS Code would consistently flag an error (

Operator '+' cannot be applied to types 'Custom' and 'Custom'

).

My inquiry is as follows: Is there an existing project that delivers the aforementioned functionality? If not, is it feasible to enhance TypeScript and/or the TypeScript language server in this manner? Kindly share any relevant resources for further exploration.

Furthermore, I am intrigued by how JSX (utilized in React) seamlessly integrates with TS using a unique syntax. Are there any other projects that alter TS in a similar fashion?

typescript visual-studio-code operator-overloading language-server-protocol

Answer 1

Answer №1

Babel is specific to processing JavaScript code, which means that if you want to utilize it with TypeScript, you'll need to create a custom TypeScript transformer and configure it with ts-loader. However, a potential issue might arise when the ForkTsCheckerWebpackPlugin checks the syntax of your code, in which case you may have to disable this plugin.

Below is a code snippet demonstrating how to create a basic transformer:

export function createTransformer (): ts.TransformerFactory<ts.SourceFile> {
  console.log("Hello, I am a newly created transformer");
  return (context: ts.TransformationContext) => {
    return (sourceFile: ts.SourceFile) => {
      function visit (node: ts.Node): ts.Node {
      return ts.visitNode(sourceFile, visit)
    }
  }
}
export default createTransformer

Furthermore, you'll need to make adjustments to your project configuration. For instance, if you are using Vue, your vue.config.js file could look like this:

const PipeTransformer = require('./pipe-transformer').default

module.exports = {
  // .... other configurations 
  chainWebpack: config => {
    // The ts-pipe-operator plugin cannot be used with Babel, as Babel only processes JavaScript files.
    config.module.rule('ts').use('ts-loader').tap(options => {
      options.transpileOnly = true
      options.appendTsSuffixTo = ['\\.vue$']
      options.happyPackMode = false
      options.getCustomTransformers = () => ({
        before: [PipeTransformer()]
      })
      return options
    })
  }
}

Answer 2

Babel is specific to processing JavaScript code, which means that if you want to utilize it with TypeScript, you'll need to create a custom TypeScript transformer and configure it with ts-loader. However, a potential issue might arise when the ForkTsCheckerWebpackPlugin checks the syntax of your code, in which case you may have to disable this plugin.

Below is a code snippet demonstrating how to create a basic transformer:

export function createTransformer (): ts.TransformerFactory<ts.SourceFile> {
  console.log("Hello, I am a newly created transformer");
  return (context: ts.TransformationContext) => {
    return (sourceFile: ts.SourceFile) => {
      function visit (node: ts.Node): ts.Node {
      return ts.visitNode(sourceFile, visit)
    }
  }
}
export default createTransformer

Furthermore, you'll need to make adjustments to your project configuration. For instance, if you are using Vue, your vue.config.js file could look like this:

const PipeTransformer = require('./pipe-transformer').default

module.exports = {
  // .... other configurations 
  chainWebpack: config => {
    // The ts-pipe-operator plugin cannot be used with Babel, as Babel only processes JavaScript files.
    config.module.rule('ts').use('ts-loader').tap(options => {
      options.transpileOnly = true
      options.appendTsSuffixTo = ['\\.vue$']
      options.happyPackMode = false
      options.getCustomTransformers = () => ({
        before: [PipeTransformer()]
      })
      return options
    })
  }
}

Enhance TypeScript functionality with operator overloading

Answer №1

Similar questions

One creative method for iterating through an array of objects and making modifications

Creating an array of reusable components in Vue 3 with Typescript - How can I pass it into another component?

Is there a way to order the execution of two functions that each produce promises?

Identifying Classifications Based on Input Parameters

Enhancing view with Typescript progressions

Determine whether there is greater available space above or below a specific element within the DOM

What are the steps to create a circular progress bar in an Ionic 3 application?

how can JavaScript be used to retrieve an object based on a condition from an array of objects and an ArrayList

Retrieve the values of a dynamic JSON object and convert them into a comma-separated string using Typescript

Using Typescript Classes in a NodeJS Environment

The @Input directive is not compatible with the OnPush change detection strategy

Error: The nested property of the dynamic type cannot be indexed

When the value of a react state is used as the true value in a ternary operator in Types

Ways to fix: Unable to locate package 'xlsx'

Tips for showing data from an hour ago in Angular

What could be causing the TypeScript type error within this Effector effect subscriber?

What is the best way to programmatically download a file in Angular 4 without explicitly specifying the file name?

How can a TypeScript object be declared with a single value assignment to itself?

What is the best way to combine properties from Type1 and Type2 to create a new type in Typescript?

Issue during Docker build: npm WARN EBADENGINE Detected unsupported engine version