DEV Community: Diego Maximiliano

React + TypeScript ❤️: The good parts ⚡

Diego Maximiliano — Tue, 08 Sep 2020 15:56:46 +0000

I've started using TypeScript with React, and after a while, learning, and implementing them together. This is how I feel:

Tejas Kumar

@tejaskumar_

@ndm_haskell I use React + TypeScript daily and have never looked back. It is so enjoyable.

10:25 AM - 08 Sep 2018

I couldn't believe how much my DX has improved. I'll leave you the main features I enjoy the most so hopefully you will feel excited to give it a shot 😃 !

Disclaimer ⚠️

This is not a beginner-friendly introduction to TypeScript, you need to know at least how to use Interfaces, however, at the end of the article I will drop a list of great resources I found very useful along with the fastest way to get React + TypeScript up and running and start hacking:

$ npx create-react-app my-app --template typescript
# or
$ yarn create react-app my-app --template typescript

TLDR;

Pros:

Code completion and type validation with type definitions.
Great community and learning resources.

Cons:

TypeScript syntax and concepts like Generics can be hard to understand.

IntelliSense
Type Declarations
Type Validation
Hooks
~~The Bad parts.~~ Trade-offs ⚖️
Resources
Conclusion

IntelliSense

I use VSCode and one of its best features is IntelliSense (A.K.A Code Completion), TypeScript takes advantage of it.
Let's say we have a simple List component, and we declare the Props Interface, in this case one prop labels, an Array of strings:

// List.tsx
import React from 'react';

interface Props {
  labels: string[]
}

