Getting Started with TypeScript: A Quick Introduction From JavaScript to TypeScript!
Tags: typescript, javascript, learning, tutorial
Published: 2024-05-02 17:29:08

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:


```javascript
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](https://jsonplaceholder.typicode.com/) API.

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

```typescript
import axios from 'axios'
```

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

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

Now, onto the main part of our code:

```typescript
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:

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

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

```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!