Najlepsze praktyki TypeScript  — „Iteracja, obietnice i ewaluacja

TypeScript jest łatwym do nauczenia rozszerzeniem JavaScript. Łatwo jest pisać programy, które działają i coś robią. Jednak trudno jest uwzględnić wszystkie przypadki użycia i napisać solidny kod TypeScript.

W tym artykule przyjrzymy się najlepszym praktykom, których należy przestrzegać podczas pisania kodu w TypeScript, w tym zastępowaniu pętli for-in lepszymi alternatywami.

Kod obietnicy również powinien być przydatny.

Metody podobne do eval również nie powinny być używane.

Brak iteracji po tablicy za pomocą pętli for-in

Pętla for-in nie jest już aż tak przydatna, ponieważ istnieją pętle for-of i metody uzyskiwania kluczy obiektów.

Ponadto iteruje po prototypach naszego obiektu, czego prawdopodobnie nie chcemy.

Kolejność iteracji również nie jest gwarantowana.

Dlatego nie powinniśmy go używać w naszym kodzie.

Zamiast pisać:

for (const x in [1, 2, 3]) {
  console.log(x);
}

Piszemy:

for (const x of [1, 2, 3]) {
  console.log(x);
}

Pętla for-in wykonuje pętlę po indeksach, a pętla for-of po wpisach.

Nie używaj metod podobnych do eval

W JavaScript i, co za tym idzie, w TypeScript, oba mają metody, które pobierają ciągi znaków i uruchamiają je jako kod.

Istnieje metoda eval, która uruchamia kod z ciągu znaków.

Konstruktor Function zwraca również funkcję z ciągu znaków.

Ponadto funkcje setTimeout i setInterval mogą uruchamiać kod z ciągu znaków.

Uniemożliwia to jakąkolwiek optymalizację, ponieważ kod znajduje się w ciągu znaków.

Tworzy to również dużą lukę w zabezpieczeniach, ponieważ każdy może wprowadzić ciąg znaków z kodem i potencjalnie go uruchomić.

Dlatego nie powinniśmy uruchamiać żadnej funkcji, która pozwala na uruchomienie kodu z ciągu znaków.

Jeśli użyjemy setTimeout lub setInterval , powinniśmy przekazać wywołanie zwrotne zamiast ciągu znaków.

Na przykład zamiast pisać:

setTimeout('alert(`foo`);', 100);

or:

const add = new Function('a', 'b', 'return a + b');

Piszemy:

setTimeout(() => {
  alert(`foo`);
}, 100);

or:

setInterval(() => {
  alert(`foo`);
}, 10000);

i nie korzystaj z innych funkcji.

Brak jawnych deklaracji typu dla zmiennych lub parametrów Zainicjuj liczbą, ciągiem znaków lub wartością logiczną

Nie potrzebujemy typów do niczego, co ma jawnie przypisaną liczbę, ciąg znaków lub wartość logiczną.

Dzieje się tak, ponieważ z kodu jasno wynika, czym one są.

Dlatego zamiast pisać:

const a: number = 10;

Piszemy:

const a = 10;

Dotyczy to wszelkich innych wartości pierwotnych, takich jak ciąg znaków lub wartość logiczna.

Jeśli typ zwracany jest oczywisty, możemy również pominąć adnotację typu.

Zamiast więc pisać:

const a: number = Number('1');

Piszemy:

const a = Number('1');

Dotyczy to również wyrażeń regularnych. Jeśli mamy literał wyrażenia regularnego, nie potrzebujemy adnotacji.

Zamiast pisać:

const a: RegExp = /foo/;

Piszemy:

const a = /foo/;

Użyj new i konstruktora w prawidłowych sposobach

Powinniśmy używać new i constructor w prawidłowy sposób.

Dlatego nie powinniśmy ich używać do tworzenia nowych instancji klas lub odpowiednio jako funkcji konstruktorów.

Na przykład zamiast pisać:

class C {
  new(): C;
}

Piszemy:

class C {
  constructor(){
    //...
  }
}
const c = new C();

Konstruktory powinny znajdować się tylko w klasach.

Możemy również określić new jako podpis w interfejsach:

interface I {
  new (): C;
}

Nie używaj obietnic w miejscach, które nie są przeznaczone do ich spełnienia

Nie powinniśmy używać obietnic w miejscach, które nie są do tego przeznaczone.

Na przykład nie powinniśmy umieszczać ich w if instrukcjach lub pętlach.

Zamiast więc pisać:

const promise = Promise.resolve('foo');

if (promise) {
  // Do something
}

or:

const promise = Promise.resolve('foo');

while (promise) {
  // Do something
}

or:

[1, 2, 3].forEach(async value => {
  await foo(value);
});

or:

new Promise(async (resolve, reject) => {
  await doSomething();
  resolve();
});

Powinniśmy napisać:

const promise = Promise.resolve('foo');

if (await promise) {
  // Do something
}

or:

const promise = Promise.resolve('foo');
while (await promise) {
  // Do something
}

or:

for (const value of [1, 2, 3]) {
  await foo(value);
}

Musimy umieścić await w odpowiednich miejscach, aby poprawnie otrzymać obliczoną wartość.

Ponadto poniższe informacje są nieprawidłowe:

new Promise(async (resolve, reject) => {
  await doSomething();
  resolve();
});

ponieważ trzymanie obietnicy w obietnicy jest zbędne.

Możemy przenieść await doSomething() poza nasze wywołanie zwrotne obietnicy.

Wniosek

Obietnice należy wykorzystywać w pożyteczny sposób lub w ogóle nie należy ich używać.

Nie należy używać funkcji podobnych do eval, ponieważ są one niebezpieczne.

pętle for-in należy zastąpić lepszymi alternatywami.