JavaScript byl určen pro psaní krátkých úryvků kódu o několika řádcích, které měly být vloženy do webových stránek. Nikdo nemohl předvídat, že se JavaScript stane tak populárním jako nyní nebo že se bude používat k psaní aplikací s tisíci řádky kódu.
Jakkoli se JavaScript rozrostl a nyní je široce používán při vytváření aplikací, není dokonalým jazykem. Jeho skromné začátky a jeho počáteční zamýšlené použití znamenají, že JavaScript má některé zvláštnosti, které mohou učinit z vytváření rozsáhlých aplikací noční můru.
JavaScript například nevyvolá chybu, když odkazujete na prvky, které v objektu neexistují, nebo když vynásobíte hodnotu null číselnou hodnotou.
V JavaScriptu se prázdný řetězec (“”) rovná 0 (nule), když jsou tyto dva porovnány pomocí operátoru rovnosti (==). Ještě horší je, že JavaScript vám takové chyby ve vašem kódu při vývoji neukáže. Chyby uvidíte až po spuštění programu.
TypeScript, postavený na JavaScriptu, byl tedy vyvinut, aby zmírnil problémy, které vznikají při vytváření aplikací pomocí JavaScriptu. Aby toho dosáhl, TypeScript provádí statickou kontrolu typu při psaní kódu.
Statická kontrola znamená detekci chyb ve vašem kódu, aniž byste museli spouštět svůj kód. Statická kontrola typu je tedy kontrola chyb během vývoje na základě typu hodnot, se kterými se v kódu pracuje.
TypeScript je typovaná nadmnožina JavaScriptu. Být nadmnožinou JavaScriptu znamená, že jakýkoli platný kód JavaScript je také platným TypeScriptem. Být zadaný znamená, že TypeScript přidává pravidla pro použití různých datových typů. TypeScript je také silně typovaný a nemůžete obejít omezení vynucená systémem typů.
TypeScript je velký milník a významný vývoj ve vývoji webu. TypeScript umožňuje psát čitelnější kód, který se snadno udržuje. Také prosazuje správné postupy kódování a pomáhá vývojářům zachytit chyby při psaní kódu a vyhnout se jim.
TypeScript je spolehlivější a snadno se refaktoruje, díky čemuž je ve srovnání s JavaScriptem ideální pro vytváření rozsáhlých aplikací. Vzhledem k tomu, že TypeScript je silně typován, podívejme se na převod typů, jeho důležitost a na to, jak TypeScript zpracovává převody typů.
Table of Contents
Konverze typů v TypeScript a její význam
Převod typu je proces převodu hodnoty z jednoho datového typu na jiný, například převod hodnoty řetězce na číslo. Převod typů lze provést implicitně, kdy kompilátor automaticky převádí kompatibilní datové typy během komplikací.
Konverze typu může být také explicitní, kde je konverze typu ve zdrojovém kódu výslovně vyžadována. To je často označováno jako typové obsazení.
Konverze typů je důležitá, protože umožňuje vývojářům pracovat s různými datovými formáty a přitom stále odpovídat očekávaným datovým typům v TypeScriptu. Pomáhá také zajistit předvídatelné výsledky ze zdrojových kódů.
Jako vývojáři vám přetypování typů sami pomůže zajistit, že váš kód stále splňuje požadavky na typy TypeScript. Díky tomu je váš kód čitelnější a srozumitelnější a pomáhá předcházet chybám souvisejícím s typem.
Převody typů také pomáhají podporovat ověřování dat a pomáhá TypeScriptu pomáhat vám ve vývoji tím, že poskytuje všechny vestavěné nástroje, jako je automatické dokončování, které jsou spojeny s konkrétními typy.
Běžným případem použití převodu typů jsou řetězce a čísla. Při převodu řetězců na čísla v TypeScriptu, abyste se vyhnuli chybám v kódu, převádí pouze číselné řetězce na čísla. To znamená, že můžete převádět řetězce jako „1“, „235“, „5234.5“ a tak dále. Řetězce jako „ahoj“ však nepřevádějte na číslo
Podívejme se na různé způsoby převodu řetězců na čísla v TypeScript:
Zadejte tvrzení pomocí „as“
Při práci s různými datovými typy v kódu TypeScript budete mít občas více informací o typu hodnoty, o které TypeScript nemůže vědět. V takových případech sdělíte TypeScriptu, jaký typ proměnné bude, a nenecháte kompilátor odvodit typ. Tomu se říká typové tvrzení.
Typ aserce se provádí pomocí klíčového slova as. Chcete-li použít typ výrazu k převodu řetězce na číslo, nejprve nastavte typ řetězce na neznámý. Je to proto, že ve výchozím nastavení TypeScript považuje jakoukoli konverzi typového řetězce na číslo za potenciálně chybu. Je to proto, že ani řetězec, ani číslo se dostatečně nepřekrývají s druhým. Chcete-li převést řetězec na číslo, postupujte takto:
/** * set the type of numString to be unkown, otherwise, * Typescript will infer numString to be a string value */ let numString: unknown = "23452"; // Type conversion using as - numString is converted to a number // and assigned to the variable score let score = numString as number; console.log(score); console.log(score * 35);
Výstup:
23452 820820
Z výstupu si všimněte, že proměnná numString byla převedena na číslo a přiřazena ke skóre. Potom můžeme provádět numerické výpočty, jako je násobení se skóre, protože jeho hodnota je číslo
Zadejte tvrzení pomocí <>
Typ aserce pomocí <> lze také použít k převodu řetězce na číslo. Funguje to úplně stejně jako použití klíčového slova as. Jediný rozdíl v implementaci je syntaxe, která je uvedena níže:
let numString: unknown = "23452"; // Type assertion using <> to convert a string to a number let score = <number>numString; console.log(score); console.log(score * 35);
Výstup:
23452 820820
Výstup je stejný jako při použití klíčového slova as. Opět si pamatujte, že byste neměli používat aserci typu k převodu řetězců, které v nich neobsahují číselné hodnoty.
Použití konstruktoru čísel
Chcete-li převést řetězec na číslo pomocí konstruktoru Number, předejte řetězec, který chcete převést na konstruktor Number, jak je znázorněno ve fragmentu kódu níže:
let numString = "23452"; // type inferred to string let lives: string = "20"; // type annotated to string // pass in string to Number constructor to convert to number let score = Number(numString) console.log(score / 17) // pass in string to Number constructor to convert to number let remainingLives = Number(lives); console.log(remainingLives - 4)
Výstup:
1379.5294117647059 16
Při použití konstruktoru Number nemusíte nastavovat typ řetězce na neznámý. Pracuje s řetězcovými hodnotami, které byly anotovány nebo odvozeny z řetězce. Nezapomeňte však zadat číselné řetězce, například „514“. Pokud zadáte řetězec, který nelze převést na číslo, bude vráceno NaN (Not-a-Number).
Použití unárního operátoru plus (+).
Unární operátor plus (+), který předchází jeho jedinému operandu, se vyhodnotí jako operand, kterému předchází. Například +2 se vyhodnotí jako číslo 2, +542 se vyhodnotí jako číslo 542 a tak dále. Pokud však operand není číslo, unární operátor plus (+) se jej pokusí převést na číslo.
Například +”98″ se vyhodnotí jako 98 a +”0″ se vyhodnotí jako číslo 0. Proto můžeme použít unární operátor plus (+) k převodu řetězců na čísla. Pokud zadáte řetězec, který nelze převést na číslo, vrátí se NaN, jak je uvedeno níže:
let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"
// Using the Unary plus (+) to convert strings to numbers
let num1 = +numString1;
let num2 = +numString2;
let notNumber = +word;
console.log(`${num1} is a ${typeof num1}`);
console.log(`${num2} is a ${typeof num2}`);
console.log(notNumber);
Výstup:
23452 is a number 973.82 is a number NaN
Použití unárního operátoru plus (+) je dobrý způsob, jak převést řetězce na čísla, protože je rychlý a nedělá žádné další operace s jeho operandy.
Použití parseInt() a parseFloat()
Stejně jako v JavaScriptu, ani Typescript nerozlišuje mezi celými a desetinnými čísly známými také jako čísla s plovoucí desetinnou čárkou. Všechny jsou považovány za typové číslo. To znamená, že chování parseInt() a parseFloat() se mírně liší.
parseInt() převezme argument řetězce, analyzuje jej a vrátí celočíselný ekvivalent podle zadaného radixu. parseFloat() vezme řetězec a analyzuje jej a vrátí číslo s plovoucí desetinnou čárkou.
Pokud například předáte „897“ jak parseInt() tak parseFloat(), dostanete zpět číslo 897. Pokud však předáte 897.75 jak parseInt() tak parseFloat(), parseInt() vrátí 897, zatímco parsefloat() vrátí 897,75.
Proto při převodu číselných řetězců, které nemají desetinné místo, použijte parseInt(), pokud však číselný řetězec má desetinná místa, použijte parseFloat(), jak je znázorněno v kódu níže:
let numString1 = "897.75";
let numString2 = "724";
let word = "hello";
console.log("Parsing numerical strings with decimal numbers")
console.log(`Using parseInt -> ${parseInt(numString1)}`);
console.log(`Using parseFloat -> ${parseFloat(numString1)}`);
console.log("Parsing numerical strings with whole numbers")
console.log(`Using parseInt -> ${parseInt(numString2)}`);
console.log(`Using parseFloat -> ${parseFloat(numString2)}`);
console.log("Parsing strings that can't convert to number")
console.log(parseInt(word));
console.log(parseFloat(word));
Výstup:
Parsing numerical strings with decimal numbers Using parseInt -> 897 Using parseFloat -> 897.75 Parsing numerical strings with whole numbers Using parseInt -> 724 Using parseFloat -> 724 Parsing strings that can't convert to number NaN NaN
Závěr
Při práci s řetězcovými hodnotami, jako jsou výsledky volání API, je možná budete chtít převést na čísla, abyste s nimi mohli provádět numerické výpočty. Když taková potřeba nastane, zvažte metody zvýrazněné v článku pro převod řetězců na čísla.
Kdykoli však převádíte řetězce na čísla, buďte opatrní, protože při pokusu o převod řetězce na číslo můžete získat NaN.
Chcete-li se takové chybě vyhnout, ujistěte se, že všechny řetězce, které chcete převést na číslo, jsou číselné řetězce. Můžete také použít příkaz if ke kontrole NaN, abyste se vyhnuli chybám v kódu.
Můžete také prozkoumat nejlepší knihovny TypeScript a runtime, abyste je poznali jako vývojáři.