Úvod do TypeScriptu

Úvod

Dobrý den, tady Darshan Ponikar a dnes budeme mluvit o přechodu z JavaScriptu na TypeScript!

Připravte se tedy na vyřešení všech pochybností, které máte, pomocí TypeScript!

Proč TypeScript?

Předpokládám, že vůbec neznáte TypeScript. TypeScript, jak název napovídá, jedná se o jazyk pro kontrolu typu!

Než vám řeknu přímo, jak věci fungují v TypeScriptu Promluvme si o našem oblíbeném jazyce JavaScript.

JavaScript je Runtime Language! To znamená, že se vše děje za běhu. Nemůžeme kompilovat JavaScript jako Java, C++, C.

//app.js

let num = 3 
console.log(typeof num) // this will print number
num = "I am String" 
console.log(typeof num) // this will print string 

Můžete tedy deklarovat proměnnou přidělené číslo a můžete dokonce přiřadit řetězec ke stejné proměnné . Pokud přicházíte z Javy nebo C++, pravděpodobně se budete divit, že JavaScript je divný.

Pokud pracujete s velkou webovou aplikací , Předpokládám, že používáte React!

Spousta komponent , Spousta rekvizit procházení podřízenými komponentami, funkcemi pomocníků pro volání API a v tomto projektu se děje spousta věcí.

tj. V aplikaci React musí komponenta přijmout řetězcovou hodnotu.


// app.jsx
// this is valid
<Component name="Darshan!" /> 

// this is invalid but JavaScript won't show any error
<Component name={123} /> 

To je ale úplně špatně. Název musí mít datový typ řetězce.

Jak tedy postupovat dále?

Vyšší úroveň s TypeScript

Zde TypeScript vstupuje do obrázku!

Na rozdíl od JavaScriptu může být váš kód zkompilován předtím, než jej spustíte v prohlížeči. Takže můžete vyřešit jakoukoli potenciální hloupou chybu a ušetřit svůj čas!

TypeScript vám umožňuje zúžit typ proměnné.

// app.ts
// Narrowed down type to string
let name:string = "Darshan" 

// This will show you the error
name = 123 

Úplně zadáme název naší proměnné do řetězce.

Pokud píšete kód v editoru VSCode, pravděpodobně vám to ukáže chybu! Něco jako vy ** nemůže řetězci přiřadit číselnou hodnotu.**

app.ts
const name = "I am String"

// This will still show you the error!
name = 8923 

Příklad, který jste viděli výše, je vazba typu odvození.
Existují další způsoby vazby typu

  1. odvozování
  2. rozhraní
  3. typ

Více si můžete přečíst v dokumentaci!

Na co si pamatovat při práci s TypeScriptem!

  1. TypeScript je jazyk doby kompilace.

  2. Nelze spustit TypeScript přímo v prohlížeči. Potřebujete kompilátor babel, který převede váš TypeScript na kód JavaScript.

  3. Můžete si také vytvořit svůj vlastní typ!

  4. Chcete-li zúžit své rekvizity/stav, potřebujete znát konkrétní typ.

  5. Než začnete psát kód v TypeScript, musíte nakonfigurovat projekt.

Takže TypeScript vám může urychlit vývoj a ušetřit více času.

Jste připraveni hrát si s TypeScriptem? Pokladna Hřiště TypeScript!
TypeScript Playground

Děkuji, že čtete blog. Pokud se vám to líbilo, dejte mi vědět své názory do pole komentářů, Co se vám líbilo nejvíce?

Pokud si myslíte, že došlo k chybě nebo chcete něco přidat, podělte se o své myšlenky v poli komentářů.