TypeScript Tutorial: Building a Simple Interactive Code Validator

Written by

learnmodernjavascript

in

In the world of software development, ensuring code quality is paramount. Bugs, errors, and inconsistencies can lead to frustrating user experiences, security vulnerabilities, and project delays. That’s where code validation comes in. Code validation is the process of checking code for correctness, adherence to coding standards, and potential issues before it’s deployed. This tutorial will guide you through building a simple, interactive code validator using TypeScript, a powerful superset of JavaScript that adds static typing.

Why Code Validation Matters

Imagine building a house. You wouldn’t start pouring concrete without checking the blueprints, right? Code validation is similar. It’s like having a meticulous architect review your code before it becomes a part of a larger project. It helps you:

  • Catch Errors Early: Identifying and fixing errors during development is much cheaper and faster than finding them in production.
  • Improve Code Quality: Code validation helps enforce coding standards and best practices, leading to cleaner, more readable, and maintainable code.
  • Enhance Security: By validating user inputs and other data, you can prevent security vulnerabilities like cross-site scripting (XSS) and SQL injection.
  • Boost Productivity: By automating the validation process, you can save time and reduce the likelihood of introducing bugs.

This tutorial will empower you to create a basic code validator that you can then adapt and expand to fit your specific needs. Let’s get started!

Setting Up Your TypeScript Environment

Before we dive into the code, let’s set up our development environment. You’ll need:

  • Node.js and npm (Node Package Manager): These are essential for running JavaScript and managing project dependencies. You can download them from https://nodejs.org/.
  • TypeScript Compiler (tsc): This tool converts your TypeScript code into JavaScript. Install it globally using npm: npm install -g typescript.
  • A Code Editor: Choose your preferred code editor (VS Code, Sublime Text, Atom, etc.). VS Code is highly recommended and offers excellent TypeScript support.

Once you have these installed, create a new project directory and initialize a Node.js project:

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

This creates a package.json file in your project directory. Now, let’s create a TypeScript configuration file (tsconfig.json) to tell the TypeScript compiler how to compile your code. Run the following command:

tsc --init

This generates a tsconfig.json file with a lot of options. For this tutorial, we’ll keep it simple. Open tsconfig.json and make sure the following options are set (or add them if they don’t exist):

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}
  • target: "ES2015": Specifies the JavaScript version to compile to.
  • module: "commonjs": Specifies the module system to use.
  • outDir: "./dist": Specifies the output directory for the compiled JavaScript files.
  • strict: true: Enables strict type checking.
  • esModuleInterop: true: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: true: Skips type checking of declaration files (e.g., those in node_modules).
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in file names.
  • include: ["src/**/*"]: Specifies the files and directories to include in the compilation.

Now, create a src directory and a file named index.ts inside it. This is where we’ll write our TypeScript code.

Building the Code Validator

Let’s start by defining a simple function that will validate code. For this example, we’ll focus on checking for a few basic things:

  • Syntax Errors: Using `try…catch` blocks to attempt to execute the code and catch any syntax errors.
  • Unsafe Code (Basic Check): Checking for the use of potentially dangerous functions like `eval()` (this is a simplified example; real-world security checks are far more complex).

Here’s the initial code for src/index.ts:

function validateCode(code: string): { isValid: boolean; errors: string[] } {
  const errors: string[] = [];
  let isValid = true;

  try {
    // Attempt to execute the code to check for syntax errors
    eval(code);
  } catch (error: any) {
    isValid = false;
    errors.push(error.message || "Syntax Error");
  }

  // Basic check for potentially unsafe code (very simplified)
  if (code.includes("eval(")) {
    isValid = false;
    errors.push("Potentially unsafe code detected (eval).");
  }

  return { isValid, errors };
}

// Example usage
const codeToValidate = `
function add(a, b) {
  return a + b;
}

console.log(add(2, 3));
`;

const validationResult = validateCode(codeToValidate);

if (validationResult.isValid) {
  console.log("Code is valid.");
} else {
  console.log("Code is invalid:");
  validationResult.errors.forEach((error) => console.log(`- ${error}`));
}

Let’s break down this code:

  • `validateCode(code: string)`: This function takes a string of code as input.
  • `errors: string[] = []` and `isValid = true` : Initializes an array to store error messages and a boolean to track the validity of the code.
  • `try…catch` Block: The `eval(code)` attempts to execute the code. If there’s a syntax error, the `catch` block catches the error, sets `isValid` to `false`, and adds an error message to the `errors` array.
  • `if (code.includes(“eval(“))` : This is a very basic example of checking for potentially unsafe code. In a real-world scenario, you would use more sophisticated techniques to analyze the code for security vulnerabilities.
  • Return Value: The function returns an object with two properties: `isValid` (a boolean indicating whether the code is valid) and `errors` (an array of error messages, if any).
  • Example Usage: The code demonstrates how to use the `validateCode` function and display the results.

