1. ts-morph
TypeScript compiler wrapper for static analysis and code manipulation.
ts-morph
Package: ts-morph
Created by: dsherret
Last modified: Sun, 10 Mar 2024 17:22:27 GMT
Version: 22.0.0
License: MIT
Downloads: 10,495,961
Repository: https://github.com/dsherret/ts-morph

Install

npm install ts-morph
yarn add ts-morph

# ts-morph

npm version
CI
stable

TypeScript Compiler API wrapper. Provides an easier way to programmatically navigate and manipulate TypeScript and JavaScript code.

Formerly ts-simple-ast.

Overview

Main Features

  1. Wraps the compiler API objects to provide helper methods for getting information and programmatically changing files.
  2. Allows falling back to the compiler API objects if necessary (ex. classDeclaration.compilerNode or typeChecker.compilerObject).
  3. All changes are kept in memory (including file and directory moves) until specifying to save to the underlying file system.
  4. Changes are made to the text and wrapped nodes can be held on to between manipulations.

Getting Started

  1. Installing
  2. Instantiating
  3. Adding source files
  4. Getting source files
  5. Navigating
  6. Manipulating

Library Progress

This library is still under active development. Most common code manipulation/generation use cases are implemented, but there's still a lot of work to do. Please open an issue if you find a feature missing, bug, or question that isn't in the issue tracker.

Example

 import { Project, StructureKind } from "ts-morph";

// initialize
const project = new Project({
    // Optionally specify compiler options, tsconfig.json, in-memory file system, and more here.
    // If you initialize with a tsconfig.json, then it will automatically populate the project
    // with the associated source files.
    // Read more: https://ts-morph.com/setup/
});

// add source files
project.addSourceFilesAtPaths("src/**/*.ts");
const myClassFile = project.createSourceFile("src/MyClass.ts", "export class MyClass {}");
const myEnumFile = project.createSourceFile("src/MyEnum.ts", {
    statements: [{
        kind: StructureKind.Enum,
        name: "MyEnum",
        isExported: true,
        members: [{ name: "member" }],
    }],
});

// get information
const myClass = myClassFile.getClassOrThrow("MyClass");
myClass.getName();          // returns: "MyClass"
myClass.hasExportKeyword(); // returns: true
myClass.isDefaultExport();  // returns: false

// manipulate
const myInterface = myClassFile.addInterface({
    name: "IMyInterface",
    isExported: true,
    properties: [{
        name: "myProp",
        type: "number",
    }],
});

myClass.rename("NewName");
myClass.addImplements(myInterface.getName());
myClass.addProperty({
    name: "myProp",
    initializer: "5",
});

project.getSourceFileOrThrow("src/ExistingFile.ts").delete();

// asynchronously save all the changes above
await project.save();

// get underlying compiler node from the typescript AST from any node
const compilerNode = myClassFile.compilerNode;

Or navigate existing compiler nodes created with the TypeScript compiler (the ts named export is the TypeScript compiler):

 import { createWrappedNode, ClassDeclaration, ts } from "ts-morph";

// some code that creates a class declaration using the ts object
const classNode: ts.ClassDeclaration = ...;

// create and use a wrapped node
const classDec = createWrappedNode(classNode) as ClassDeclaration;
const firstProperty = classDec.getProperties()[0];

// ... do more stuff here ...

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin