Jak używać asercji typu TypeScript

Asercje typu w TypeScript to sposób na poinformowanie kompilatora, że ​​wiesz więcej o typie wartości niż on. Może to być pomocne, gdy pracujesz z wartościami o niepewnych lub szerokich typach i chcesz je zawęzić, aby uzyskać lepszą kontrolę typów i czytelność kodu. W tym artykule przyjrzymy się, jak skutecznie używać asercji typu TypeScript.

Czym jest asercja typu?

Type assertion to mechanizm w TypeScript, który pozwala zastąpić domyślne wnioskowanie typu wykonane przez kompilator TypeScript. Nie zmienia on rzeczywistego typu wykonawczego, ale pomaga kompilatorowi zrozumieć typ zmiennej na potrzeby sprawdzania typu. Asercje typu są podobne do rzutowania typu w innych językach, takich jak C# lub Java, ale bez żadnego wpływu na środowisko wykonawcze.

Składnia asercji typu

Istnieją dwa sposoby użycia asercji typu w TypeScript:

• Użycie słowa kluczowego as (zalecane)
• Używanie nawiasów kątowych <>

Używanie słowa kluczowego as

Najczęstszym sposobem użycia asercji typu jest użycie słowa kluczowego as:

let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue as string).length;

console.log(strLength); // Output: 17

W tym przykładzie informujemy TypeScript, że someValue jest typu string, co pozwala nam na użycie właściwości length.

Używanie nawiasów kątowych <>

Alternatywna składnia dla asercji typu wykorzystuje nawiasy kątowe:

let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue).length;

console.log(strLength); // Output: 17

Ta składnia osiąga ten sam wynik co składnia as. Nie jest jednak zalecana w środowiskach, w których używany jest JSX (takich jak React), ponieważ koliduje ze składnią elementów JSX.

Typowe przypadki użycia asercji typu

Asercje typu są powszechnie używane w kilku scenariuszach:

• Podczas pracy z typem nieznany
• Podczas obsługi elementów DOM
• Podczas zawężania typów związków
• Podczas interakcji z bibliotekami innych firm, w których brakuje definicji typów

Przykład: potwierdzanie typów z typem nieznany

Typ unknown jest przydatny, gdy chcesz zaakceptować dowolny typ, ale nadal musisz wykonać pewne sprawdzenie typu przed jego użyciem. Asercje typu pomagają zawęzić typ:

function getLength(value: unknown): number {
  if (typeof value === "string") {
    return (value as string).length;
  } else if (Array.isArray(value)) {
    return (value as any[]).length;
  }
  return 0;
}

console.log(getLength("Hello")); // Output: 5
console.log(getLength([1, 2, 3])); // Output: 3
console.log(getLength(42)); // Output: 0

W tym przykładzie używamy asercji typu, aby poinformować TypeScript, że value jest string lub tablicą any[].

Przykład: obsługa elementów DOM

Podczas manipulowania DOM, TypeScript musi znać konkretny typ elementu, aby zapewnić odpowiednie właściwości i metody. Asercje typu są tutaj pomocne:

const inputElement = document.getElementById("user-input") as HTMLInputElement;
inputElement.value = "Hello, TypeScript!";

Tutaj użyliśmy potwierdzenia typu, aby poinformować TypeScript, że inputElement jest HTMLInputElement, co umożliwi nam bezpośredni dostęp do właściwości value.

Asercja typu kontra rzutowanie typu

Ważne jest zrozumienie różnicy między asercją typu a rzutowaniem typu. W TypeScript asercje typu nie zmieniają rzeczywistego typu w czasie wykonywania; informują jedynie kompilator TypeScript, jak traktować typ w czasie kompilacji. Natomiast rzutowanie typu w innych językach, takich jak C# lub Java, może obejmować konwersję wartości z jednego typu na inny w czasie wykonywania, co może mieć wpływ na wydajność i zachowanie.

Ostrzeżenia przy stosowaniu asercji typu

Chociaż asercje typu mogą być potężne, niewłaściwe użycie może prowadzić do błędów w czasie wykonywania. Oto kilka wskazówek, jak bezpiecznie ich używać:

• Unikaj stosowania asercji w celu wymuszonej konwersji niezgodnych typów.
• Zawsze używaj asercji z ostrożnością i preferuj zawężanie typów, korzystając z zabezpieczeń typów TypeScript.
• Używaj asercji, gdy masz pewność co do typu i gdy nie ma możliwości zawężenia go w inny sposób.

Przykład nieprawidłowego potwierdzenia typu

Oto przykład niebezpiecznego stwierdzenia typu:

let someValue: string = "Hello, TypeScript!";
let numValue: number = (someValue as unknown as number); // Dangerous!

console.log(numValue); // Output: Hello, TypeScript! (incorrect)

Ten kod kompiluje się bez błędów, ale w czasie wykonywania może powodować nieoczekiwane zachowanie, ponieważ ciąg znaków jest nieprawidłowo traktowany jako liczba.

Wniosek

Asercje typu w TypeScript zapewniają sposób na nadpisanie wywnioskowanych typów, gdy wiesz więcej o typie wartości niż TypeScript. Są przydatne podczas pracy z niepewnymi typami, interakcji z bibliotekami innych firm lub pracy z elementami DOM. Należy jednak używać ich ostrożnie, aby uniknąć błędów w czasie wykonywania i zapewnić bezpieczeństwo typu w kodzie.

Opanowując asercje typu, możesz pisać bardziej ekspresyjny i solidny kod TypeScript. Ćwicz ich używanie w różnych scenariuszach, aby poczuć się bardziej komfortowo z tą potężną funkcją.