DEV Community

loading...

Intro to Typescript-1

tanzimibthesam profile image Tanzim Ibthesam ・3 min read

Typescript is a programming language which is considered as a superset of Javascript
It was build by Microsoft in 2012
Its main objective is to declare types in Javascript
Javascript is a loosely typed language.
As per definition of Microsoft
TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.
How to install typescript
npm install -g typescript

At first we will take a index.html file and link it to a script.js file

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Then we will take a script.js file and also a script.ts file. The script.ts file will end up being compiled to script.js. Typescript ends up being compiled to vanilla JavaScript as that is the only thing a browser actually understands.
1.Type Basics
At first in in script.tsc file we will write
Alt Text
So here again if we see in script.js
Alt Text
We see console.log Hello world In CLI we have to write tsc script.ts but we need to do it every time a better way of this is
writing tsc -w as a result it always keeps watching for changes and we dont have to type it over and over again.
In script.ts if we write
Alt Text
We first assigned a variable which is of type string now when we changed it to number we can see the error in real time that is number is not assignable to type string

2.Objects and Arrays
If we declare an array in which all values are only string if we push a number it will give us an error

Alt Text
Alt Text
Here we see that though the array type consists of number Here when we try to push a string it gives us error saying string is not assignable to ant parameter of type number
Objects
Alt Text
We can see a read mark on names if we hover over names we can see
Alt Text
It is detecting the type of properties inside the object
If we want to reassign values in an object we can but we have to ensure no object is missing
Alt Text
Alt Text
While we hover on names we can see profession is missing in type object
3.Explicit Types
Alt Text
Here we explicitly define the type for myname which is string.If we try to reassign the value to number it gives us error.
Alt Text
Now if we want to include variable of any data type in arrays
We will write
Alt Text

So I will try to cover functions and other concepts in part-2. Hopefully it will help someone in getting started with typescript.

`

Discussion (2)

pic
Editor guide
Collapse
afif profile image
Temani Afif

I would be good to insert the code into the post rather than using images. It will be easier for us to copy/past and test

Collapse
tanzimibthesam profile image
Tanzim Ibthesam Author • Edited

Thanks actually problem is in my Vue blog I inserted the code but here if you don't see the errors you don't understand and I can't copy exact thing that would look like VS Code here that's why the image screenshot. Thanks a ton for your feedback.