dois:pontos

Starting with Typescript

- 5 min

Last week, the first Next Level Week (NLW) took place, an event organized by Rocketseat in which experienced programmers or not so much (like me), learn in one week the bases for creating a full-stack project1 using JavaScript.

The technologies used follow the same stack used in the Omnistack Week, an event that NLW came to replace: NodeJS, React, React Native (with Expo). In this article, I will describe my experience, just as I did with the last Omnistack Week.

The project

Expo Tela inicial do site

In this first edition of NLW, the project was called Ecoleta: an application for registering and locating waste collection points. This time, the organizers worried about who is starting and did a little aptitude test during registration, so that they can follow the classes according to their level.

Those less experienced with JavaScript entered the "Starter" mode and the rest in "Booster" mode. In my case, I entered the latter, so my description refers to it. But I downloaded "Starter" classes to watch at later time.

TypeScript

The difference in this edition is that TypeScript was used, an superset on the standard JavaScript that makes it have static typing and other resources. Static typing, in a nutshell, is to write in the code which value type should be returned or received.

Imagining this in a real situation, it would be like receiving a package with the correct description of what's inside, with no surprises: "it contains a box of chocolates", and when it opens, there they are.

This is very common in low-level languages​​2, such as C or C ++ so that the computer does not have to "think" about the format of what it receives and waste machine resources. Today it may seem silly, but imagine how essential this was when the most advanced computers didn't even have 1 megabyte of RAM.

In the case of TypeScript it does not aim to save machine resources directly, as the final code will be transformed into JavaScript, but the result will be more predictable, because in development you will be warned if you do something stupid involving types, avoiding errors that would go unnoticed and could even affect performance.

My experience with TypeScript

I thought it was going to be harder than it really was. The interesting thing is that the errors themselves helped you to correct the mistakes.

Some additional packages and type configurations need to be installed for development, in addition to a little more lines of code, but in the end the lesser probability of errors will be worth it.

// TypeScript Component example
import React from "react"

// Interface:
// Describe the type of the information coming via component properties.
interface Props {
  title: string
  message: string
}

// React.FC: type that defines a functional component in React.
// <Props>: Receives the arguments as described in the Props interface.
const Message: React.FC<Props> = ({ title, message }) => {
  return (
    <div className>
      <h2>{title}</h2>
      <p>{message}</p>
    </div>
  )
}

export default Message

The code ends up being a little more verbose, but also more descriptive. This helps you to understand what happens in each part.

Ah! Expo...

Expo Tela do aplicativo para celular do projeto

Expo, why persecutest thou me? It is the question that came not only in my head, but for others who participated in the NLW. Some participants of the event even thought of giving up on making the mobile app, because of the difficulty in dealing with the random errors that appeared. I did my part and encouraged them not to give up, I know how it feels. I also suffered the first time I used it. I hope I have helped in some way.

As I have used it before, I ended up understanding some things and avoiding problems. Before this NLW I took time to format my machine, because something in my Node and NPM was very wrong. My installations were much slower than the normal and it was probably something with permissions, because every holy time I installed a global package, I had to use sudo to complete the process.

As I'm on a Mac, this time I installed it using Homebrew instead of the packages that appear on the home screen of the Node JS website. With that, everything decided to work better for me. My tip is that if possible, avoid installing the node with an executable installation package (".exe", ".pkg"). Install from the terminal using a package manager: "apt", "dnf" or "pacman" on Linux, "brew" on Mac and "chocolatey" on Windows.

Another thing I did was to change the SDK version3, as my phone did not support the newer version that comes with the standard Expo installation. A blue screen was displayed: "Something went wrong. XX.X.X is not a valid SDK version...". For that, I edited two lines in my package.json:

"dependencies": {
  "expo": "~35.0.0", // The version that worked for me
  "expo-constants": "~7.0.0",
  "expo-font": "~7.0.0",
  "expo-location": "~7.0.0",
  "expo-mail-composer": "~7.0.0",
  "react": "~16.9.0",
  "react-dom": "~16.9.0",
  // Below, the right package URL for the SDK version I used
  "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz"
}

After that, remove the node_modules directory:

$ rm -rf ./node_modules

And finally reinstall the dependencies using a package manager: npm install or yarn install.

Conclusão

Look, I don't know what to expect from this query, tell me what's going to come from it. If you tell me I will help you write the code faster. TypeScript

What I expected to be very difficult ended up not being. TypeScript is not that complicated. It takes an extra effort at first, but then everything becomes more predictable. Undoubtedly, the mobile application part was the most difficult one, not so much because of the difficulty of the code, but because of the errors I came across. I confess that I did not get so many errors, what delayed me was more the fact that the Expo application on my cell phone didn't want to run properly. Yeah, I need to retire this old guy.

Besides, I congratulate the Rocketseat team, both the teaching and the preparation of all materials were very good.

Links


  1. Full-stack project: a project where the programmer makes all parts of the project. From the server to the display in the browser.

  2. Low-level language: a programming language that gives instructions very close to what the computer understands, with little or no abstraction. Examples: C, C ++, Assembly and Rust.

  3. SDK: acronym for "Software Development Kit", it is a kit for application development, which provides additional resources to assist the programmer.

Comments