Running and Testing the Validator

Now, let’s compile and run our code. In your terminal, navigate to your project directory and run:

tsc

This command compiles your TypeScript code into JavaScript and places the compiled files in the dist directory. Then, run the compiled JavaScript using Node.js:

node dist/index.js

You should see the output “Code is valid.” in your console. Now, let’s test it with some invalid code. Modify the codeToValidate variable in src/index.ts to include a syntax error, such as a missing semicolon or a misspelled keyword. For example:

const codeToValidate = `
function add(a, b) {
  return a + b  // Missing semicolon
}

console.log(add(2, 3));
`;

Recompile and run the code again. This time, you should see output indicating that the code is invalid, along with an error message.

Experiment with different code snippets, including those that use `eval()`, to see how the validator responds.

Adding More Validation Rules

The current validator is very basic. You can significantly improve it by adding more validation rules. Here are some ideas:

  • Code Style Checks: Use a linter like ESLint or Prettier to enforce code style rules (e.g., indentation, spacing, naming conventions). These tools can automatically identify and even fix style issues.
  • Type Checking: TypeScript’s static typing system is a powerful tool for catching type-related errors. Ensure you’re using types correctly and that your code doesn’t have type mismatches.
  • Security Checks: Implement more robust security checks, such as input sanitization, output encoding, and vulnerability detection (e.g., using libraries like `safe-eval` for more controlled execution).
  • Complexity Analysis: Measure code complexity (e.g., cyclomatic complexity) to identify potentially problematic areas of your code.
  • Dependency Analysis: Check for outdated or vulnerable dependencies.
  • Custom Rules: Create custom validation rules to enforce specific coding standards for your project or team.

Here’s an example of how you might integrate ESLint into your project to check for code style issues. First, install ESLint and the necessary plugins:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Then, create an ESLint configuration file (.eslintrc.js) in your project root:

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  root: true,
  env: {
    node: true,
  },
  rules: {
    // Add your custom rules here.  For example:
    'no-console': 'warn',
    '@typescript-eslint/explicit-function-return-type': 'warn',
  },
};

This configuration uses the recommended rules from `@typescript-eslint/eslint-plugin`. You can customize the rules to fit your needs. For example, the `no-console` rule will flag any `console.log()` statements as warnings, and the `@typescript-eslint/explicit-function-return-type` rule will warn you if your functions don’t have explicit return types.

Next, add a script to your package.json file to run ESLint:

{
  "scripts": {
    "lint": "eslint . --ext .ts"
  }
}

Now, you can run ESLint by executing npm run lint in your terminal. ESLint will analyze your TypeScript code and report any style issues or violations of the rules you’ve configured. You can integrate this into your build process to ensure that your code always adheres to your coding standards.

Step-by-Step Instructions: Building a Code Validator with Enhanced Features

Let’s enhance our code validator by integrating ESLint and adding a basic input sanitization check. This will give you a taste of how to build a more robust validator.

  1. Install Dependencies: As shown above, install ESLint and the necessary plugins using npm:
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
  1. Create ESLint Configuration: Create a .eslintrc.js file in your project root with the configuration shown above or customize it to your liking.
  2. Add Lint Script to package.json: Add the `lint` script shown above to your package.json.
  3. Update `validateCode` Function (src/index.ts): Modify the validateCode function in src/index.ts to include input sanitization and integrate ESLint.
import { ESLint } from "eslint";