// We tell TypeScript the parameter type 
// + Object destructuring 👇
function List({ labels }: Props): React.Element {
  return (
    <ul>
      { labels.map((label, index) => {
        <li key={index}>{label}</li>
      )}
    </ul>
  );
}

const strings = ['React', 'TypeScript', '❤️'];
<List labels={strings}/>

This is what we get:

If we type labels. inside List we get the code completion with methods and attributes from Array.prototype, in this case Array.prototype.forEach() and then inside the callback function we get all methods and attributes from String.prototype, in this example Array.prototype.toUpperCase().
VSCode is written in TypeScript, it has a built-in type definitions for Native Objects, and the best part? We can declare our own types, and most libraries we use come along with their own type definitions files already 😃 !
Which bring us to the next great feature:

Type Definitions

React and TypeScript community is awesome, they've created a huge centralized repository of High Quality Type definitions files:

DefinitelyTyped / DefinitelyTyped

The repository for high quality TypeScript type definitions.

Most libraries keep their type declarations files on this repo, and sometimes we have to install them independently, on the official website we can search and find instructions to install them, in the case of React, for example:

$ yarn add @types/react --save-dev

How can we use them?

import React from 'react';

interface Props {
  labels: string[]
}

function List({ labels }: Props): React.Element {
  const styles: React: React.CSSProperties = {
    backgroundColor: 'blue'
  }
  // ...
}

Let's say we want to write some inline CSS, in this case we can use the React built-in type definition React.CSSProperties, it'll show us an error if we write a typo like backgroundKolor and we'll get code completion for the properties 😁.
And we can also see the source code so we get used to read and write them.
We already learned how take advantage of type definitions to get Code Completion, but now we'll learn another powerful feature that comes with them:

Type Validation

What if we either don't pass the right prop type or we don't pass it at all?

interface Props {
  labels: string[]
}

function List({ labels }: Props) {
 // ...
}

const strings = ['React', 'TypeScript', '❤️'];
const numbers: number[] = [1, 2, 3];

// 1) We pass an array of numbers
<List labels={numbers} />
// 2) We don't pass it
<List />

In both cases we get an Error 🚫:

These errors are clear, they tell us what's the type error, where that declaration was made, if the prop is actually required, and this applies to functions also (although React Components are just functions 😉).
The TypeScript compiler won't be happy until we pass the right parameters, this is useful to see possible bugs ahead even before compiling the code and checking the browser.

What about prop-types?

Yes, we can achieve the same validation using prop-types:

import React from 'react';
import PropTypes from 'prop-types';

function List({ labels }) {
  // ...
}

List.propTypes = {
  labels: PropTypes.arrayOf(PropTypes.string).isRequired
}

However, since prop-types checks our code during runtime, we have to compile it first, see the actual error on the console, and also, this validation just happens on development mode 😟, whereas TypeScript analyses our code statically.

Hooks

When it comes to React Hooks, useState for example, TypeScript can be super handy, specially with type validations.

function Counter() {
  // we can also use brackets <> syntax for types declarations:
  const [counter, setCounter] = useState<number>(0);
  const add = () => {
    // this is gonna give us an error 😱
    setCounter('string');
  }
  return(
    <div>
      <button onClick={add}>+</button>
      {counter}
    </div>
  );
}

In this way we make sure every time we update the state we preserve the value type, this can save us hours of debugging and headaches.

The Bad parts. 🤐 Trade-offs

We learned how TypeScript can benefit the whole team when it comes to write components, just let's imagine we write our (ideally) reusable components library with well defined types and our colleague import one of them, they are gonna see beforehand:

Props types and if they are required or not.
Code completion for prop names.

This can save us time browsing source code to make sure we pass the right data to every component.
But we also know that in Software Development there is no Silver Bullet. Every tool we choose comes with a trade-off, in the case of TypeScript, of course there are some:

Reading TypeScript can be hard:

interface Array<T> {
  concat(...items: Array<T[] | T>): T[];
  reduce<U>(
    callback: (state: U, element: T, index: number, array: T[]) => U,
    firstState?: U
  ): U;
  // ···
}

But don't worry, I got this snippet from this great article which explains every detail, that example was really confusing for me at first.

Some concepts can be complicated to grasp:

Interfaces.
Generics.
Interfaces vs Types.

These new concepts (especially if members of our team aren't used to them) can bring more questions and confusion.
Of course we can tackle them, it just depends on our team members experience, available time, and feeling eager to learn new things.
This article reflects the idea I've been thinking about for a while and it's likely to be my next post topic, everything in Software Development is a trade-off:

You Might Not Need Redux. People often choose Redux before they… | by Dan Abramov | Medium

Dan Abramov ・ Sep 19, 2016 ・
Medium

Resources

These are the best resources that helped me to understand and love TypeScript:

Understanding TypeScript’s type notation
typescript-cheatsheets / react

Cheatsheets for experienced React developers getting started with TypeScript
TypeScript Tutorial for JS Programmers Who Know How to Build a Todo App
TypeScript Generics for People Who Gave Up on Understanding Generics

Conclusion

TypeScript comes with a lot of benefits and constrains, but our context (team, priorities, goals) can define if we can get more advantages than cons and make our lives easier!
IMHO when it comes to large scale applications, and specially if we are building a bullet-proof architecture or System Design, the effort pays off, we can write less bugs-prone code and deliver features faster, and safer.

Thanks for reading, if you found this article useful please follow me on Twitter and let me know what you think!

Happy coding!

Prototypes en JavaScript

Diego Maximiliano — Tue, 16 Jun 2020 22:02:58 +0000

Parte del problema a la hora de entender que son y como funcionan los prototypes en Js es no pensar en las preguntas correctas, en vez de preguntarse:

Que son los prototypes?
Como funcionan?

Un mejor enfoque sería preguntar:

Por que existen?
Que problema resuelven?

Si logramos responder esas preguntas podemos tener una base más solida y una comprensión más consolidada, esta técnica puede aplicarse a la hora de aprender otros conceptos.
Esta idea la aprendí de este video sobre Hooks en React de Tyler Mcginnis.

Empecemos con el problema ☠️:

Supongamos que escribimos una clase en PHP la cual tiene como fin darnos una abstracción a la base de datos, no estoy aplicando DataMapper o Active Record, como hacen la mayoría de los frameworks, es solo para tener una idea:

<?php

class DbAccess
{
  protected $tableName;

  function __construct($tableName)
  {
    $this->tableName = $tableName;
  }

  public function getAll()
  {
    // select all records from table
  }

  public function getRecord($id)
  {
    // select record by id
  }

  public function deleteRecord($id)
  {
    // delete record by id
  }

}

Tenemos una clase con 1 atributo $tableName y 3 métodos:
getAll()
getRecord()
deleteRecord()

Podemos visualizar la clase con la siguiente tabla:

Atributos	Métodos
`$tableName`	`getAll()`
	`getRecord()`
	`deleteRecord()`

Nada complicado por ahora ⏳😃.

Ahora la implementamos:

<?php

class EmployeeController 
{
    public function delete($id)
    {
      // nuevo objeto en memoria
      $dbManager = new DbAccess('Employee'); 
      // solo estoy invocando un método de 3 🤔
      $dbManager->deleteRecord($id);
      return redirect('home');
    }
}

1) Creamos el nuevo objecto/instancia (nuevo objecto en memoria).
2) El objeto tiene 1 atributo y 3 métodos (todos almacenados en memoria)
3) Sólo estoy usando un método ($dbManager->deleteRecord()) ⚠️ 🤔.

