Interactivated Growth Lab:
Tech, Design & Business Inzichten

TypeScript biedt unieke voordelen ten opzichte van JavaScript en is daarom een populaire programmeertaal onder ontwikkelaars. Het is nóg beter geworden met de release van TypeScript 5.4, die een hele reeks handige verbeteringen en nieuwe functies met zich meebrengt. In deze handleiding verkennen we alles wat nieuw is in TypeScript 5.4, inclusief het veelbesproken utility-type "NoInfer", dat de bruikbaarheid van TypeScript in specifieke situaties drastisch kan verbeteren. Alle wijzigingen in TypeScript 5.4: Hier is een korte lijst van alle nieuwe toevoegingen in TypeScript 5.4: -->

• Een nieuw hulpprogrammatype genaamd NoInfer
• Slimmere verfijning in closures
• Declaraties voor Object.groupBy en Map.groupBy
• Verbeterde ondersteuning voor require()-aanroepen
• Nauwkeurige controle van importattributen
• Een snelle oplossing voor het toevoegen van nieuwe parameters
• Verbeterde ondersteuning voor automatisch importeren
• Gedragswijzigingen

Dat is nogal wat om uit te leggen. Laten we dus zonder verder uitstel de details van elke wijziging bekijken en zien wat ze betekenen voor TypeScript-gebruikers.

Het nieuwe hulpprogrammatype – NoInfer

We beginnen met misschien wel de grootste toevoeging van TypeScript 5.4: het nieuwe hulpprogrammatype, bekend als NoInfer. Omdat dit hulpprogramma-type TypeScript de mogelijkheid geeft om te voorkomen dat het type-argumenten afleidt uit de beschikbare gegevens, heeft het veel potentiële waarde, zij het in zeer specifieke situaties. Over het algemeen is TypeScript historisch gezien vrij effectief geweest in het afleiden van type-argumenten uit de beschikbare gegevens. Je kunt een generieke functie aanroepen en TypeScript zal vaak het juiste type-argument bepalen om af te leiden. Het sleutelwoord hier is "vaak", niet altijd. Het systeem is niet perfect en TypeScript maakt soms fouten, wat kan leiden tot veel verwarring en fouten die de programmeur moet oplossen.

NoInfer is bedoeld om dit op te lossen, waardoor je bepaalde typen kunt uitsluiten van inferentie en voorkomt dat TypeScript een onjuist of ongeldig type afleidt.

Een voorbeeld

Laten we eens kijken naar een heel eenvoudig voorbeeld van hoe dit werkt.

Stel dat je een generieke functie hebt die simpelweg doorgeeft het type van de waarde die je eraan doorgeeft, zoals dit:

const returnWhatIPassedIn = <T>(value: T) => value;
const result = returnWhatIPassedIn("hi");"

Hier zal TypeScript het type "result" afleiden als simpelweg "hi."

Als we echter het nieuwe hulpprogrammatype NoInfer toevoegen, kunnen we die uitkomst wijzigen.

const returnWhatIPassedIn = <T>(value: NoInfer<T>) => value;
const result = returnWhatIPassedIn("hello");

Nu, dankzij NoInfer, zal TypeScript niet automatisch iets afleiden over "value", dus kan het niets teruggeven voor "result." Als we een specifiek retourtype van deze functie willen, moeten we dit expliciet opgeven.

Waarom is dit belangrijk?

Aan de hand van het simpele voorbeeld hierboven vraag je je misschien af waarom NoInfer nodig is, of wat voor waarde het kan bieden.

Wel, waar dit hulpprogramma echt in uitblinkt, is bij functies die TypeScript niet gemakkelijk kan afleiden. Stel je voor dat je een functie hebt met meerdere mogelijke kandidaten voor typeparameter-inferentie, of meerdere delen van de code die TypeScript zou kunnen gebruiken om de inferentie te maken.

Verbeterde vernauwing in Closures

De volgende grote verandering in TypeScript 5.4 betreft het vernauwingsproces. Dit is wanneer TypeScript effectief een exact variabel type berekent. Bijvoorbeeld:

function uppercaseStrings(x: string | number) {
if (typeof x === "string") {
return x.toUpperCase();
}
}

In deze voorbeeldcode kan TypeScript vaststellen dat "x" een "string" is.

Als we echter een voorbeeld van een uitgebreide functie gebruiken, is het een ander verhaal.

function getUrls(url: string | URL", names: string[]) {
if (typeof url === "string") {
url = new URL(url);
}
return names.map(name => {
url.searchParams.set("name", name)
return url.toString();
});
}

