get started with typescript

typescript is javascript on steroids.

i have been hearing about typescript, a lot, LOT, recently. so, as obvious as it sounds after some time w/ JavaScript, moving onto typescript came as a natural reaction to me.

with that being said, i got started with typescript in recent days. i have been loving it 😻. although i have not done much with it yet, except solving a few leetcode problems. but, the love is well -- real.

Disclaimer : this blog is intermediate. let us go through the contents of this blog :

what is typescript?
getting started w/ typescript, the installation
common errors and troubleshooting while getting started
what and why is tsc?
what is tsconfig?

Getting Started (installation and other errors and troubleshoot) (on windows)

run npm i typescript --g the --g flag saves the dependency globally. After installation, you can confirm the version by tsc --v

i faced an issue , even after installing typescript it won't work. i had to spend some time trying to set it up. i have documented those, down below.

typescript not working properly // tsc command not found (Error, troubleshoot)

1. make sure you are using the latest node v16.7.0.(as of now 20.08.2021) You can download it from NodeJS official. Or use Node Version Manager (nvm) to upgrade to the latest node v.

installing nvm and upgrading to node v16.7.0

open nvm window repo , here
scroll down to the assets section to find nvm-setup.zip. Download, extract and install it.
to upgrade node to the latest version run nvm use 16.7.0
check the node version by node -v
after upgrading node to v16.7.0, install typescript again npm i -g typescript

execution policy error, powershell

check out Microsoft docs for learning more about execution policy and how and why they are set
Stackoverflow
exec policies are by default set to unrestricted, for security reasons, which does not allow scripts to run on the machine. As, a result, in my PS, tsc won't run because of unrestricted operation. What worked for me was an error log in the PS itself.

steps

open windows PS as admin
run Set-ExecutionPolicy -scope currentuser
then you will be prompted to set a policy : set unresctricted , [it is by default set to restricted which does not let scripts to run]
save the changes, by pressing y and you are good to go

miscellaneous , for exec policy errors

run Get-ExceutionPolicy --List to list all the user scopes
run Get-ExceutionPolicy to see the effective exec policy set

what and why tsc?

tsc command activates the typescript compiler

the browser doesn't/can't read typescript codes. so there has to be some kind of conversion from the typescript to regular javascript for the browser to read and exec the scripts.

tsc is short for typescript compiler which transpiles the .ts files to their corresponding .js files so the browser can read and execute w/ ease as with normal javascript

typescript work principle (generic)

write your typescript codes in a .ts file
transpile the typescript codes into js , by running the typescript compiler
after running tsc, a corresponding js file is created by the compiler.
run the js file using node <filename>.js

automate the compilation and runtime 🚀

it can be done w/ two steps

automate typescript compiler to track all changes in the ts file and transpile the ts codes to js codes.
automate runtime using nodemon(you need node env for this).

automate typescript compiler 👾

as you may now have guessed, for transpiling the ts codes to js we need to run the tsc cmd everytime we make changes in the ts file. repetitive tasks are mundane. what can be done to track the changes automatically?

running tsc --watch in the path of the project directory

what the above cmd does is - it watches for every changes made to the tsc file. tsc-watch was created to allow an easy dev process with typescript.

automate runtime with nodemon 👽

nodemon is a package that constantly watches the node env for changes. which prevents the repetitive execution of node <filename>.js to track and reflect changes.

run npm init -y to initialize an npm
install nodemon using npm i nodemon. nodemon should be included in the package.json in your project dir after installation.
go to your package.json and edit the script , in the scripts object

Screenshot (315)

what this line of code means "start" : "nodemon helloWorld.js" is everytime you run npm start or npm run start nodemon will run and execute the js file specified.
make sure to add the js file that is transpiled from the ts file. in other words, when you run tsc the typescript codes are compiled to javascript codes. you need to specify the javascript code file in the start script when you are specifying the filename after nodemon.
now, you do not have to run node <filename>.js every time you make changes to any of the files.

tsconfig.json? 🤯

the tsconfig.json is a file that defines the tsc compile behavior. it can be edited/customized as per requirements.

excited to write your first typescript codes? you can start,by cloning my github repo, here.

below are some great resources to start with 😎

Learn Typescript Now!! 👌