DEV Community: Asim Shrestha

How to Set Up a New TypeScript Project

Asim Shrestha — Fri, 05 Jul 2024 14:36:49 +0000

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. .ts is the extension of TypeScript file.

1. Setup

Before installing TypeScript on your system, first you need to install Node.js. You can check the official documentation for installating it.
Type the following command to check to ensure Node.js is install. The command gives out the Node.js version.

> node --version

Example:

Create a new directory and go inside it.

> mkdir code && cd code

Initialize package.json file. Its a file which contains all the packages or dependencies install for the application.

> npm init -y

Install TypeScript

> npm install typescript --save-dev

--save-dev flag indicate we are installing TypeScript for development purpose and we don't need this package for production.
Initialize TypeScript config file.

> npx tsc --init

2. Set Up Project

Create new files and folders inside the code folder.

> touch index.html
> mkdir src dest
> touch src/main.ts

Folders and files tree

NOTE: Browser can only understand JavaScript, so you need to compile the TypeScript into Javascript.
Specify where to output the compile JavaScript. Customize the tsconfig.json file to output inside the .dest folder.

// tsconfig.json
...
"outDir": "./dest", /* Specify an output folder for all emitted files. */
...

The ... three dots indicates their is more code.
Create a script that will watch your TypeScript file changes and automatically compile it into JavaScript. We will create a new script start inside the package.json file.

// package.json
{
  "name": "code",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "typescript": "^5.5.3"
  }
}

We will add some code inside our TypeScript file src/main.ts

const username: string = "Jane Doe";
console.log(`Hello, ${username}!`)

Now, we will run the start script to watch the TypeScript file changes.

> npm run start

The start script command will automatically create a new file called main.js inside the dest folder which is our compiled JavaScript file.
Inside our index.html we will link our compiled JavaScript file and open it on the browser. Then, check the console to verify the message is logged.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TypeScript Project Set Up</title>
</head>
<body>
<h1>Press <code>F12</code> and check your browser console. There you will see the message which we have written.</h1> 

<script src="./dest/main.js"></script>
</body>
</html>

Now, you can add your code and create your project!

Vue 3 beginners roadmap resources. FREE

Asim Shrestha — Fri, 18 Mar 2022 14:14:07 +0000

1. The best way to learn Vue.js in 2022 - CRASH COURSE

Vue Master

2. Vue 3 Tutorial for Beginners

Net Ninja

3. Learn Vue 3: Step by Step

Laracasts

4. Vue 3 Official Tutorial

Official Tutorial

5. Weather App Build (Vue 3 & Tailwind)

Net Ninja

6. Vue 3 Official Projects

Official Projects

Vue3 + Vite + Boostrap 5 + Sass Setup

Asim Shrestha — Fri, 18 Mar 2022 07:42:15 +0000

1: Installing Vue3 using Vite



> npm init vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool.
You will be presented with prompts for a number of optional features such as TypeScript and testing support:

Browser url: http://localhost:3000/

2: File cleanup & Display simple Hello World!



> rm -r src/assets/

> rm -r src/components/



<!-- src/App.vue -->

<template>

  <h1>Hello World!</h1>

</template>

3: Install Boostrap 5 & Setup



> npm install bootstrap



// src/main.js

import { createApp } from "vue";

import App from "./App.vue";

import "bootstrap/dist/css/bootstrap.css";

createApp(App).mount("#app");

import "bootstrap/dist/js/bootstrap.js";

