
TypeScript
Introduction
Welcome to the world of TypeScript, a powerful superset of JavaScript that has been making waves in the development community. Whether you're a beginner taking your first steps into programming or an intermediate developer looking to expand your skill set, this article is your gateway to understanding and harnessing the capabilities of TypeScript.
We'll start with the basics, exploring the fundamental syntax and features that set TypeScript apart. From there, we'll delve into object-oriented programming concepts, discovering how TypeScript enhances familiar JavaScript principles. As we journey through the realms of TypeScript, we'll cover advanced topics like generics and decorators, equipping you with the knowledge to write more robust and scalable code. Along the way, we'll explore real-world examples and case studies, showcasing the practical applications of TypeScript in various projects. Whether you're setting up TypeScript for the first time, debugging your code, or integrating it into existing projects, this comprehensive guide has you covered. So, buckle up as we embark on a journey through the world of TypeScript, unlocking its potential and empowering you to write more maintainable and efficient code.
Brief History
- First announced by Microsoft in October 2012, with Anders Hejlsberg, the creator of C# and Turbo Pascal
- TypeScript was to address the shortcomings of JavaScript, particularly in large-scale applications. JavaScript has grown exponentially but also prone to runtime errors due to its lack of type checking.
- TypeScript goal is to be a static type checker for JavaScript - in other words, a toll that runs before your code runs (static) and ensures that the types of the program are correct (type-checked)
Features
- OOP
- TypeScript is a subset of JavaScript
- Support JavaScript Libraries
- Static type checking at compile time
Setup
npm
To get started, you'll need Node.js, which includes npm (Node Package Manager). To initialize a Node.js project, run the following command in your project root directory:
npm init -y
This creates a package.json
file to manage your project's dependencies and share it with others.
TypeScript Installation
TypeScript can be installed in two ways: locally or globally.
Locally (recommended)
npm install typescript --save-dev
This command installs TypeScript in the current project directory as a development dependency. The TypeScript compiler (tsc
) can be accessed using npm scripts defined in your package.json
file.
Local installation ensures that everyone working on the project is using the same version of TypeScript.
Globally
npm install -g typescript
This command installs TypeScript globally on your system. This means you can access the TypeScript compiler (tsc
) from any directory on your system.
Global installation could lead to versioning issues if different projects rely on different versions of TypeScript.
tsconfig
A tsconfig.json
file provides configuration options for the TypeScript compiler. It allows you to specify things like the target JavaScript version, module system, and output directory. Having a tsconfig.json
file ensures that your TypeScript code is compiled consistently across different environments.
The following is an example of a basic tsconfig.json
file:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "./dist"
}
}
Alternatively, you can generate a tsconfig.json
file with all possible compiler options commented out, by running the tsc --init
command. Since this generated file contains a lot of information though, it can be overwhelming for beginners.
Writing and Compiling TypeScript
After setting up TypeScript for your project, you can now start writing and compiling TypeScript code to enjoy the benefits of type checking and static analysis. For this demo, lets write a basic hello-world program.
- Create a new file with a
.ts
extension (e.g.hello.ts
)
- Write the following hello-world program
let message: string = 'Hello World!'; console.log(message);
- Navigate to the directory where
hello.ts
is located in your terminal
- Use the
tsc
compiler to compile the TypeScript file into JavaScriptnpx tsc hello.ts
- Open
hello.js
. Notice how it doesn't look very different fromhello.ts
var message = 'Hello World!'; console.log(message);
- Run the compiled JavaScript code
node hello.js
TypeScript v.s. JavaScript
TypeScript v.s. Other Languages
Feature | TypeScript | Python | PHP | C |
---|---|---|---|---|
Type System | Static | Dynamic | Dynamic | Static |
Translator | Transpiler (tsc) to JavaScript | Interpreter | Interpreter | Compiler |
Binding | Early binding (static binding) | Late binding (dynamic binding) | Late binding (dynamic binding) | Early binding (static binding) |
Visibility | Public, private, protected | Public, private, protected | Public, private, protected | Public, private, static |
Scoping | Block-scoped and function-scoped | Block-scoped and function-scoped | Function-scoped | Block-scoped and function-scoped |
Lifetime Management | Automatic garbage collection | Automatic garbage collection | Automatic garbage collection | Manual memory management |
Interfaces | Supports interfaces to define the structure of objects | Does not have built-in support for interfaces, but can be emulated using abstract classes | Does not have built-in support for interfaces, but can be emulated using abstract classes | Does not have built-in support for interfaces |
Generics | Supports generics to write reusable code that works with different data types | Does not have built-in support for generics | Does not have built-in support for generics | Does not have built-in support for generics |
Parameter-Passing | Supports both pass-by-value and pass-by-reference parameter passing | Supports pass-by-object parameter passing, which is similar to pass-by-reference | Supports pass-by-reference parameter passing | Supports pass-by-value parameter passing |
Metapogramming | Supports decorators and reflection | Strong support with decorators, metaclasses, and dynamic manipulation | Limited support compared to Python, includes reflection and dynamic creation | Minimal support; lacks reflection and runtime code generation |