Transform your TypeScript code with a jscodeshift codemod that removes generic type declarations while preserving the wrapped

Question

Transform your TypeScript code with a jscodeshift codemod that removes generic type declarations while preserving the wrapped

I am currently working on developing a codemod that will eliminate all instances of the $ReadOnly<T> generic from a TypeScript codebase, while retaining only T (where T represents an object or union).

This is what I have managed to come up with so far:

module.exports = (fileInfo, api) => {
const j = api.jscodeshift
const source = j(fileInfo.source)

source
.find(j.TSTypeAliasDeclaration)
.find(j.TSTypeReference)
.filter(x => {
    return x.value.typeName.name === '$ReadOnly' && x.value.typeParameters.params[0].type === 'TSTypeLiteral'
})
.replaceWith(nodePath => {
    const members = []
    nodePath.value.typeParameters.params[0].members.forEach(x => {
        members.push(j.tsPropertySignature(x.key, x.typeAnnotation))
    })

    return j.tsTypeLiteral(members)
})

return source
    .toSource()
}

The intention is to convert something like this:

export type MyType = $ReadOnly<{
  someProps: string,
}>

To this:

export type MyType = {
  someProps: string,
}

However, the result includes a duplicate type keyword as shown below:

export type type MyType = {
  someProps: string,
}

Any insights on what could be causing this issue?

javascript typescript abstract-syntax-tree jscodeshift codemod

Answer 1

Answer №1

One way to approach this is by using a declarative method with the putout code transformer tool (you can experiment with it at putout.cloudcmd.io):

// updater.js
const {replaceWith} = require('putout').operator;

module.exports.report = () => '$ReadOnly generic should be removed';

module.exports.match = () => ({
    'export type __a = __b': ({__b}, path) => {
        return __b.name === '$ReadOnly';
    }
});
    
module.exports.replace = () => ({
    'export type __a = __b': (vars, path) => {
        const typeAnnotationPath = path.get('declaration.typeAnnotation');
        const paramPath = typeAnnotationPath.get('typeParameters.params.0');
        
        replaceWith(typeAnnotationPath, paramPath);
        
        return path;
    },
});

This falls under the category of replacer in the putout plugin.

The aim is to transform input like:

// fixture/update-type.js
export type MyType = $ReadOnly<{
  someProps: string,
}>
    
export type MyType2 = $WriteOnly<{
  someProps: string,
}>
    
export type MyType1 = {
  someProps: string,
}

Into an output similar to:

// fixture/update-type-fix.js
export type MyType = {
  someProps: string,
};
    
export type MyType2 = $WriteOnly<{
  someProps: string,
}>
    
export type MyType1 = {
  someProps: string,
}

Putout provides a straightforward test runner for testing your codemod against predefined fixtures:

// type-updater.spec.js
const test = require('@putout/test')(__dirname, {
     'update-type': require('./type-updater'),
});

test('update-type: report', (t) => {
    t.report('update-type', '$ReadOnly generic should be removed');
});

test('update-type: transform', (t) => {
    t.transform('update-type');
    t.end();
});

To apply this codemod, save it in ~/.putout and execute it on your codebase with:

putout .

Alternatively, store it in a directory like your-project/codemods and run:

putout --rulesdir codemods .

Answer 2

One way to approach this is by using a declarative method with the putout code transformer tool (you can experiment with it at putout.cloudcmd.io):

// updater.js
const {replaceWith} = require('putout').operator;

module.exports.report = () => '$ReadOnly generic should be removed';

module.exports.match = () => ({
    'export type __a = __b': ({__b}, path) => {
        return __b.name === '$ReadOnly';
    }
});
    
module.exports.replace = () => ({
    'export type __a = __b': (vars, path) => {
        const typeAnnotationPath = path.get('declaration.typeAnnotation');
        const paramPath = typeAnnotationPath.get('typeParameters.params.0');
        
        replaceWith(typeAnnotationPath, paramPath);
        
        return path;
    },
});

This falls under the category of replacer in the putout plugin.

The aim is to transform input like:

// fixture/update-type.js
export type MyType = $ReadOnly<{
  someProps: string,
}>
    
export type MyType2 = $WriteOnly<{
  someProps: string,
}>
    
export type MyType1 = {
  someProps: string,
}

Into an output similar to:

// fixture/update-type-fix.js
export type MyType = {
  someProps: string,
};
    
export type MyType2 = $WriteOnly<{
  someProps: string,
}>
    
export type MyType1 = {
  someProps: string,
}

Putout provides a straightforward test runner for testing your codemod against predefined fixtures:

// type-updater.spec.js
const test = require('@putout/test')(__dirname, {
     'update-type': require('./type-updater'),
});

test('update-type: report', (t) => {
    t.report('update-type', '$ReadOnly generic should be removed');
});

test('update-type: transform', (t) => {
    t.transform('update-type');
    t.end();
});

To apply this codemod, save it in ~/.putout and execute it on your codebase with:

putout .

Alternatively, store it in a directory like your-project/codemods and run:

putout --rulesdir codemods .

Transform your TypeScript code with a jscodeshift codemod that removes generic type declarations while preserving the wrapped

Answer №1

Similar questions

What is the best way to customize the functionality of the Done (node-dialog-ok) button in node-red when it is

Tools for parsing command strings in NodeJS

Explore within the <li> element using jQuery

Steps for sending Ajax data to your server in order to make changes to your SharePoint list information

Unable to access array in the result of a Node.js Mongoose find populate operation

Using Ajax and Session Variables for a Worksafe Filter to selectively hide images

Tips for incorporating JavaScript code into back4app.com using Objective-C:1. Start by accessing the

Setting the outcome of an Ajax call as a global variable in JavaScript

What techniques do Python and Javascript use to handle resizing of arrays?

Operator in RxJS that maps the elements within an array composed of multiple arrays

Error encountered in Node.js OpenAI wrapper: BadRequestError (400) - The uploaded image must be in PNG format and cannot exceed 4 MB

The field 'token' is not found in the PropsWithChildren<WithUrqlProps> type but it is mandatory in the type '{ token: string; }'

Show a nested array retrieved from JSON in a React component

When the onclick event is triggered, the return value will execute after the onclient

``Is there a way to retrieve the file path from an input field without having to submit the form

The process of utilizing the override feature in the package.json file to make updates to child dependencies

IE encounters issues making Ajax calls when transitioning from secure HTTPS requests to insecure HTTP requests

Easier JavaScript for numerous HTML elements

Sending an array of dictionary objects to a JavaScript function

What strategies can I use to successfully navigate through this component?