DEV Community: Carlos Giner

Let's learn typescript: 002 - Everyday types

Carlos Giner — Thu, 04 Jan 2024 22:40:12 +0000

Basic type definition

These basic types match the ones that we get using the typeof operator in plain javascript, so no big deal here.

const myNumber: number = 5;
const myString: string = 'hello';
const myBoolean: boolean = true;

Functions

Typescript will always check for the number of parameters to be passed to match. But annotations are optional, since if we aren't in strict mode, it will infer any types for the parameters. This is not always a good thing.

//this will work

function greet(name) {
  console.log("Hello, " + name.toUpperCase() + "!!");
}

//this will work too

function greet(name: string) {
  console.log("Hello, " + name.toUpperCase() + "!!");
}

Also, the return type will be inferred, in this case void. But we could define it as well after the parenthesis:

function greet(name: string):void {
  console.log("Hello, " + name.toUpperCase() + "!!");
}

As a rule of thumb, one must avoid explicitly defining types whenever typescript has inferred them right. But these depend a lot on the project and the team's decision. Some folks prefer a more strict approach, and this is useful not only to avoid errors but also for “self-documentation” of the code.

Object types

To define an object simply define each property annotations inside curly braces.

function printCoordinates (obj: {x:number, y:number}) {
 //...
}

Working with functions is very likely that some of the arguments are undefined or could be optional. So keep in mind this, and put a “?” symbol.

function addToShoppingCart(obj: {code: number; name: string; description?: string }) {
  //do something
}

💡 **Notice that you can put at the end of the property comma ( , ) or semi-colon ( ; ). They are both valid syntax.**

But take into account that typescript does not prevent the behavior that could happen at runtime, so you have to handle the possibility of the parameter coming undefined.

function addToShoppingCart(obj: {code: number; name: string; description?: string }) {
  console.log(obj.description);
}

addToShoppingCart({ code: 123, name: 'stuff' });
//this will print to the console *undefined*

This example may be a harmful console log, but in a real-world scenario maybe this parameter is passed to another function or gets called one of the string methods, and then it would crash the application. For example:

function addToShoppingCart(obj: {
  code: number;
  name: string;
  description?: string;
}) {
    console.log(obj.description.toUpperCase());
}

addToShoppingCart({ code: 123, name: 'stuff' });
//this will throw an Error: *Cannot read properties of undefined (reading 'toUpperCase')*

So long story short, be careful with the optional properties and handle your undefines, that no one is gonna do it for you…

Union types

This is a helpful feature that lets you combine types to form new types. You’ll find this handy when a function parameter could have more than one type.

function findUser(userId: string | number,  name: string) {
    //...
}

Now the logical question will be, if userId could be both types, how would typescript know what methods to suggest? For example

function findUser(userId: string | number,  name: string) {
    userId.toLowerCase(); 
}

//This will give an Error: *Property 'toLowerCase' does not exist on type 'number'.*

Well, unfortunately, there is no fancy solution, we have to handle this with our own hands, coding some conditions and leveraging the typeof operator. This is called by the typescript documentation as narrowing.

function findUser(userId: string | number,  name: string) {
    if (typeof userId === 'string'){
        userId.toLowerCase(); 
    } else {
        //...
  }
}

So that's it for the common, not-so-crazy things that you will see in a typescript code. See you in the next article.

Let's learn typescript: 001 - The basics

Carlos Giner — Wed, 03 Jan 2024 21:43:39 +0000

Why bother?

Typescript provides static type checking. What this means is that it's capable of predicting the errors based on the data type before running the code.

Even if the code appears to be valid javascript, typescript would decide to throw some error if it makes no sense or has a lack of constraints. For example, the famous value assignment to a property that doesn’t exist on a given object.

const item = { 
    id: 123,
    name: 'toaster'
}

item.price = 15;

Error: Property 'price' does not exist on type '{ id: number; name: string; }'.

Also, typescript is useful to catch other unhandled bugs by javascript, like typos, uncalled functions, or even basic logic errors, like unreachable code. See the example below.

const value:string = Math.random() < 0.5 ? "yes" : "no";
if (value !== "yes") {
  // ...
} else if (value === "no") {
  // Oops, unreachable
}

Error: This comparison appears to be unintentional because the types '"yes"' and '"no"' have no overlap.

Typescript also will enable some very useful tooling, like code completion on the IDE.

The compiler

Typescript comes with a compiler to transform the useful, understandable, human-coherent type-safe code, into...well, plain javascript. To do this first install the compiler.

npm install -g typescript

And just type tsc filename.ts.The compiler by default will transform it to ES3 (extremely old javascript), but we could change this by passing the flag: — target es2015. You should see a new file with the same name but with a .js extension in your working directory. This is the output of the compiler.

In the next chapters, we will go through the core concepts and other “fun” kinds of stuff.

Html Elements and Structure!

Carlos Giner — Fri, 23 Jul 2021 21:51:56 +0000

Basically, any html file consists of elements, that marks or tell the browser what to render.

The majority of these elements have an opening tag, the content itself, and a closing tag. Although there are a few exceptions that we see in a moment.

Most of the time, we’ll be using some tag
attribute. That can have several utilities.

The next important tag, is the heading element,
that have six levels.

Please don't get confused thinking that we use the levels to style our headings. The purpose of the levels, is to tell the browser the hierarchy of importance in our titles, that's it.

The  tag will include a section of text. And it stands for:
Yes, you guess it... a paragraph! Let’s make one with some "lorem" inside.

Oh, right...On web development, and graphic design, we use this gibberish text, as a demonstration, to fill spaces where it suppose to have content, without actually have to type real content.

So far, all is working, but there are some important tags that we are missing, and they give the structure in html. Let me introduce to you, the

tag. All that's inside this element will be rendered. Is like telling the browser, hey this is the content of our page.

Now let's talk about formatting in html. There´s a convention that when we nest elements inside others, we must use indentation. In that manner, we talk about child elements, like <h1>, , etc, that are also siblings; and parent elements, like the <body>tag.

And if we keep nesting elements deeper in the family tree structure, now we're talking about grandparents, grandchildren, more siblings, and yes, it can become the Addams family 😅. So it's better not to take this to far.

To end this part, let's introduce two more useful tags, the  and the  elements. This are what we call inline elements, and normallly you will find theme inside a  tag.

Just remember that 99% of the times, our style is given through a CSS document, but is nice to know that this tag exists. And sometimes it's just faster to format directly in html.

Don't miss part two! ✌

If you have questions or you find it useful, please let me know in the comments!

Find me on:

🔗 Instagram | 🔗 Twitter | 🔗Github | 🔗linkedIn

JavaScript Variables!

Carlos Giner — Tue, 20 Jul 2021 21:44:48 +0000

Let's review how to declare them the right way🤔

There are a few general rules for naming variables:⁣⁣

⁣▪️Variable names cannot start with numbers.⁣⁣

⁣⁣▪️Variable names are case sensitive, so myName and myname would be different variables. It is bad practice to create two variables that have the same name using different cases.⁣⁣

⁣⁣▪️Variable names cannot be the same as keywords. For a comprehensive list of keywords check out MDN’s keyword documentation.⁣⁣

⁣⁣I leave you this infographics slides, with code snippets 👇

There you go! If you have questions or you find it useful, please let me know in the comments!

Find me on:

🔗 Instagram | 🔗 Twitter | 🔗Github | 🔗linkedIn