DEV Community: Evaldas

To new developers

Evaldas — Thu, 17 Sep 2020 16:24:42 +0000

The programming world is huge. In fact it is so huge and wide that it is impossible to learn everything. And the good thing is that you don't need to learn everything. Being a developer means being good at googling things. And that's it. There are plenty of web developers with 10+ years of experience and they still are googling things how to capitalize the first letter of a string.

Main things you should keep in mind

Noone knows everything
Being a developer means being good at googling things
If you don't know something, don't be afraid to ask
If you copy code that works and you don't understand why, don't beat yourself about it. Move on and you will understand why it works later. And hey, if it works it works!
Don't try to memorize something!!! Google whenever you need something!

Typescript for beginners: adding typescript to your projects with parceljs

Evaldas — Wed, 16 Sep 2020 08:11:55 +0000

There are many ways to add typescript to your project. Some require a huge amount of configuration and some are as easy as adding several code lines. I think one of the easiest ways to do so is to use a bundling tool like parceljs. With it, you can add typescript in a matter of minutes with pretty much no config required.

## What the heck is parceljs?

Parceljs is a super-fast web application bundler that works straight out of the box. I'm sure everyone has heard about webpack and while it is more powerful, it is a lot harder to set it up correctly.

Ready? Let's add typescript to our project

!!! Before we do anything, make sure that you have nodejs and npm installed !!!

To check whether we have those technologies installed use command in your terminal:

node --version
 // v12.18.4
npm --version
// 6.14.6

If you don't have them installed, please go to :

https://nodejs.org/en/ to install nodejs
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm guide to install npm

In the terminal create a new folder and move to it

mkdir my-awesome-ts-project && cd my-awesome-ts-project

The next step is to add package.json

npm init -y

// we will get
{
  "name": "my-awesome-ts-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

We are almost done, the next step would be to add parceljs and typescript with npm install --save-dev typescript parcel-bundler

And that's it! Now you can create your .html and .ts files. Add script tag and voulia, typescript is ready!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
<script src="app.ts"></script>
  </body>
</html>

One more thing, you will need to add one more line in package.json to start your local development with parceljs.

Add this line to scripts{} section "start": "parcel index.html"

Your final package.json will look like this:

{
  "name": "my-awesome-ts-project"",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "typescript": "^4.0.2"
  }
}

And that's it, now just run the command npm run start and it will start the local development server.

app.ts file will be compiled into javascript automatically, so you can write typescript like there's no tomorrow.

Typescript for beginners: array

Evaldas — Tue, 15 Sep 2020 07:51:11 +0000

In typecript we have two ways to work with arrays.

First way:

Define our variable let cities
Write our type to check : string[]
Give value to our variable = ["London", "New York", "Dubai"]

: string[] this means that we want to check if our array contains string type values. If the array contains only numbers we write it as : number[] and so on. If our array contains mixed types we will use any[]

let cities : string[] = ["London", "New York", "Dubai"];
let years : number[] = [1, 2, 3];

Second way:

Define our variable let cities
Write our type to check : Array<string>
Give value to our variable = ["London", "New York", "Dubai"]

let cities : Array<string> = ["London", "New York", "Dubai"];
let years : Array<number> = [1, 2, 3];

There is no difference between one way or another apart from syntax. Some might say that using the second way is a bit more clear, but that's one man's opinion.

Typescript for beginners: boolean

Evaldas — Mon, 14 Sep 2020 07:51:05 +0000

Boolean is the data type that has two possible values. It is either true or false.

To do type checking on the variable we can write a statement as follows

const isTrue : boolean = true;

Step-by-step:

Define variable const isTrue
Add typescript type check : boolean
Define value true

To check whether function is returning boolean we can do it as fallows:

function isOlder(age : number) : boolean {
  return age >= 18 ? true : false;
}

isOlder(18) // true
isOlder(16) // false
isOlder(true) // error 'Argument of type boolean is not assignable to parameter of type number'

Step-by-step:

Define function function isOlder(argument : typecheck) : type to return {...}

Typescript for beginners: number

Evaldas — Sun, 13 Sep 2020 05:03:27 +0000

One time I've been working with Rest API and there was this one property, that was supposed to be a number. Instead, it wasn't, it was a string and it broke my function. At the time I wasn't using typescript and it took some time to find a problem. With typescript, it would have been so much quicker!

Typescript basic type number:

function addTax(num: number) : number {
    const tax : number = num * .21;

    return num + tax
}
addTax(100) // 121
addTax("100") // 10021 // error "Argument of type 'string' is not assignable to parameter of type 'number"

Typescript for beginners: string

Evaldas — Sat, 12 Sep 2020 09:37:43 +0000

As programmers we are using strings to work with textual data all the time.

In typescript we have a word string to check if the type is string.

In the function below we are checking whether the argument supplied is a string and we are making sure that we return a string.

function getName(name: string) : string { 
return `Hi, my name is ${name}` 
} 

getName("Paul") // Hi, my name is Paul
getName() // error "Expected 1 arguments, but got 0."
getName(true) // error "Argument of type 'boolean' is not assignable to parameter of type string"

To break it down into smaller bits, this functions reads as follows:
function getName(argument : type to check) : type we want to return {.....}

We can also type check variables:

let postCode : string = "LT-3422"; 
postCode = 4232// error "Type 'number' is not assignable to type 'string'".

JavaScript snippet: get trailing information after ("/", "-", "etc")

Evaldas — Fri, 11 Sep 2020 18:24:10 +0000

Recently I've been working on a job board website. It has URL structure as follows: "job/shopify-rails-junior-dev-4d5as18184das". Everything after last dash(-) is id in the database about this specific job ad. To extract it I wrote a short and simple function that allows you to get everything after the last slash, dash, etc.

Javascript:

const test1 = "/shopify/php-programmer-4781"
const test2 = "/shopify/rails/1351"

function getTrailingId(punctuation, str)  {
    const trailingId = str.substr(str.lastIndexOf(punctuation) + 1)
    return trailingId
}

getTrailingId("-", test1) // 4781
getTrailingId("/", test2) // 1351

Typescript:

const test1 : string = "/shopify/php-programmer-4781"
const test2 : string = "/shopify/rails/1351"

function getTrailingId(punctuation: string, str: string) : string {
   const trailingId : string = str.substr(str.lastIndexOf(punctuation) + 1)
   return trailingId
}

getTrailingId("-", test1) // 4781
getTrailingId("/", test2) // 1351

Typescript for beginners: how to ignore code

Evaldas — Fri, 11 Sep 2020 10:15:01 +0000

Typescript is one of the best things that have happened in JavaScript world. It is a solid tool that checks for errors before they have happened. But sometimes we want to turn it off for some code.

There are several ways to ignore code in typescript:

Ignore code line with `@ts-ignore` rule:

this will ignore the code that is one line below

// @ts-ignore
const myAge : number = "25" // no typescript error
const isTrue : boolean = 4; // error

Usually this would throw an error about variable myAge not being type of number, but with @ts-ignore this error will be ignored.

Ignore code block with `@ts-nocheck`:

// @ts-nocheck
const myAge : number = "25" // no error
const isTrue : boolean = 4; // no error

🚨🚨@ts-nocheck will ignore the file, so if you want to ignore typescript checking on one function put it in separate file🚨🚨

This typescript rule should be used at the top of the file and it will ignore all code in the file.

**Typescript is meant to be helpful and allows us to write more robust, better structured code. Also it helps us to catch errors early, so use @ts-ignore and @ts-nocheck rules with caution.