TypeScript Tutorial: Building a Simple Interactive Code Completion System

Written by

learnmodernjavascript

in

Have you ever wondered how your code editor magically suggests the next piece of code, or how it knows the properties of an object you’re using? This is the power of code completion, a feature that significantly boosts developer productivity. In this tutorial, we’ll dive into building a simple, yet functional, interactive code completion system using TypeScript. We’ll explore the core concepts, step-by-step implementation, common pitfalls, and best practices to help you create your own version. Whether you’re a beginner or an intermediate developer, this tutorial will provide a solid foundation for understanding and implementing code completion.

Why Code Completion Matters

Code completion isn’t just a fancy feature; it’s a productivity enhancer. Here’s why it’s so important:

  • Reduced Errors: By suggesting valid code options, it minimizes typos and syntax errors.
  • Faster Development: It saves time by reducing the need to manually type out long function names, properties, and more.
  • Improved Code Discovery: It helps you discover available methods and properties, especially in unfamiliar APIs.
  • Enhanced Learning: It provides hints and suggestions, helping you learn and understand the code more effectively.

In essence, code completion makes coding faster, more accurate, and more enjoyable.

Core Concepts

Before we start coding, let’s understand the key concepts behind code completion:

  • Language Server: This is the engine that provides code completion, syntax checking, and other language-related features. In a real-world scenario, you’d integrate with a language server (like the one used in VS Code). For simplicity, we’ll build a simplified version here.
  • Code Completion Provider: This component is responsible for providing the suggestions. It analyzes the code context and offers relevant options.
  • Context Analysis: Understanding the code context is crucial. This involves parsing the code to identify the current scope, variables, and available methods/properties.
  • Suggestion Filtering: The provider filters suggestions based on the user’s input. For example, if the user types “console.”, the provider will suggest methods like “log”, “warn”, and “error”.

Step-by-Step Implementation

Let’s build a basic code completion system in TypeScript. We’ll focus on a simple scenario: completing properties of an object. We’ll use a simplified approach to keep things understandable.

1. Project Setup

First, create a new TypeScript project. If you don’t have TypeScript installed, install it globally:

npm install -g typescript

Create a directory for your project, navigate into it, and initialize a `package.json` file:

mkdir code-completion-tutorial
cd code-completion-tutorial
npm init -y

Create a `tsconfig.json` file to configure TypeScript:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Create a `src` directory and a file named `index.ts` inside it. This is where we’ll write our code.

2. Define a Simple Object and Properties

Let’s define a simple object with some properties that our code completion system will suggest:

// src/index.ts
interface Person {
  name: string;
  age: number;
  greet: () => void;
}

const person: Person = {
  name: "Alice",
  age: 30,
  greet: () => {
    console.log("Hello!");
  },
};

3. Create a Completion Provider

Now, let’s create a function that will act as our completion provider. This function will take the input (what the user has typed) and the current code context, and return suggestions.

// src/index.ts (continued)
function getCompletions(input: string, context: any): string[] {
  const suggestions: string[] = [];

  if (input.startsWith("person.")) {
    if (input.length > "person.".length) {
      const partialInput = input.substring("person.".length);
      const personProperties = Object.keys(person);
      personProperties.forEach(prop => {
        if (prop.startsWith(partialInput)) {
          suggestions.push(prop);
        }
      });
    } else {
      suggestions.push(...Object.keys(person));
    }
  }

  return suggestions;
}

In this example, the `getCompletions` function checks if the input starts with “person.”. If it does, it retrieves the properties of the `person` object and suggests them. It also filters the suggestions based on the user’s input after “person.”.

4. Simulate User Input and Display Suggestions

Let’s simulate user input and see how our code completion system works:

// src/index.ts (continued)
function simulateUserInput(userInput: string) {
  const suggestions = getCompletions(userInput, {}); // No context needed for this simple example
  if (suggestions.length > 0) {
    console.log("Suggestions:", suggestions.join(", "));
  } else {
    console.log("No suggestions.");
  }
}

simulateUserInput("person.");
simulateUserInput("person.n");
simulateUserInput("person.age");
simulateUserInput("console.log("Hello world")"); // Test that it does not provide suggestions

This code simulates the user typing different inputs and displays the suggestions provided by our `getCompletions` function. Compile the TypeScript code:

tsc

Run the compiled JavaScript code:

node dist/index.js

You should see the suggestions in the console.

5. Expanding the System (Optional)

To make this system more robust, you could:

  • Handle different object types: Use a type system or data structure to store information about different objects and their properties.
  • Implement context analysis: Parse the code to understand the current scope and available variables. This allows for more accurate suggestions.
  • Add function signatures: Display the function parameters and return types.
  • Integrate with a real-world language server: Use the Language Server Protocol (LSP) to communicate with a language server (like the TypeScript Language Service).

Common Mistakes and How to Fix Them

Here are some common mistakes when building code completion systems and how to address them:

  • Incorrect Context Handling: Failing to correctly analyze the code context will lead to irrelevant or incorrect suggestions. Solution: Implement robust code parsing and scope analysis.
  • Inefficient Suggestion Filtering: If filtering is slow, the code completion system will feel sluggish. Solution: Optimize the filtering algorithm and use efficient data structures.
  • Poor User Interface: A poorly designed user interface can make the code completion system difficult to use. Solution: Design a clear and intuitive UI that displays suggestions in a user-friendly manner. Consider using a library for UI elements.
  • Ignoring Edge Cases: Code completion systems need to handle various edge cases, such as invalid code, incomplete statements, and complex nested structures. Solution: Thoroughly test the system and handle edge cases gracefully.
  • Not Using a Language Server: Building a complete code completion system from scratch can be very complex. Solution: Consider integrating with an existing language server to leverage its advanced features.

Key Takeaways

Here’s what we’ve covered:

  • We’ve built a basic code completion system in TypeScript.
  • We’ve explored the core concepts behind code completion, including the language server, completion provider, context analysis, and suggestion filtering.
  • We’ve learned how to handle user input and provide relevant suggestions.
  • We’ve discussed common mistakes and how to avoid them.

FAQ

Here are some frequently asked questions about code completion:

  1. What is a language server? A language server is a specialized program that provides language-specific features, such as code completion, syntax checking, and go-to-definition.
  2. What is the Language Server Protocol (LSP)? The Language Server Protocol (LSP) is a standard protocol for communication between code editors/IDEs and language servers.
  3. How can I integrate my code completion system with an editor? You can integrate your code completion system with an editor by implementing the Language Server Protocol (LSP) and connecting it to the editor.
  4. Are there any existing libraries or frameworks I can use? Yes, there are several libraries and frameworks available, such as the TypeScript Language Service API, which provides many of the functionalities you would need.
  5. How can I handle different programming languages? For different programming languages, you would need to implement language-specific parsers, completion providers, and other language-related components. You can leverage existing language servers for each language or build your own.

Building a code completion system, even a simplified version, is a valuable exercise for understanding how modern IDEs work and how they improve developer productivity. This tutorial provides a basic framework you can expand upon. Remember to focus on context analysis, efficient filtering, and a user-friendly interface to create a truly helpful code completion experience. The more complex systems are, the more they rely on efficient data structures and algorithms, so consider those aspects as you expand the system. By understanding the underlying principles, you can create a system that significantly boosts your coding efficiency.

More posts