TypeScript with React, Vue, and Angular

Chapter Outline

Using TypeScript with Popular Frameworks: React, Vue, and Angular

TypeScript, a superset of JavaScript, offers static typing, classes, and interface features. When used with popular frameworks like React, Vue, and Angular, it enhances the development experience with better tooling, improved maintainability, and easier code management. This article explores how to integrate TypeScript with these three major frameworks, providing examples and setup instructions for each.

TypeScript with React

React's component-based architecture works seamlessly with TypeScript, offering a robust setup for building user interfaces.

Setup and Installation

Create a new React application with TypeScript:

bash
npx create-react-app my-react-app --template typescript

This command sets up a new React project named my-react-app with TypeScript configured.

Launch the Application

bash
cd typescript-react-app
npm run build
npm start

This will automatically open up your default web browser to http://localhost:3000/ and display the following:

Default React App

Example: A Simple Component

Create a functional component Greeting.tsx that accepts props:

Greeting.tsx
1import React from 'react';
2

3interface GreetingProps {
4  name: string;
5}
6

7const Greeting: React.FC<GreetingProps> = ({ name }) => {
8  return <h1>Hello, {name}!</h1>;
9}
10

11export default Greeting;

In this example, GreetingProps is an interface that specifies the expected structure of the props.

Update the App.tsx file to incorporate the new Greeting component.

App.tsx
1import React from 'react';
2import logo from './logo.svg';
3import './App.css';
4import Greeting from './Greeting';
5

6function App() {
7  return (
8    <div className="App">
9      <header className="App-header">
10        <img src={logo} className="App-logo" alt="logo" />
11        <Greeting name="React" />
12        <p>
13          Edit <code>src/App.tsx</code> and save to reload.
14        </p>
15        <a
16          className="App-link"
17          href="https://reactjs.org"
18          target="_blank"
19          rel="noopener noreferrer"
20        >
21          Learn React
22        </a>
23      </header>
24    </div>
25  );
26}
27

28export default App;

The browser would display the following updated page:

Hello React App

React and TypeScript References

TypeScript with Vue

Vue 3 embraces TypeScript, providing built-in types that make it easier to build and manage large-scale applications.

Setup and Installation

To start a new Vue project with TypeScript support:

bash
npm install -g @vue/cli
vue create typescript-vue-app

Launch the Vue Application

bash
cd typescript-vue-app
npm run serve

The vue application will be launched at http://localhost:8000/. The following would be visible on the browser.

Default Vue App

Example: A Simple Component

Create a GreetUser.vue component in the components directory:

GreetUser.vue
1<template>
2  <h2>Hello {{ name }}!</h2>
3</template>
4

5<script>
6export default {
7  name: 'GreetUser',
8  props: {
9    name: String
10  }
11}
12</script>
13

14<!-- Add "scoped" attribute to limit CSS to this component only -->
15<style scoped>
16h2 {
17  color: #42b983;
18}
19</style>

Update the App.vue file to incorporate the new GreetUser component.

App.vue
1<template>
2  <img alt="Vue logo" src="./assets/logo.png">
3  <GreetUser name="Vue.js"/>
4</template>
5

6<script>
7import GreetUser from './components/GreetUser.vue'
8

9export default {
10  name: 'App',
11  components: {
12    GreetUser
13  }
14}
15</script>

The browser would display the following updated page:

Hello Vue App

Vue and TypeScript References

TypeScript with Angular

Angular was built with TypeScript in mind, and it uses TypeScript as its primary language, making it a perfect fit.

Setup and Installation

Generate a new Angular project with TypeScript by default:

bash
npm install -g @angular/cli@17
ng new my-angular-app

Angular CLI sets up everything needed for TypeScript development.

Launch the Angular Application

bash
cd typescript-angular-app
npm start

The vue application will be launched at http://localhost:4200/. The following would be visible on the browser.

Default Angular App

Example: A Simple Component

Modify the app.component.ts file in your Angular project:

app.component.ts
1import { Component } from '@angular/core';
2

3Component({
4  selector: 'app-root',
5  standalone: true,
6  template: `<h1>Hello {{ title }}</h1>`,
7  styleUrls: ['./app.component.css']
8})
9export class AppComponent {
10  title = 'Angular with TypeScript';
11}

This is a basic Angular component using the Component decorator, where title is a class property used in the component's template.

Hello Angular App

Angular and TypeScript References

Conclusion

TypeScript brings powerful type-checking to JavaScript frameworks, making the code more predictable and less prone to runtime errors. Each of these frameworks—React, Vue, and Angular—has its unique way of integrating with TypeScript, enhancing their capabilities and making them more robust for enterprise-level applications. By following the examples and guidelines provided, developers can leverage TypeScript's features to build efficient, scalable, and maintainable web applications.

TypeScript

Feedback