Why Use allowJs in TypeScript Projects? Here’s the Answer

If you enjoy this story and find it helpful, feel free to give it a like or share it with someone who might benefit from it!

---

I’m a school principal, and my school is renowned for its rigorous mathematics program. All students are expected to wear a uniform that symbolizes their dedication to math, representing the strict requirements we have—much like TypeScript with its type safety and structured approach. But one day, I decided to introduce a new program called “allowJs” where students who excel in arts, represented by JavaScript, could join the math club without having to wear the uniform.

Initially, some teachers were skeptical. They were concerned that these artsy students, who dressed more casually and didn’t adhere to the strict dress code, might disrupt the disciplined environment. However, I believed there was value in their creativity and unique perspectives, and I wanted to integrate that into our math-focused culture.

By allowing these art students to join, we started to see fascinating collaborations. The math students taught the art students about structure and equations, while the art students brought in creativity and new ways of thinking. This enriched our school’s culture, allowing us to tackle problems in innovative ways we hadn’t thought of before.

The “allowJs” program wasn’t about changing our core identity but about embracing diversity and opening our doors to new ideas, much like how the allowJs option in tsconfig.json allows JavaScript files to coexist with TypeScript files in a project. It lets us leverage the flexibility and dynamism of JavaScript while still maintaining the strong foundation of TypeScript where needed.

So, like my school’s decision to welcome the art students, enabling allowJs is about creating harmony between structure and creativity, allowing them to thrive side by side.

---

I have a TypeScript project with a strict focus on types, just like my math students with their uniform. Here’s a basic TypeScript file:

// math.ts
function add(a: number, b: number): number {
    return a + b;
}

const result = add(5, 10);
console.log(result); // Outputs: 15

Now, let’s say I have a JavaScript file that brings in some creative flair, much like the art students:

// creativity.js
function multiply(a, b) {
    return a * b;
}

let product = multiply(5, 10);
console.log(product); // Outputs: 50

By setting "allowJs": true in my tsconfig.json, I allow these JavaScript files to join the TypeScript environment:

{
  "compilerOptions": {
    "allowJs": true,
    "outDir": "./dist",
    "target": "es5"
  },
  "include": ["./**/*"]
}

With this configuration, my project can now seamlessly compile both math.ts and creativity.js, allowing the structured and creative elements to coexist:

1. TypeScript Strength: Just like the disciplined math students, TypeScript provides type safety and structured code.
2. JavaScript Flexibility: The spontaneous creativity of JavaScript allows for quicker experimentation and integration of existing scripts.

Key Takeaways

• Integration and Flexibility: The allowJs option lets JavaScript files coexist in a TypeScript project, similar to how the art students were integrated into the math-focused school. This allows for flexibility and the inclusion of existing JavaScript code.
• Balanced Approach: Combining TypeScript’s type safety with JavaScript’s flexibility can lead to a more holistic and dynamic project, enriching the development process.
• Gradual Transition: If you have an existing JavaScript codebase, allowJs provides a path for gradually transitioning to TypeScript without a complete rewrite.