A medida que la aplicación crece seguramente vamos a necesitar agregar más métodos y atributos así tenemos más operaciones disponibles, vamos a suponer:

Crear un nuevo registro.
Modificar un registro existente.
Hacer una transacción.
Obtener el primer registro.
Obtener el último registro.

De repente esta es nuestra clase:

Atributos	Métodos
`$tableName`	`getAll()`
	`getRecord()`
	`deleteRecord()`
	`createRecord()`
	`transaction()`
	`getFirst()`
	`update()`
	`getLast()`

Volviendo al ejemplo anterior:

<?php

class EmployeeController 
{
    public function delete($id)
    {
      // nuevo objeto en memoria (incluyendo métodos y atributos)
      $dbManager = new DbAccess('Employee'); 
      // solo estoy invocando un método de 8 😨
      $dbManager->deleteRecord($id);
      return redirect('home');
    }
}

Agreguemos un caso un poco más complejo 🔥:

<?php

class EmployeeController 
{
    public function delete($id)
    {

      $employeeDbManager = new DbAccess('Employee'); 
      // Obtengo people_id en la tabla Employee
      $peopleId = $employeeDbManager->getRecord($id, 'people_id');

      // Ahora creo otra instancia más
      $personDbManager = new DbAccess('Person');
      // Borro los registros de ambas tablas
      $personDbManager->deleteRecord($peopleId)
      $employeeDbManager->deleteRecord($id);
      // Ahora tengo dos objetos, 16 métodos y solo uso 3 
      // 😱
      return redirect('home');
    }
}

Imaginemos ahora que usemos 5 intancias y usemos un método de cada una, de repente tenemos 5 objetos, 40 métodos, cargados en memoria y solo usamos 5, este es el problema ☠️. La clase sirve como blueprint y nos devuelve objetos (se guardan en memoria) de los cuales muchas veces solo necesitamos un atributo o método específico.
Y este problema tiene nombre: El gorila con la banana 🐒🍌. Sí, el nombre es gracioso, hace referencia al hecho de que cuando "solicitamos" una banana, lo que obtenemos en realidad es un gorila sosteniendo una 🍌. Este problema es propio de los lenguajes de programación Orientados a Objectos basados en Clases (PHP, Java, C++), una parte del problema se resuelve usando métodos staticos, pero aún existe otro problema, que los métodos estáticos no tienen acceso al contexto del objeto (no se puede usar la keyword $this en la implementación).

JavaScript por otro lado, resuelve ambos problemas usando un mecanismo llamado prototypes (prototipos).

Funciones constructoras en JavaScript

Toda variable en JavaScript es un objeto, contiene ciertos métodos que los "hereda" de la clase principal Object, pero a diferencia de otros lenguajes este sistema de herencia funciona de una mejor manera gracias a los prototypes, pero primero veamos como creamos nuestros propios objectos con JavaScript o simulamos clases (en ES6 existen las clases pero son una abstracción de la implementación interna basada en prototypes).
Generalmente las funciones constructoras tienen el nombre en mayúscula y se ejecutan usando el operador new():

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person = new Person('Rick', 50);
// esto nos devuelve un objeto plano tal como:
const rick = {
  name: 'Rick',
  age: 50
};

