Convert Figma logo to code with AI

JoshuaKGoldberg logoTypeStat

Converts JavaScript to TypeScript and TypeScript to better TypeScript. 🧫

2,044
39
2,044
89

Top Related Projects

100,112

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

22,078

Adds static typing to JavaScript to improve developer productivity and code quality.

A JavaScript checker and optimizer.

48,780

The Kotlin Programming Language.

10,195

The Dart SDK, including the VM, JS and Wasm compilers, analysis, core libraries, and more.

Quick Overview

TypeStat is an open-source TypeScript codemod that automatically upgrades TypeScript code to use more modern syntax and stricter types. It analyzes your codebase and suggests or applies improvements to type annotations, making your code more robust and easier to maintain.

Pros

  • Automates the process of improving TypeScript code quality
  • Supports a wide range of type improvements and syntax upgrades
  • Customizable through configuration options
  • Can be integrated into CI/CD pipelines for continuous code improvement

Cons

  • May require manual review of changes in complex codebases
  • Some suggested changes might not align with specific project conventions
  • Limited support for certain advanced TypeScript features
  • Learning curve for configuring and using the tool effectively

Code Examples

  1. Basic usage:
// Before
function greet(name) {
    console.log("Hello, " + name);
}

// After TypeStat
function greet(name: string): void {
    console.log("Hello, " + name);
}
  1. Upgrading to optional chaining:
// Before
if (user && user.address && user.address.city) {
    console.log(user.address.city);
}

// After TypeStat
console.log(user?.address?.city);
  1. Adding type assertions:
// Before
const result = JSON.parse(data);

// After TypeStat
const result = JSON.parse(data) as { [key: string]: unknown };

Getting Started

To use TypeStat in your project, follow these steps:

  1. Install TypeStat:

    npm install -g typestat
    
  2. Create a typestat.json configuration file in your project root:

    {
      "fixes": {
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": true
      }
    }
    
  3. Run TypeStat:

    typestat
    

This will analyze your TypeScript files and suggest or apply improvements based on the configuration.

Competitor Comparisons

100,112

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

Pros of TypeScript

  • Comprehensive language with full JavaScript compatibility
  • Extensive ecosystem and wide industry adoption
  • Robust tooling and IDE support

Cons of TypeScript

  • Steeper learning curve for beginners
  • Compilation step required, which can slow down development
  • Can introduce complexity in smaller projects

Code Comparison

TypeScript:

interface User {
  name: string;
  age: number;
}

function greet(user: User) {
  console.log(`Hello, ${user.name}!`);
}

TypeStat:

// TypeStat would analyze and suggest type annotations
function greet(user) {
  console.log(`Hello, ${user.name}!`);
}

TypeStat focuses on adding type annotations to existing JavaScript code, while TypeScript is a full-fledged superset of JavaScript with its own syntax and features. TypeStat is a tool for gradual adoption of types, whereas TypeScript requires a more comprehensive implementation.

TypeScript offers a more complete type system and language features, but TypeStat provides a simpler approach for adding types to existing projects without full TypeScript adoption. TypeScript has broader applications and community support, while TypeStat serves a specific niche in type migration.

22,078

Adds static typing to JavaScript to improve developer productivity and code quality.

Pros of Flow

  • More comprehensive type checking system with advanced features like type inference and union types
  • Larger community and ecosystem, with better integration into popular IDEs and tools
  • Actively maintained by Facebook, ensuring regular updates and improvements

Cons of Flow

  • Requires additional setup and configuration, which can be complex for beginners
  • May have performance issues with large codebases, potentially slowing down development
  • Less seamless integration with existing JavaScript codebases compared to TypeStat

Code Comparison

Flow:

// @flow
function add(a: number, b: number): number {
  return a + b;
}

TypeStat:

function add(a, b) {
  return a + b;
}
// TypeStat will automatically infer and add types:
// function add(a: number, b: number): number {
//   return a + b;
// }

Flow provides a more explicit type annotation system, while TypeStat focuses on automatically inferring and adding types to existing JavaScript code. Flow requires developers to manually add type annotations, whereas TypeStat aims to automate the process of adding types to legacy codebases.

A JavaScript checker and optimizer.

Pros of Closure Compiler

  • More mature and widely used, with extensive documentation and community support
  • Offers advanced optimization techniques for JavaScript, including dead code elimination and minification
  • Supports a broader range of JavaScript features and can be used with various frameworks

Cons of Closure Compiler

  • Primarily focused on JavaScript optimization, with limited TypeScript support
  • Steeper learning curve due to its complexity and extensive configuration options
  • Requires more setup and integration effort compared to TypeStat

Code Comparison

TypeStat example:

// Before
let value;

// After
let value: any;

Closure Compiler example:

// Before
function unused(x) { return x + 1; }
function used(a, b) { return a + b; }
console.log(used(1, 2));

// After
console.log(function(a,b){return a+b}(1,2));

