TypeScript:Pokročilé typy

V tomto blogu se hluboce ponoříme do některých pokročilejších vestavěných typů obsažených v TypeScript. Pokud s TypeScriptem začínáte, doporučuji začít s některým z mých blogů s výukovým programem pro začátečníky:

  • TypeScript:Průvodce snadným startem

  • TypeScript:Základní typy.

Typové aliasy

V naší minulé lekci jsme vytvořili tento objekt TypeScript:

let contactInfo: {
  name: string,
  phone: number,
  fax?: number
} = {name: 'Vincent', phone: 123_456_7890}

To je skvělé, ale přináší nám to několik problémů:

1. Pokud bychom chtěli vytvořit nový objekt kontaktních informací, museli bychom opakovat tuto strukturu:

2. Další objekt kontaktních informací může mít jiné vlastnosti, takže tvar se může lišit.

3. Na první pohled může být obtížné interpretovat celkovou strukturu.

Zde se aliasy typu hodí k vytvoření vlastních typy. Chcete-li to provést, spusťte klíčové slovo 'type' následované názvem vašeho objektu v Pascalu (první písmeno v každém slově velké) takto:

type ContactInfo = {
  name: string,
  phone: number,
  fax?: number,
}

Nyní, když máme strukturu definovanou v našem aliasu, můžeme ji odstranit z našeho předchozího objektu a vytvořit nový objekt s naším novým vlastním psaním:

let myContactInfo: ContactInfo = {
  name: "Vincent",
  phone: 123_456_7890,
}

Odbory

Odbory jsou poměrně jednoduchý koncept. Můžete je použít k dalšímu psaní proměnných nebo parametrů funkcí. To se provádí pomocí "|" charakter:

function addTwo(num: number | string): number{
  return num + 2;
}

Když to rozdělíme, tato funkce říká, že potřebuje jeden argument, kterým může být buď číslo, nebo řetězec. Zatímco výše uvedená funkce může přijmout obě, existuje možnost, že nemusí vrátit požadované číslo (když k číslu přidáte řetězec, výsledkem je řetězec).

poznámka:V předchozím blogu jsme hovořili o dokončování kódu a o tom, jak je to jedna z výhod, které nám poskytuje TypeScript. Když však použijeme unie jako v tomto příkladu, jediné metody, které uvidíme, jsou metody sdílené oběma řetězci a čísla :

Takže v rámci naší funkce můžeme přidat nějakou podmíněnou logiku, abychom vyčistili vzduch:

function addTwo(num: number | string): number{
  if (typeof num === "number") {
    return num + 2;
  } else {
    return parseInt(num) + 2;
 }
}

Tento proces využívající podmíněnou logiku ke zjištění typu argumentu je známý jako Zúžení typu .

A nyní s inferencí TypeScript bude vědět, že num v první podmínce bude typ čísla a num v podmínce 'else' musí být řetězec, a proto budou příslušné metody typu znovu zpřístupněny po dokončení kódu.

Křižovatky

Koncept typů křižovatek je podobný jako u svazků. Namísto předávání hodnoty jednoho typu NEBO druhého však umožňuje, aby proměnná byla obou typů současně. Náš předchozí příklad by nebyl nejlepším způsobem, jak to ukázat, protože objekt nemůže být zároveň číslem A řetězcem, ale zkusme to s některými vlastními typy psaní.

Představte si, že vytváříme jednoduchou entitu videohry.
U některých entit chceme, aby se mohly pohybovat pouze doleva nebo doprava jako goomba ve hrách Mario!


Všimněte si, že toto není nutně způsob, jakým byly kódovány skutečné entity videoher, ale pouze vizuální analogie.

Pro ostatní můžeme chtít, aby se mohli pohybovat nahoru a dolů jako piraňa.


naše vlastní typy mohou vypadat nějak takto:

type LeftAndRight = {
  moveLeft: () => <...>,
  moveRight: () => <...>
}

type UpAndDown = {
 moveUp: () => <...>,
 moveDown:() => <...>
}

Ale co kdybychom chtěli entitu, která může jít doleva i doprava A nahoru a dolů jako létající koopa troopa.

Chcete-li vytvořit vlastní typ, který má atributy již existujících/vlastních typů, které jsme vytvořili, můžeme použít symbol '&' takto:

type UpDownLeftAndRight = LeftAndRight & UpAndDown;
// and now we can create a variable of that combined type
let flyingKoopaTroopa: UpDownLeftAndRight = {
  moveLeft: () => <...>,
  moveRight: () => <...>,
  moveUp: () => <...>,
  moveDown: () => <...>,
}

Doslovné typy

Naučili jsme se, že pomocí TypeScriptu můžeme přiřadit proměnné ke konkrétním datovým typům, jako jsou řetězce. Můžeme však také specifikovat konkrétní řetězce přiřazením „typu“ konkrétnímu řetězci takto:

type CoinFlip = 'heads' | 'tails';
//here we are creating a custom type that can only be of two values

let firstFlip: CoinFlip = 'heads'; //this is ok
let secondFlip: CoinFlip = 'tails'; //this is also ok
let thirdFlip: CoinFlip = 'a crow took it'; //this is not ok

Typy s možnou hodnotou Null

Ve výchozí konfiguraci TypeScripts neumožňuje při přiřazování proměnných ke konkrétním typům nulové typy. Pokud však chcete povolit, aby proměnná byla null, můžete ji zadat pomocí operátoru unie:

let greeting: string | null
//we are saying that greeting can be either a string or null
greeting = null // this is ok
greeting = 'Hello!' // this is also ok
greeting = undefined // error

// if you wish to also specify that greeting can also be undefined, you would need to add another union to include 'undefined' types

Gratulujeme, nyní jste odborníkem na typy TypeScript! Doufám, že tento příspěvek byl informativní a ušetří vám spoustu času na ladění v budoucnu.