Que pasa si llamo a la función `Person` sin el operador `new`? 🤔

const person = Person('Diego', 29); // undefined

What? 🤯

Hay algo importante que tenemos que entender sobre el operador new, lo que hace es ejecutar la función con unos pasos adicionales, para retornar el objeto que necesitamos, el proceso es un poco más complejo, pero para hacerlo simple:

Crea un nuevo objeto plano.
Asigna el valor de this (contexto) a ese objeto.
Retorna el objeto al final.

Podemos visualizarlo de esta manera:

function Person(name, age) {
  const obj = {}; // Nuevo objeto
  this = obj; // Asigna el contexto
  this.name = name;
  this.age = age;

  return this; // {name: 'Diego, age: 29}
}

Entonces, si ejecutamos la función sin el operador new, JavaScript la ejecuta como una función normal, y al no retornar nada explicítamente, por defecto devuelve undefined.

`Function.prototype` y `Object.getPrototypeOf()`

Al fin 😅.

Todas las funciones en JavaScript excepto las Arrow Functions tienen una propiedad llamada prototype, y se usa para guardar en ella lós métodos y atributos que queremos que los objectos hereden:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 👇👇👇👇👇👇👇👇👇
Person.prototype.sayName = function() {
  console.log(this.name);
}

const person = new Person('Max', 25);
person.sayName(); // Max

// ✋🛑 ‼️
// el método sayName() no parece estar en el objeto:
console.log(person) // {name: 'Max', age: 25}
// 😱

#2 🤯 What?

Los objectos también tienen una propiedad especial `[[Prototype]]`:

La forma de acceder a la propiedad [[Prototype]] de un objeto es usando el método Object.getPrototypeOf()

// 👇👇👇👇👇👇👇👇👇👇
Object.getPrototypeOf(person) // Person {sayName: [λ]}

☝️ Dentro de la propiedad [[Prototype]] encontramos un objeto con el método sayName 😮

Nota: antes se podía acceder al prototipo de un objecto usando la propiedad especial .__proto__ pero ahora es obsoleta:

// .__proto__ es obsoleta ❌
console.log(person.__proto__) // Person {sayName: [λ]}

Esto es lo que en JavaScript se conoce como prototype chaining, el engine primero busca el método en el objeto, y si no lo encuentra busca dentro de la propiedad especial [[Prototype]] la cual guarda una referencia al método, que está en en el prototype de la función constructora, por eso también lo llaman delegación, entonces los objetos solo guardan referencias con su contexto seteado, volvamos al ejemplo para entender a que nos referimos con contexto (o el valor de this), el cual es muy importante:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayName = function() {
  // 👇👇👇👇👇👇👇👇👇👇
  console.log(this.name);
}

const person = new Person('Max', 25);
person.sayName(); // Max

Al llamar al método person.sayName() el engine setea el valor de this y le asigna el valor del objeto que lo está llamando, en este caso person que tiene una propiedad name.

Múltiples instancias 👩‍👧‍👦:


function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayName = function() {
  console.log(this.name);
}

const max = new Person('Max', 25).sayName(); // Max
console.log(max) // {name: 'Max', age: 25}

const rick = new Person('Rick', 55).sayName() // Rick
console.log(rick) // {name: 'Rick', age: 55}

const morty = new Person('Morty', 15).sayName() // Morty
console.log(morty) // {name: 'Morty', age: 15}

En este caso, los 3 objetos, max, ricky y morty sólo tienen 2 propiedades, y dentro de su propiedad especial [[Prototype]] contienen la referencia al método Person.prototype.sayName, así los objectos son más livianos.

Objetos como prototypes:

Con el método Object.setPrototypeOf() podemos definir la propiedad [[Prototype]] o el prototipo de un objeto:


const readOnlyPermissions = {
  read: true,
  write: false
}

const manager = {
  name: "Paul",
  age: 40,
}