// Basic input sanitization (very simplified)
function sanitizeInput(input: string): string {
  // Remove potentially harmful characters
  let sanitizedInput = input.replace(/&/g, "&");
  sanitizedInput = sanitizedInput.replace(//g, ">");
  sanitizedInput = sanitizedInput.replace(/"/g, """);
  sanitizedInput = sanitizedInput.replace(/'/g, "'");

  return sanitizedInput;
}

async function validateCode(code: string): Promise {
  const errors: string[] = [];
  let isValid = true;

  // 1. Input Sanitization
  const sanitizedCode = sanitizeInput(code);

  // 2. ESLint Integration
  const eslint = new ESLint();
  const results = await eslint.lintText(sanitizedCode);

  for (const result of results) {
    for (const message of result.messages) {
      isValid = false;
      errors.push(`${message.message} (line ${message.line}, column ${message.column})`);
    }
  }

  // 3. Syntax Check (using try...catch)
  try {
    eval(sanitizedCode);
  } catch (error: any) {
    isValid = false;
    errors.push(error.message || "Syntax Error");
  }

  // 4. Basic check for potentially unsafe code (very simplified)
  if (sanitizedCode.includes("eval(")) {
    isValid = false;
    errors.push("Potentially unsafe code detected (eval).");
  }

  return { isValid, errors };
}

// Example usage
const codeToValidate = `
function add(a, b) {
  return a + b;
}

console.log(add(2, 3));
`;

async function runValidation() {
  const validationResult = await validateCode(codeToValidate);

  if (validationResult.isValid) {
    console.log("Code is valid.");
  } else {
    console.log("Code is invalid:");
    validationResult.errors.forEach((error) => console.log(`- ${error}`));
  }
}

runValidation();

Key changes include:

  • Import ESLint: Imports the necessary module from `eslint`.
  • `sanitizeInput` Function: This function performs basic input sanitization to prevent potential XSS vulnerabilities. It replaces HTML special characters with their encoded equivalents.
  • ESLint Integration: The code now uses the ESLint API to lint the code. It creates an ESLint instance, runs `lintText` on the code, and processes the results.
  • Error Reporting: The code now reports ESLint errors, including the line and column numbers.
  • Syntax Check with Sanitized Code: The `eval` function now works on the sanitized code.
  • Async/Await: The `validateCode` function is now async since we’re using the ESLint API. The example usage now includes an `async` function to call the validation.
  1. Test the Enhanced Validator: Compile your code (tsc) and run it (node dist/index.js). Try introducing both syntax errors and code style violations (e.g., by omitting semicolons or using inconsistent indentation) to see how the validator responds. Also, try injecting HTML special characters into the code to see if the sanitization works.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when building code validators and how to avoid them:

  • Over-Reliance on `eval()`: While `eval()` can be used for syntax checking, it’s generally discouraged in production code due to security risks. Use it sparingly and only in controlled environments. Consider using more secure alternatives, like a JavaScript parser (e.g., Acorn) or a sandboxed execution environment.
  • Ignoring Security: Failing to implement proper security checks can leave your application vulnerable to attacks. Always sanitize user inputs, validate data, and use secure coding practices.
  • Lack of Comprehensive Testing: Thoroughly test your validator with a wide range of code snippets, including valid and invalid code, edge cases, and potential security vulnerabilities.
  • Not Using a Linter: Neglecting to use a linter can lead to inconsistent code style and make it harder to maintain your codebase. Integrate a linter like ESLint or Prettier into your development workflow.
  • Overly Complex Validation Rules: Avoid creating overly complex or rigid validation rules that can hinder developer productivity. Strike a balance between enforcing standards and allowing flexibility.

Summary / Key Takeaways

This tutorial has provided a practical introduction to building a simple, interactive code validator using TypeScript. You’ve learned how to:

  • Set up a TypeScript development environment.
  • Create a basic code validation function.
  • Integrate ESLint for code style checking.
  • Implement basic input sanitization.
  • Understand common mistakes and how to avoid them.

By following these steps, you can create a foundation for a more robust code validator that helps improve code quality, enhance security, and boost developer productivity. Remember that code validation is an ongoing process. As your project grows and evolves, you’ll need to adapt and expand your validation rules to meet your specific needs.

FAQ

Here are some frequently asked questions about code validation:

  1. What is the difference between code validation and code linting?
    • Code validation is a broader term that encompasses checking code for correctness, adherence to coding standards, and potential issues. Linting is a specific type of code validation that focuses on checking code style and formatting. Linters typically identify style violations and offer suggestions or automatic fixes.
  2. What are some popular code validation tools?
    • ESLint, Prettier, SonarQube, and various static analysis tools are popular choices for code validation.
  3. How can I automate the code validation process?
    • Integrate your validation tools into your build process, continuous integration (CI) pipeline, or code editor. This ensures that code is automatically validated whenever it’s saved or committed.
  4. Is it possible to validate all types of code?
    • No, it’s impossible to create a perfect validator that catches all possible errors and vulnerabilities. However, by using a combination of tools and techniques, you can significantly improve code quality and reduce the risk of issues.
  5. How do I choose the right validation tools for my project?
    • Consider the programming languages, frameworks, and coding standards used in your project. Choose tools that support these technologies and offer the features you need. Also, consider the size and complexity of your project and the level of automation you want to achieve.

Building a code validator is a valuable skill for any software engineer. It’s a key part of the software development lifecycle. With the knowledge gained in this tutorial, you are well-equipped to start building your own code validator and improve the quality of your code. Remember to continuously refine your validation process and adapt it to the evolving needs of your projects. The journey of software development is one of continuous learning and improvement, and code validation is a crucial step in that process.

More posts