Table of Contents
Introduction to TypeScript
TypeScript is a superset of JavaScript that adds static typing to the language. It provides a way to write more predictable and structured code, enabling developers to catch errors at compile time.
Setting Up a TypeScript Project
To set up a TypeScript project, you can use Node.js and npm. Start by initializing a new project with npm and installing TypeScript as a dev dependency:
npm init -y
npm install typescript --save-dev
Create a TypeScript configuration file (tsconfig.json) in the root of your project to specify the compiler options:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "dist",
"strict": true
}
}
Creating a Web Application
Now, let’s create a simple web application using TypeScript.
First, create an index.html file with a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>TypeScript Web App</title>
</head>
<body>
<h1>Welcome to my TypeScript Web App</h1>
<script src="dist/index.js"></script>
</body>
</html>
Next, create an app.ts file to write your TypeScript code:
class Greeting {
constructor(private message: string) {}
greet() {
document.body.innerHTML = this.message;
}
}
const greeting = new Greeting("Hello, TypeScript!");
greeting.greet();
Compile the app.ts file to JavaScript using the TypeScript compiler:
npx tsc app.ts
This will generate a dist folder with the compiled index.js file.
Conclusion
In this blog post, we explored how to set up a TypeScript project and create a simple web application using TypeScript. TypeScript’s static typing and modern features make it an excellent choice for building robust web applications.
References: