Getting Started with TypeScript: A Quick Introduction From JavaScript to TypeScript!

As I dive into mastering TypeScript this month, I'll be sharing my journey here, keeping it concise and easy to follow. So, let's kick things off with the very basics. I'm assuming you have a basic grasp of JavaScript.

Here's a short JavaScript snippet to start with:

const axios = require('axios');

const url = 'https://jsonplaceholder.typicode.com/todos/1'

axios.get(url).then(response => {
    const todo = response.data
    const ID = todo.id
    const title = todo.title
    const completed = todo.completed
    console.log(`
        The todo with ID: ${ID}
        has a title of: ${title}
        is it finished?: ${completed}
    `);
})  

Simple, right? This code just sends an HTTP request using axios and fetches a single todo object from the jsonplaceholder API.

Now, let's rewrite this in basic TypeScript. First, we can use ES6 module syntax to import axios:

import axios from 'axios'

Next, we'll define a type for the url variable:

const url:string = 'https://jsonplaceholder.typicode.com/todos/1'

Now, onto the main part of our code:

axios.get(url).then(response => {
    const todo = response.data as Todo
    const ID = todo.id
    const title = todo.title
    const completed = todo.completed
    console.log(`
        The todo with ID: ${ID}
        has a title of: ${title}
        is it finished?: ${completed}
    `);
})  

Notice in the above snippet, we've assigned the response data to the todo variable but as Todo. You might be wondering, what's Todo? Well, here's where interfaces come into play. We'll explicitly define a Todo interface:

interface Todo {
    id: number;
    title: string;
    completed: Boolean
}

And that's it! Here's how it all looks finally in TypeScript.

import axios from 'axios';
const url:string = 'https://jsonplaceholder.typicode.com/todos/1'

interface Todo {
    id: number;
    title: string;
    completed: Boolean
}

axios.get(url).then(response => {
    const todo = response.data as Todo
    const ID = todo.id
    const title = todo.title
    const completed = todo.completed
    console.log(`
        The todo with ID: ${ID}
        has a title of: ${title}
        is it finished?: ${completed}
    `);
})

Before we wrap up, let's quickly highlight the core differences we introduced in the TypeScript version of our code.

Type Annotations: We added type annotations to variables, enhancing code clarity and catching potential errors early.

Interface Definition: Introducing the Todo interface allowed us to specify the structure of our data, promoting better code organization and type safety.

In this post, I started with a simple JavaScript snippet fetching data from an API using axios. Then, we gradually migrated it to TypeScript, introducing some of the basic syntax of TypeScript.

Don't worry if you don't understand some of the terminologies or concepts used here; this is just a short introduction post. In the next post, we'll dive into basic concepts and terminologies to ensure everyone's on the same page. Stay tuned for more TypeScript adventures!