In een voorbeeld zoals dit kan TypeScript niet automatisch vaststellen dat "url" een echt URL-object is, omdat het elders in de code wordt gemuteerd. Dus, hoewel het voor de programmeur duidelijk lijkt hoe "url" behandeld moet worden, reageert het systeem niet op dezelfde manier.

Dit is slechts één voorbeeld van hoe typen niet altijd behouden blijven in TypeScript, behalve in functiesluitingen. Het zorgt voor veel gedoe voor programmeurs, en kan leiden tot vervelende en tijdrovende aanpassingen van de code om alles te krijgen. juist.

Welnu, de 5.4-update is bedoeld om dit soort problemen voor eens en voor altijd op te lossen, waardoor het vernauwingsproces veel slimmer wordt, vooral in niet-gehoiste functies. Wanneer een parameter of "let-variabele" wordt gebruikt in een niet-gehoiste functie, zoekt TypeScript nu automatisch naar een eindtoewijzingspunt. Als het er een vindt, wordt er niet alleen binnen die functie, maar ook daarbuiten vernauwd.

Dus als we het bovenstaande voorbeeld in 5.4 zouden herhalen, met de nieuwe en verbeterde vernauwing, zou het werken zoals gewenst.

Declaraties van Object.groupBy en Map.groupBy

De TypeScript 5.4-update introduceert ook nieuwe declaraties die aansluiten op de recent toegevoegde statische methoden van JavaScript, Object.groupBy en Map.groupBy.

Voor degenen die niet bekend zijn met deze functie: om Object.groupBy te gebruiken, heb je iterables nodig, samen met een functie met een ingebouwde sleutel. De sleutel beschrijft hoe elementen gesorteerd moeten worden, waarna Object.groupBy de regels van de sleutel volgt om een object te creëren dat elementen in de juiste groep sorteert.

Voor Map.groupBy, het is een vergelijkbaar verhaal, maar met als eindresultaat een kaart.

Deze statische methoden zijn nuttig gebleken voor JavaScript-ontwikkeling, en de 5.4-update brengt hun bruikbaarheid naar de TypeScript-gebruikers.

Verbeterde ondersteuning voor require()-aanroepen

Langdurige TypeScript-gebruikers zullen bekend zijn met de moduleResolution-optie van de "bundler" van de taal.

Het is ontworpen om moderne bundlers na te bootsen, door het juiste bestand te vinden waarnaar importpaden verwijzen. Dit heeft echter wel zijn problemen.

Een van de nadelen van de bundler moduleResolution-optie is dat deze altijd moet worden uitgelijnd met "--module esnext."

Daardoor is het gewoon niet mogelijk om de code "import ... = require()" te gebruiken, wat in bepaalde situaties een probleem kan zijn, vooral als je met voorwaardelijke exports werkt.

Met versie 5.4 kan require() eindelijk worden gebruikt in In combinatie met bundler, simpelweg door de module in te stellen op een gloednieuwe optie, genaamd preserve. Door de bundlers "--module preserve" en "--moduleResolution" samen te gebruiken, zouden programmeurs het gemakkelijker moeten vinden om modules nauwkeurig op te zoeken en bestandsimportpaden te identificeren.

Nauwkeurige controle van importattributen

De volgende wijziging is relatief klein, maar toch nuttig. TypeScript 5.4 controleert nu alle importgerelateerde attributen en beweringen aan de hand van het type ImportAttributes. Hierdoor zouden runtimes nauwkeuriger en betrouwbaarder moeten worden in het beschrijven van importattributen.

Snelle oplossing voor nieuwe parameters

Een andere kleine wijziging is dat TypeScript 5.4 een snelle oplossing biedt voor het toevoegen van een nieuwe parameter aan elke functie die wordt aangeroepen met een overschot aan argumenten.

Stel dat u een nieuwe parameter of argument wilt doorgeven aan een reeks bestaande functies. Vóór versie 5.4 kon dat een erg omslachtig proces zijn. Maar nu is het veel gemakkelijker en sneller met deze snelle oplossing.

Verbeterde ondersteuning voor automatisch importeren

Vóór versie 5.4 hield de automatische importfunctie van TypeScript geen rekening met paden in "imports". Dat was een probleem, omdat gebruikers zelf tijd en energie moesten besteden aan het handmatig definiëren van paden via hun tsconfig.json. Vanaf versie 5.4 is dat probleem opgelost. De automatische importfunctie ondersteunt nu volledig subpad-imports, wat programmeurs veel tijd en moeite zal besparen. Tot slot zijn er een aantal gedragsveranderingen geïntroduceerd in versie 5.4, die gebruikers al dan niet zullen opmerken, afhankelijk van hoe ze de taal gebruiken en het soort code waaraan ze werken. met.

