JavaScript vs TypeScript - What are the Differences?

JavaScript vs TypeScript - What are the Differences?

TypeScript is a typed superset of JavaScript that provides static typing and other powerful features. This guide compares JavaScript and TypeScript and explains the key differences between the two.

What is TypeScript?

TypeScript extends JavaScript by adding static type definitions. It was created by Microsoft to add features like static typing, interfaces, enums and more. The core TypeScript language is open source. TypeScript adds type annotations to allow variables, parameters and functions to be statically checked. This catches many errors before execution. Transpiling TypeScript to JavaScript allows it to run anywhere JavaScript runs.

Optional Static Typing

The key difference between JavaScript and TypeScript is that TypeScript adds optional static typing through type annotations. For example:

// Type annotation 
const num: number = 123;

// Interface 
interface User {
  name: string;
  id: number;
}

TypeScript uses these annotations to check for type correctness at compile time. But they are completely optional - your existing JavaScript is valid TypeScript!

This optional typing allows catching entire classes of bugs, provides auto-complete in editors, and makes refactoring easier.

Advanced Feature Set

In addition to optional typing, TypeScript includes many other advanced language features:

  • Interfaces - Enforce contracts in your code and get compiler checking

  • Enums - Add named constants

  • Generics - Parameterize types for reusable components

  • Tuple types - Add validation for fixed-length or variadic arrays

  • Union types - Specify a value that can be one of the multiple types

  • Utility types - Ready-made common types like Partial, Required, etc.

Together these features enhance your productivity and provide powerful abstractions.

Tooling

TypeScript has first-class support in editors like VSCode. You get excellent intellisense, auto-complete, and inline documentation baked in. The TypeScript compiler can transpile to clean, readable JavaScript output. It also includes configuration options for module systems, libraries, and JavaScript targets. For large codebases, TypeScript enables refactoring at scale with its rich static information and analysis. The tooling ecosystem is excellent.

Downleveling

After type checking, TypeScript code is converted ("downlevelled") to plain JavaScript. The emitted JavaScript runs anywhere regular JavaScript runs. Downlevelled code is clean and standards-compliant ES3/ES5 code. This allows using TypeScript even in legacy environments unable to support new JavaScript features directly.

Conclusion

TypeScript enhances productivity in large JavaScript codebases. The optional typing bringseditor tooling, compile-time checks, and better documentation. Advanced features like enums, generics, and utility types provide powerful abstraction. And the ability to incrementally opt in combined with great tooling provide a smooth upgrade from JavaScript. For large scale development, TypeScript is quickly becoming indispensable.

Did you find this article valuable?

Support Milad Sadeghi by becoming a sponsor. Any amount is appreciated!