TypeStat focuses on adding type annotations to existing TypeScript code, while Closure Compiler primarily optimizes and minifies JavaScript code. TypeStat is more specialized for TypeScript projects, whereas Closure Compiler offers broader JavaScript optimization capabilities but requires more configuration and setup.

48,780

The Kotlin Programming Language.

Pros of Kotlin

  • Mature and widely adopted language with extensive ecosystem
  • Full-featured programming language with cross-platform support
  • Backed by JetBrains, ensuring long-term support and development

Cons of Kotlin

  • Larger project scope, potentially more complex for specific TypeScript tasks
  • May require more setup and configuration for TypeScript-specific use cases
  • Learning curve for developers not familiar with Kotlin syntax

Code Comparison

TypeStat example:

typestat --include "src/**/*.ts" --fixes strictNullChecks

Kotlin example:

fun main() {
    val name: String? = null
    println(name?.length ?: "Name is null")
}

While TypeStat focuses on improving TypeScript code with static analysis and automatic fixes, Kotlin is a full-fledged programming language that can be used for various purposes, including Android development and server-side applications. TypeStat is more specialized for TypeScript projects, while Kotlin offers broader functionality but may require more effort to integrate into existing TypeScript workflows.

10,195

The Dart SDK, including the VM, JS and Wasm compilers, analysis, core libraries, and more.

Pros of sdk

  • Comprehensive SDK for the Dart programming language
  • Actively maintained by Google with frequent updates
  • Extensive documentation and community support

Cons of sdk

  • Large codebase, potentially overwhelming for newcomers
  • Focused solely on Dart, limiting its applicability to other languages
  • Steeper learning curve due to its complexity

Code Comparison

TypeStat (TypeScript):

export function addTypes(
    program: ts.Program,
    options: Partial<Options> = {}
): Promise<string[]> {
    const typeStatOptions = new TypeStatOptions(options);
    return new TypeStatMutator(program, typeStatOptions).mutate();
}

sdk (Dart):

class DartType {
  final String name;
  final List<DartType> typeArguments;

  const DartType(this.name, [this.typeArguments = const []]);

  String toString() {
    if (typeArguments.isEmpty) return name;
    return '$name<${typeArguments.join(', ')}>';
  }
}

While TypeStat focuses on adding types to TypeScript code, sdk provides a more comprehensive set of tools for Dart development. TypeStat's code snippet shows a function for adding types, while sdk's example demonstrates a class for representing Dart types. The sdk repository is more extensive and language-specific, whereas TypeStat is a targeted tool for TypeScript type improvements.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

TypeStat

Converts JavaScript to TypeScript and TypeScript to better TypeScript. 🧫

👪 All Contributors: 12 🤝 Code of Conduct: Kept 🧪 Coverage 📝 License: MIT 📦 npm version 💪 TypeScript: Strict

Usage

TypeStat is a CLI utility that modifies TypeScript types in existing code. The built-in mutators will only ever add or remove types and will never change your runtime behavior. TypeStat can:

  • ✨ Convert JavaScript files to TypeScript in a single bound!
  • ✨ Add TypeScript types on files freshly converted from JavaScript to TypeScript!
  • ✨ Infer types to fix --noImplicitAny and --noImplicitThis violations!
  • ✨ Annotate missing nulls and undefineds to get you started with --strictNullChecks!

⚡ To start, the typestat command will launch an interactive guide to setting up a configuration file. ⚡

npx typestat
👋 Welcome to TypeStat! 👋
This will create a new typestat.json for you.
...

After, use typestat --config typestat.json to convert your files.

Configuration

To get a deeper understanding of TypeStat, read the following docs pages in order:

  1. Usage.md for an explanation of how TypeStat works
  2. Fixes.md for the type of fixes TypeStat will generate mutations for
  3. Cleanups.md for the post-fix cleaning TypeStat may apply to files
  4. Types.md for configuring how to work with types in mutations
  5. Filters.md for using tsquery to ignore sections of source files
  6. Custom Mutators.md for including or creating custom mutators

Development

See .github/CONTRIBUTING.md, then .github/DEVELOPMENT.md for general tooling documentation. For understanding the project, see ./docs in general, and especially ./docs/Architecture.md. Thanks! 💖

Contributors

Beyang Liu
Beyang Liu

💻
Daniel Stiner
Daniel Stiner

🐛
Deleted user
Deleted user

🚧
Emerson
Emerson

💻
Girish Sontakke
Girish Sontakke

💻
Guten
Guten

🐛
Ibrahim H.
Ibrahim H.

💻
Josh Goldberg ✨
Josh Goldberg ✨

🚧 🐛 🔧 💻 🚇 📖
Mark Molinaro
Mark Molinaro

🐛 💻
Nigel Gilbert
Nigel Gilbert

🐛
orionna319
orionna319

🐛
rubiesonthesky
rubiesonthesky

🐛 🚧 🔧 💻 ⚠️

💙 This package is based on @JoshuaKGoldberg's TypeStat.

NPM DownloadsLast 30 Days