Object.setPrototypeOf(manager, readOnlyPermissions);

console.log(manager.read); // true

Este caso es mucho más inusual de ver, pero básicamente podemos hacer que objetos hereden de otros objectos, por eso se considera a JavaScript "verdaderamente" Orientado a Objetos.

Clases en ES2015

ES2015 o más conocido como ES6 introdujo el concepto de clases en JavaScript, que es una abstracción o syntactic sugar para definir una función constructora junto con su prototype:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayName() {
    console.log(this.name);
  }
}

const person = new Person('Rick', 55);
console.log(person) // {name: 'Rick', age: 55}
person.sayName(); // Rick
Object.getPrototypeOf(person) // Person {sayName: [λ]}

Ahora que entendemos los prototypes, como funcionan y que problema resuelven podemos entender mejor JavaScript como lenguaje, y como los objectos nativos manejan su herencia, es por eso que métodos en Arrays como Array.prototype.map están documentados con esa sintáxis, la clase Array tiene métodos como .map(), .reduce() y .filter() dentro de su prototype.

Referencias:

[video] Prototypes in JavaScript - FunFunFunction #16

Gracias por leer!

DEV Community: Diego Maximiliano

React + TypeScript ❤️: The good parts ⚡

Disclaimer ⚠️

TLDR;

Table Of Contents

IntelliSense

This is what we get:

Type Definitions

DefinitelyTyped / DefinitelyTyped

The repository for high quality TypeScript type definitions.

Type Validation

What about prop-types?

Hooks

The Bad parts. 🤐 Trade-offs

Reading TypeScript can be hard:

Some concepts can be complicated to grasp:

You Might Not Need Redux. People often choose Redux before they… | by Dan Abramov | Medium

Dan Abramov ・ Sep 19, 2016 ・
Medium

Resources

typescript-cheatsheets / react

Cheatsheets for experienced React developers getting started with TypeScript

Conclusion

Prototypes en JavaScript

Empecemos con el problema ☠️:

Volviendo al ejemplo anterior:

Agreguemos un caso un poco más complejo 🔥:

Funciones constructoras en JavaScript

Que pasa si llamo a la función `Person` sin el operador `new`? 🤔

What? 🤯

`Function.prototype` y `Object.getPrototypeOf()`

#2 🤯 What?

Los objectos también tienen una propiedad especial `[[Prototype]]`:

Múltiples instancias 👩‍👧‍👦:

Objetos como prototypes:

Clases en ES2015

Referencias:

Diego.

DEV Community: Diego Maximiliano

React + TypeScript ❤️: The good parts ⚡

Disclaimer ⚠️

TLDR;

Table Of Contents

IntelliSense

This is what we get:

Type Definitions

DefinitelyTyped / DefinitelyTyped

The repository for high quality TypeScript type definitions.

Type Validation

What about prop-types?

Hooks

The Bad parts. 🤐 Trade-offs

Reading TypeScript can be hard:

Some concepts can be complicated to grasp:

You Might Not Need Redux. People often choose Redux before they… | by Dan Abramov | Medium

Dan Abramov ・ Sep 19, 2016 ・ Medium

Resources

typescript-cheatsheets / react

Cheatsheets for experienced React developers getting started with TypeScript

Conclusion

Prototypes en JavaScript

Empecemos con el problema ☠️:

Volviendo al ejemplo anterior:

Agreguemos un caso un poco más complejo 🔥:

Funciones constructoras en JavaScript

Que pasa si llamo a la función Person sin el operador new? 🤔

What? 🤯

Function.prototype y Object.getPrototypeOf()

#2 🤯 What?

Los objectos también tienen una propiedad especial [[Prototype]]:

Múltiples instancias 👩‍👧‍👦:

Objetos como prototypes:

Clases en ES2015

Referencias:

Diego.

Dan Abramov ・ Sep 19, 2016 ・
Medium

Que pasa si llamo a la función `Person` sin el operador `new`? 🤔

`Function.prototype` y `Object.getPrototypeOf()`

Los objectos también tienen una propiedad especial `[[Prototype]]`: