Frontend Thursday vol. 58

1. TypeScript 4.5 Beta

Zawsze powtarzam, że kolejne wydania TypeScript są dla mnie małymi świętami. Kolejne takie wydarzenie zbliża się wielkimi krokami, bo kilka dni temu ukazała się beta wersji 4.5 tego język (co oznacza, że pełne wydanie ujrzymy za mniej/więcej dwa miesiące). Tak jak w przypadku kilku ostatnich wersji mamy tu do czynienia raczej z ewolucją, a nie rewolucją, ale wciąż warto zapoznać się z nowościami.

Największe nadchodzące zmiany dotyczą modułów w Node.js. Do compilerOptions dodane zostały dwa nowe wspierane rodzaje wspieranych modułów: ‘node12’ i ‘nodenext’. Nowe opcje pozwolą emitować pliki JavaScript wspierające ECMAScript Modules (te są wspierane właśnie od Node.js 12). Nowy TypeScript będzie uwzględniał również pole type w package.json, aby w odpowiedni sposób importować pliki .ts i .tsx. To jeszcze nie koniec, bo Typescript dostanie swoje odpowiedniki plików o rozszerzeniu .mjs (.mts) i .cjs (.cts).

Moduły w Node.js wciąż potrafią przyprawić o zawrót głowy, ale programiści Node.js na pewno docenią nadchodzące usprawnienia.

Na szczęście nie samym Node.js człowiek żyje i do TypeScript zmierza też kilka nowości, które zainteresują tych zajmujących się głównie kodem uruchamianym w przeglądarkach. W nadchodzącej wersji języka od Microsoftu znajdziemy nowy utility type Awaited. Jego zadaniem jest spłaszczenie wszystkich struktur opartych o Promise i PromiseLike. Jeśli na co dzień nie modelujecie skomplikowanych struktur danych to również na nim skorzystacie, bo Promise.all, Promise.race będą wykorzystywać go w swoich deklaracjach.

// A = string
type A = Awaited<Promise<string>>;

// B = number
type B = Awaited<Promise<Promise<number>>>;

// C = boolean | number
type C = Awaited<boolean | Promise<number>>;

declare function MaybePromise<T>(value: T): T | Promise<T> | PromiseLike<T>;

async function doSomething(): Promise<[number, number]> {
    const result = await Promise.all([
        MaybePromise(100),
        MaybePromise(200)
    ]);

    // in Typescript 4.4 this caused following error:
    //    [number | Promise<100>, number | Promise<200>]
    //
    // is not assignable to type
    //
    //    [number, number]
    return result;
}

Do TypeScript 4.5 wersji zmierza też wsparcie dla dwóch ECMAScript proposals. Pierwszy z nich to sprawdzanie obecności prywatnych pól w klasach, a drugi to import assertions pozwalający na import obiektu z pliku json.

class Person {
    #name: string;
    constructor(name: string) {
        this.#name = name;
    }

    equals(other: unknown) {
        return other &&
            typeof other === "object" &&
            #name in other && // <- this is new!
            this.#name === other.#name;
    }
}

import obj from "./something.json" assert { type: "json" };

Oczywiście to tylko kilka z nadchodzących zmian. Jeśli jesteście ciekawi co jeszcze trafi do nowego TypeScriptu to zapraszamy do świetnie przygotowanej przez Microsoft notatki, którą znajdziecie w źródłach. My natomiast przyjrzymy się im dokładnie kiedy kurz opadnie i wydana zostanie ostateczna wersja języka.

Źródła:

https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/

2. React Native 0.66

W minionym tygodniu, zgodnie z planem releasowym, powitaliśmy kolejną wersję React Native. W nowym wydaniu znalazło się:

Wsparcie dla kliknięć w widoki wyrenderowane poza rodzicem
Wsparcie dla nowych pozwoleń na dostęp do Bluetoth na Androidzie
Usprawnione wsparcie dla Apple Silicon, Xcode 13 i iOS15
Nowa wersja Hermes (0.9.0)

Nie znajdziemy tutaj nic wstrząsająco ciekawego, ale coś podpowiada mi, że wielu z Was zainteresują te zmiany.

Źródła:

https://reactnative.dev/blog/2021/10/01/version-066

3. Nowa biblioteka do zarządzania stanem: Elf

Kojarzycie bibliotekę do zarządzania stanem aplikacji Akita? Jeśli tak, to zapewne zdziwi Was fakt, że jej twórca w zeszłym tygodniu opublikował nową bibliotekę do zarządzania stanem aplikacji Elf. Przyglądając się dokumentacji obydwu rozwiązań trudno nie dostrzec między nimi podobieństw. Jak twierdzi Netanel Basal Akita nie jest zagrożona i nadal będzie rozwijana, a nowa biblioteka ma być rozwijana bardziej w kierunku wyznaczonym przez społeczność niż Datoramę (komercyjnego sponsora biblioteki). Jedno trzeba przyznać: Elf od początku przygotowywany jest z myślą o wielu frameworkach i powinien sprawdzać się nie tylko w Angularze.

import { Store, createState, withProps, select } from '@ngneat/elf';
import { withEntities, selectAll, setEntities } from '@ngneat/elf-entities';

interface TodosProps {
  filter: 'ALL' | 'ACTIVE' | 'COMPLETED';
}

interface Todo {
  id: string;
  title: string;
  status: string;
}

const { state, config } = createState(
  withProps<TodosProps>({ filter: 'ALL' }),
  withEntities<Todo>()
);

const store = new Store({ name: 'todos', state, config });

export const filter$ = store.pipe(select(({ filter }) => filter));
export const todos$ = store.pipe(selectAll());

export function setTodos(todos: Todo[]) {
  store.reduce(setEntities(todos));
}

export function updateFilter(filter: TodosProps['filter']) {
  store.reduce(state => ({
    ...state,
    filter
  }));
}

A Wy co o tym myślicie? Czy społeczność naprawdę potrzebuje kolejnej biblioteki do zarządzania stanem?

Źródła:

https://github.com/ngneat/elf
https://ngneat.github.io/elf/

1. TypeScript 4.5 Beta

Źródła:

2. React Native 0.66

Źródła:

3. Nowa biblioteka do zarządzania stanem: Elf

Źródła:

Odkryj więcej świetnych treści!