Úvod do TypeScriptu 👩‍💻

Ahoj lidi, možná jste už slyšeli populární název "TypeScript", pokud jste ve světě vývoje webu. Nedávno jsem začal používat TypeScript ve svém projektu React před 1-2 měsíci a miloval jsem ho. Zpočátku bylo obtížné kódovat v TypeScriptu, ale věřte mi, že jakmile okusíte TypeScript a skvělý „Intelli Sense“ ve svém editoru kódu, už se nikdy nebudete chtít vrátit k normálnímu JavaScriptu. Jen vám to hodně usnadní vývoj JS.

Co to dělá?

TypeScript poskytuje definice typů pro váš kód JavaScript, což značně urychluje vývojový proces a také pomáhá snadno zachytit chyby.

Nastavte ve svém projektu Typescript

Chcete-li do svého projektu zahrnout TypeScript, nainstalujte Typescript jako závislost pro vývojáře zadáním.

yarn add typescript -D
nebo
npm install typscript --save-dev

Nyní potřebujeme ts-node. ts-node je balíček Node.js používaný ke spouštění souborů TypeScript nebo spouštění TypeScriptu v prostředí REPL.

yarn add ts-node -D
nebo
npm install ts-node --save-dev

Potřebujeme také vygenerovat tsconfig.json soubor, který má všechny konfigurace strojopisu pro náš projekt. Chcete-li inicializovat soubor tsconfig.json, zadejte následující příkaz.

npx tsc --init

Uvidíte, že tsconfig.json Tento soubor se vygeneruje v kořenové složce vašeho projektu.

Vytvořte soubor s názvem index.ts a vložte následující kód console.log('Hello world')

Nyní zadejte npx ts-node index.ts ve vašem terminálu, abyste získali výstup.

Pokud chcete zkompilovat kód TypeScript do kódu JavaScript, zadejte npx tsc index.ts a uvidíte, že ve vašem projektu byl vygenerován soubor index.js.

Základy TypeScript

Primitivní datové typy

V JavaScriptu existují tři primitivní datové typy, tj. number , string a boolean . Chcete-li vytvořit proměnnou se zadanou definicí v TypeScript -

const username: string = "Shaan Alam";
const age: number = 18;
const isAdult: boolean = true;

Chcete-li proměnným poskytnout datové typy, můžete jednoduše definovat jejich typ přidáním dvojtečky před proměnnou. V tomto případě to však není potřeba, protože TypeScript automaticky odvodí svůj datový typ automaticky.

Pole

Pole lze vytvořit stejným způsobem jako normální proměnné. Stačí přidat [] s datovým typem. Například, pokud chcete vytvořit pole řetězců, můžete udělat něco takového

const names: string[] = ["Alice", "Bob", "John"];

// Similarly for numbers and booleans
const ages: number[] = [18, 19, 24];
const areAdults: boolean[] = [true, true, true];

Je třeba poznamenat, že pokud jste vytvořili pole pomocí string[] datový typ, můžete v poli zadat pouze prvky řetězce, jinak vám strojopis vyvolá chybu

// Not Allowed!! ❌
const names: string[] = ["Alice", "Bob", { name: "John", age: 18 }];

Libovolné

TypeScript má také libovolný datový typ, který lze použít k tomu, aby určitá hodnota nezpůsobovala chyby při kontrole typu. Například v předchozím příkladu bychom mohli udělat něco takového a TypeScript vám neukáže chybu.

// Okay!! ✅
const names: any[] = ["Alice", "Bob", { name: "John", age: 18 }];

Doporučuje se však nepoužívat any datový typ, protože to může způsobit chyby.
Jeden dobrý případ použití any je to, že když neznáte typ dat předem, můžete použít any přestane zobrazovat chyby.

Funkce

TypeScript vám umožňuje psát funkce zadáním parametrů a návratové hodnoty.

// Typing parameters
function sumOfNumbers(a: number, b: number) {
  return a + b;
}

// Typing parameters and return value
function sumOfNumbers(a: number, b: number): number {
  return a + b;
}

sum(12, 34); // Okay ✅
sum("190", "234"); // Wrong ❌. TypeScript won't allow this

Návratovou hodnotu však nemusíte vždy specifikovat explicitně, strojopis je dostatečně chytrý, aby odvodil návratovou hodnotu ze samotného příkazu return.

Typy objektů

Jednou z nejběžnějších datových struktur, které se budou používat v javascriptu, jsou objekty. Typový skript vám také může pomoci poskytnout typizované definice pro vaše objekty.
Pokud vytvoříte takový objekt a najedete na uživatele, zobrazí se vám tvar objektu, který je automaticky odvozen podle typového písma

let user = {
  fullName: "Shaan Alam",
  age: 18,
};

Objekty můžete zadávat stejně jako vytváříte normální objekt v závorkách a spolu s jejich typem zadat vlastnosti objektu.

let user2: { fullName: string, age: number } = {
  fullName: "Shaan Alam",
  age: 18,
};

Typové aliasy

Co když chcete použít stejnou typovanou definici pro různé objekty? Psaní definic pro různé objekty se může dosti opakovat. Typový alias vám s tím může pomoci.
Pomocí typových aliasů můžete vytvářet vlastní typy a používat je.

type User = {
  fullName: string;
  age: number;
};

let user3: User = {
  fullName: "Alice",
  age: 20,
};

let user4: User = {
  fullName: "Bob",
  age: 34,
};

let user5: User = {
  fullName: "John",
  age: 35,
};

V tomto příkladu User type id vytvořen a použit jako definice typu pro více objektů se stejným typem dat.

Pro psaní funkcí, jako je tato, můžete také použít aliasy typu.

type Sum = (a: number, b: number) => number;
const sumOfNumbers: Sum = (a, b) => a + b;

Rozhraní

Rozhraní je svým způsobem stejné jako typ, až na to, že mezi nimi existuje několik rozdílů. Výše uvedený příklad můžeme přepsat pomocí rozhraní takto.

interface User {
  fullName: string;
  age: number;
}

let user3: User = {
  fullName: "Alice",
  age: 20,
};

let user4: User = {
  fullName: "Bob",
  age: 34,
};

let user5: User = {
  fullName: "John",
  age: 35,
};

Note - A good difference between the use case for interface and type aliases can be that you can use interface for typing objects and type aliases for other things!

Naučit se TypeScript zpočátku může být těžké, ale věřte mi, že se to poté vyplatí. Zde je několik zdrojů, kde se můžete naučit TypeScript

Videa na YouTube

Dokumenty TypeScript – https://www.typescriptlang.org/docs/

Děkuji!!

Najdi mě zde -
GitHub – https://github.com/shaan71845
Twitter – https://twitter.com/shaancodes
Instagram - https://instagram.com/shaancodes
LinkedIn – https://www.linkedin.com/in/shaan-alam-01784018a/