Verbeterde nauwkeurigheid in voorwaardelijke typebeperkingen

Bekijk de volgende code:

type IsArray<T> = T extends any[] ? true : false;
function foo<U extends object>(x: IsArray<U>) {
let first: true = x;
let second: false = x;

Vóór versie 5.4 zou de regel "let first: true = x;" een foutmelding hebben gegeven. De regel "let second: false = x;" daarentegen niet. Nu is de tweede variabeledeclaratie niet langer toegestaan en zal deze ook een foutmelding opleveren, omdat TypeScript de typebeperkingen over verschillende takken heen aanscherpt.

Het minimaliseren van overlappingen tussen variabelen en primitieve typen

TypeScript 5.4 brengt ook een strengere reductie van overlappingen tussen variabelen en primitieve typen met zich mee. De details van hoe dit in de praktijk werkt, hangen af van hoe de variabelen en de primitieven elkaar overlappen.

Strengere controles op sjabloonstrings

TypeScript is nu preciezer en gedetailleerder dan ooit bij het controleren of strings kunnen worden toegewezen aan placeholders (binnen een sjabloon van het type string). Dit zou programmeurs op de lange termijn ten goede moeten komen, hoewel het codefouten kan veroorzaken bij het gebruik van constructies zoals voorwaardelijke instructies, wat enige gewenning kan vereisen.

Fouten bij importconflicten die alleen van het type zijn

In eerdere versies stond TypeScript een stuk code zoals dit toe, mits de import naar "Thing" naar een type verwees.

import { Thing } from "/path/";
let Thing = ABC;

Dit soort code zal echter leiden tot een foutmelding zoals deze:

""Thing" conflicteert met een lokale waarde, dus moet worden gedeclareerd met een import."

Dit is om te voorkomen dat compilers voor single-file-compilaties automatisch aannemen dat de import kan worden weggelaten.

Aanvullende beperkingen met betrekking tot Enum

TypeScript 5.4 introduceert ook een reeks nieuwe beperkingen met betrekking tot enums. Concreet moeten enum-waarden nu exact hetzelfde zijn om compatibel te blijven wanneer ze bekend zijn. Bovendien mogen enum-leden niet langer de namen "Infinity" of "-Infinity" hebben. "NaN" is ook verwijderd uit de lijst met toegestane namen.

Wat betekenen deze wijzigingen voor TypeScript-gebruikers?

De wijzigingen in TypeScript 5.4 betekenen verschillende dingen voor verschillende gebruikers. Het hangt er helemaal vanaf hoe je deze taal gebruikt en aan wat voor projecten je werkt. Voor sommigen zal de introductie van "NoInfer", in combinatie met de andere wijzigingen, een dramatisch effect hebben en hen helpen productiever en efficiënter te coderen. Anderen zullen de effecten in hun werk misschien niet zo sterk merken. Over het algemeen zijn deze wijzigingen echter allemaal bedoeld om TypeScript een betrouwbaardere, effectievere en nuttigere programmeertaal te maken, waarmee een reeks bekende problemen die door de community zijn aangekaart, worden aangepakt. Als gevolg hiervan zult u, ongeacht hoe u het gebruikt, TypeScript 5.4 een betere optie vinden dan 5.3 en eerdere versies.

Wat is de volgende stap voor TypeScript?

Net als andere programmeertalen bevindt TypeScript zich in een constante staat van evolutie, met meer updates en iteraties gepland voor de komende maanden en jaren. TypeScript 5.5 bevindt zich zelfs al in de bètafase en staat gepland voor een release in juni 2024.

Net als 5.4 zal 5.5 nog meer nieuwe wijzigingen met zich meebrengen.

We weten bijvoorbeeld dat verouderde opties en gedragingen zoals "charset", "noImplicitUseStrict" en "importsNotUsedAsValues" allemaal harde foutmeldingen zullen geven in 5.5, en 5.4 is de laatste versie van TypeScript die deze opties accepteert zonder harde foutmeldingen te geven.

Versie 5.5 zal ook afgeleide typepredicaten, controle van de syntaxis van reguliere expressies en verbeterde controlestroomvernauwing introduceren, naast andere toevoegingen en wijzigingen.

In de tussentijd kunnen TypeScript-fans en Gebruikers zullen moeten wennen aan de nieuwe eigenaardigheden en toevoegingen die in versie 5.4 zijn geïntroduceerd, zoals experimenteren met het hulpprogrammatype NoInfer, samen met de declaraties Map.groupBy en Object.groupBy.