Day 1 of TypeScript — As a Beginner

Things that I’ve learned on TypeScript…

Photo by Procreator UX Design Studio on Unsplash

Things that I’ve learned today on TypeScript:

1. What’s TypeScript?
2. Why do I need it?
3. Setting up TypeScript

What’s TypeScript?

1. TypeScript is “a Superset of JavaScript” or an extended version of JavaScript. Which means JavaScript + more features = TypeScript.
2. TypeScript must be compiled (or transformed) to JavaScript before the execution, for the browsers since browsers can’t understand TypeScript.
3. Since TypeScript is a superset of JavaScript, any JavaScript code is a valid TypeScript code.
4. “Statically-typed” TypeScript has to have variable type declaration like Java, C++, and C programming languages.
5. To learn TypeScript it is advisable for you to have a basic understanding of JavaScript and its OOPS concepts.
6. It’s mainly used for large-scale apps but in my opinion, we can also use TypeScript for smaller projects as well (even though it may be overkill for smaller projects) since it’ll be giving us an idea of how to use this and get ourselves familiar with this language.

Why Do We Need TypeScript?

1. TypeScript is a Type-Checker for JavaScript.
2. Since it’s a type-checker, it acts like a strict big brother who won’t allow the variables (you can assume it is a younger brother) to change their attitude (which is their type) in the future after it has been declared at the start.
3. It can give you extremely meaningful errors, enabling us to solve them with our full hope and enthusiasm.
4. TypeScript is immensely helpful for writing meaningful, neat, and clean code, which is crucial for a developer.
5. TypeScript can be beneficial for your career as it’s getting some popularity, even though it’s not like React-level of popularity, each year as you see from the chart below (TypeScript and React Data Combined. Red is React and Blue is TypeScript)👇

TypeScript and React Popularity Graph Data (for the past 5 years)

Setting Up TypeScript

1. Open your command prompt on Windows. Mac users open your terminal.
2. Now install TypeScript (globally, so that you don’t have to install it repeatedly in your local folder) using this command — “npm i -g typescript”.
3. Now go and create a folder for storing the TypeScript files.
4. Open that folder in vscode and create a new typescript file using the extension “.ts”.
5. Now you can do something like this:

const user = {
name: "Sriniketh",
age: 20,
}

console.log("TypeScript running...")
console.log(user.name)

6. After typing this, you need to compile this TypeScript code into JavaScript code.

7. You can do this by typing this in the terminal of the vscode — “tsc filename.ts”.

8. After this, you can see that you’ll have two files instead of one.

9. That’s because you’ve compiled your TS file into a JS file.

10. Now you can see that the TS code has been translated into a JS code in the “script.js” file.

11. And one more thing you can notice is that after you’ve completed these steps if you look into your TS file you’ll see some errors which tell you to have types for those data of the object that you’ve created.

12. We’ll come back to this tomorrow!

Thanks for holding your eyeballs this far! It means a lot to me.

And a bonus information for the readers who have reading even now.

If you’re into reading books or want to read books and grow yourself into a better person then consider reading my articles about books and other self help stuffs which I’ve covered on SriniWhoCodes

Have a great day…🤩👋