4: Sass Setup

Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed: ```sh

npm install -D sass





&lt;!-- src/App.vue --&gt;
&lt;template&gt;
  &lt;h1&gt;Hello World!&lt;/h1&gt;
&lt;/template&gt;

&lt;style lang="scss"&gt;
h1 {
  color: green;

  &amp;:hover {
    color: greenyellow;
  }
}
&lt;/style&gt;


</code></pre></div><h3>
  <a name="done" href="#done">
  </a>
  Done!!!
</h3>

Things not to forgot while learning coding as a beginner.

Asim Shrestha — Sat, 20 Nov 2021 13:42:52 +0000

Taking your first tutorial: Complete the tutorial. Understand everything, shallow understanding is fine while starting. Write code by yourself even it feels tedious. Do not copy & paste. You do not need to understand exactly how the functions work internally, but you do need to be able to import and use them correctly. Don't rush to complete the tutorial. If you feel like skipping any topics from the tutorial, take a break and come back later.
It's ok if you don't understand: When learning new things, most of the time you might don't understand the stuff, it's ok. You can look that topics from other sources. To become successful you have to cross the difficulties. Just don't runway from it.
Code every day: To become good at coding you have to code every single day. Even if for just 20 minutes a day. You just have to be consistent.
Add at least 2 new features to the project after completing the tutorial: If you have understood the tutorial it will not be a problem. If you don't have any ideas for the features, you can recreate the same project from scratch. Following the tutorial, you are not using your brain. So, you have to use your brain by creating projects by yourself.
Tutorial Hell When you keep on watching tutorials and not building projects by yourself. So, once you feel like you are in a tutorial hell, then stop watching tutorials and start building projects.
Build a new project & complete it: Starting a new project is easily but completing is difficult. So, the first thing you have to think of is a project which you are interested in creating. If you are not interested in the project which you are building then you will skip or not complete the project if any difficultly occur during building it.
Maintaining the project: If we say building and completing a project is level 1, then maintaining the project is level 2. To become a good developer you should start maintaining your project.
Creating big project: When you are done creating 3 or 4 simple projects you can start creating complex projects. For example simple project 1: simple todo app, simple project 2: simple digital clock, etc. Complex project: Todo app with crud functionality, in next iteration adding reminder functionality, and so on. Add new features to your project one step at a time. If you keep on adding new features to a simple project, then it will start to grow into a big project.
Habit of Figuring out your problems: Instead of running away from your challenges, face them. You should ask questions to yourself. How can I solve this problem?
Get good at GIT: Git is a tool to track or capture the history of your project and help to collaborate with other developers remotely.
Read other people's code: Read other people's code whose coding level is the same as yours or a little above your level.
Data Structure and Algorithms: Have at least a basic understanding of different commonly used algorithms.

Learning new tech as a beginner.

Asim Shrestha — Fri, 09 Jul 2021 14:47:40 +0000

1. Code everyday.

To become good a coding you have to code every single day. Even if for just 20 minutes a day. You just have to be consistent.

2. Take your first tutorial.

Complete the tutorial. Understand everything, shallow understanding is fine while starting.
You do not need to understand exactly how the functions work, but you do need to be able to import and use them correctly.
Don't rush to complete the tutorial. If you feel like skipping any topics from tutorial, take a break and come back later.

3. Add at least 2 new features to the project after completing the tutorial.

Following tutorial, we are not using our brain. So, we have to use our brain and think ourselves trying to add simple features at least. If you have understood the tutorial it will not a big deal.

4. Build a new projects & complete it.

Ideas don't come out fully formed. They only become clear as you work on them. YOU JUST HAVE TO GET STARTED.
Build a complete new project with the knowledge which you have acquire from the tutorial.
If you like your new project which you are building then keep on updating(iterating) it.
Instead of making multiple simple projects, build a big project.
If you keep on adding new features to a simple project, then it will start to grow to a big project.

5. Habit of Figuring out anything.

Face your challenges.
How can I add this features to my project?
- Reading documentation.
- Learning from an article.
- Watching videos.
- Asking for help in stack overflow or any other platform.

What to do when tackling a new project.

Asim Shrestha — Sun, 18 Oct 2020 03:00:36 +0000

Step 1

Whenever you're tackling a new project, it can be tempting to dive right into writing code. But more often than not, It's best to take a step and consider the bigger picture. I recommend first drawing up a high-level plan for what your program needs to do. Don't think about the actual code yet - you can worry about that later. Right now, stick to broad strokes.

For example, your phone and email address extractor project will need to do the following:

Get the text off the clipboard.
Find all phone numbers and email addresses in the text.
Paste them onto the clipboard.

Step 2

Now you can start thinking about how think might work in code. the code will need to do the following:

Use the pyperclip module to copy and paste strings.
Create two regexes, one for matching phone numbers and the other for matching email addresses.
Neatly format the matched strings into a single string to paste.
Display some kind of message if no matches were found in the text.

Guess the number

Asim Shrestha — Mon, 12 Oct 2020 15:54:58 +0000

from random import randint

secret_number = randint(0, 10)  # guess number between 0 to 10 (including)
guess_count = 0

try:
    while True:
        user_number = int(input('Guess the number: '))
        guess_count += 1

        if user_number == secret_number:
            print('Correct')
            print('Your guess count:', guess_count)
            break
        elif user_number > secret_number:
            print('Your number is greater than the secret number.')
            continue
        elif user_number < secret_number:
            print('Your number is less than the secret number.')
            continue
        else:
            print('Invalid')
except ValueError:
    print('Please enter integer only.')