Comparing TypeScript with Vanilla JavaScript
TypeScript is a flavor of JavaScript, and Vanilla JavaScript is just plain, standards-based native JavaScript. TypeScript is used more than vanilla JavaScript according to the State of JavaScript 2022. The core TypeScript feature that puts it in a league of its own is its type system.
How Does TypeScript Relate to JavaScript?
TypeScript is a superset of JavaScript and compiles to JavaScript. Being a superset, all TypeScript is not JavaScript until it is compiled/transpiled. Browsers don’t support TypeScript, therefore TypeScript code can’t be run in browsers directly. Both languages support types.
Static vs Dynamic Types
JavaScript is a dynamic language with dynamic types, which means that data types are only checked at runtime. TypeScript makes it easier to debug JavaScript by performing static type checking.
Type Annotations
TypeScript supports type annotations in variable declarations with var, let, and const as in let name: string = "John". TypeScript supports specifying type annotations with function parameters, function return values, and class fields. Type annotations are removed when it is compiled into JavaScript.
Strong vs Weak Typing
JavaScript is a weakly typed language. When operations involve mismatched types it performs implicit type conversions. Implicit conversion may not happen as a developer expects them to and it can introduce bugs.
TypeScript is a strongly typed flavor of JavaScript. The strict flag in tsconfig.json can be used to enable stricter type checking before compiling to the runnable JavaScript.
Type Inference
TypeScript supports type inference. For example, it infers the type of name as a string in the declaration let name = "John" even though the type is not explicitly specified. Type inference is used with function parameters and function return value.
Additional Types
TypeScript adds support for new types including the “any” type. These additional types are only meant for static type checking, and the compiled JavaScript has only the JavaScript-supported types. You can use union types, which is a user-defined type created by combining supported TypeScript types. An interface declaration can be used to define an object type. Literal types can be defined for a literal value such as a string or a number.
Enums, Generics, and Other
TypeScript supports enums as a set of named constants, numeric or string constants. Enum is a non-type related extension to JavaScript. At runtime enums are objects. TypeScript supports generics to enable the use of a component such as a function over a range of types. As an example, the following generic function connect does not specify an explicit type, but rather allows a range of types: function connect<Type>(arg: Type): Type {return arg;}. In this generic function, the generic type parameter is declared in angle brackets (<>). Some other features specific to TypeScript are namespaces, function overloading, and decorators. Namespaces can be used to organize TypeScript code. Decorators are used for annotating classes and class members.
IDE Support
With its support for static type checking, quite a few IDEs support TypeScript, such as Visual Studio Code, WebStorm, and IntelliJ IDEA.
Which to Use?
If your application is large-scale, consisting of huge codebases, start by developing with TypeScript. TypeScript helps debug the code and catch errors early. If it is a small-scale application it can be developed directly in JavaScript just as well.
