TypeScript lägger statisk typning för JavaScript, vilket förbättrar IDE erfarenhet och minskar fel. Det är lätt att lära sig, men övergår i en befintlig applikation till maskinskriven text, kan vara en mödosam process. Vi kommer att diskutera några av tekniker för att arbeta med det i din app.
Vad Är En Maskin?
TypeScript är en syntaktiska superset av JavaScript som lägger till stöd för statisk typning, bland andra saker. Det kompilerar direkt till vanilj JS som kommer att köras i alla webbläsare.
Vanilj JS är dynamiskt typat. Variabler kan ändra typer vid körning, och JS kommer att acceptera det. Detta gör den väldigt flexibel, men leder ofta till en enda röra i större projekt. TypeScript upprätthåller typ av säkerhet du kan inte passera ett int-värde till en funktion som tar en sträng.
Detta i sig har några stora fördelar. Eftersom varje funktion tydligt definierar vilka argument de tar, det gör jobba med dem mycket lättare. TypeScript integrerar väl med IDE-verktyg, ger rik komplettera automatiskt och typ kolla där vanilj JS skulle endast ha grundläggande syntax highlighting.
Det gör också grundläggande felet kontrollera lättare för din IDE att göra. Om du saknar ett argument för en funktion, VS-Kod kommer att låta dig veta direkt, innan det är även sammanställt.
Installera Maskin-och Webpack
En not innan vi börjar: om du använder en Reagera projektet byggde med skapa-reagera-app, Webpack config hanteras för dig som en del av react-skript. Om du vill ändra den, kan du mata din config (rekommenderas inte om du inte vill att hantera pågående konfiguration dig själv), en gaffel reagera-skript, eller använda ett bibliotek som dras om att ändra det indirekt utan att bryta uppdateringar.
Men, om du börjar ett nytt projekt, kan du helt enkelt använda skapa-reagera-app TypeScript-mall när du skapar ett nytt projekt.
npx skapa-reagera-app –mall typescript
Detta kommer att vara förkonfigurerad för att stödja Maskin ur lådan. Om detta fungerar för dig, kan du hoppa över resten av detta avsnitt. Du kan också överföra ett existerande projekt för att skapa en reagera-app TypeScript-mall med hjälp av denna metod.
Om du inte använder Reagera, måste du installera det manuellt. Installera Maskin som en utveckling beroende för ditt projekt:
npm install-spara-dev typescript
Du kommer också vill installera Maskin globalt på din dator, som kommer att tillåta dig att använda CLI:
npm install-g maskin
För att testa det, kan du skapa en grundläggande funktion som följande:
funktionen Hello(objekt: string) {
konsolen.logga in (“Hello, ${objekt}!`);
}
Hej (“Världen”)
Sparade prov.ts. Alla TypeScript-filer bör ha en .ts förlängning (eller .tsx för JSX). Du kan göra det manuellt med hjälp av tsc:
tsc-test.ts
Kör denna med -w-flaggan kommer att göra tsc titta på för nya förändringar och bygga när du sparar, men du vill förmodligen för att integrera den i Webpack som en del av byggprocessen. Om du inte har Webpack, kan du installera det från npm:
npm install-spara-dev webpack webpack-cli
Skapa en maskinskriven text konfigurationsfil på tsconfig.json som kommer att lagra din kompilator inställningar:
{
“compilerOptions”: {
“utkata”: “./dist/”,
“sourceMap”: true,
“skipLibCheck”: true,
“noImplicitAny”: true,
“modul”: “commonjs”,
“mål”: “es6”,
“jsx”: “reagerar”
}
}
Då du vill skapa eller ändra din webpack.config.json-filen för att lösa TypeScript-tillägg och användning av ts-loader. Du kommer också vill slå på källan kartor för förbättrad felsökning.
modulen.exporten = {
läge: “produktion”,
// Det möjligt sourcemaps för felsökning webpack produktion.
devtool: “källa-karta”
lösa: {
// Lägg till ‘.ts’ och ‘.tsx’ som matchas tillägg.
tillägg: [“.ts”, “.tsx”]
},
modul: {
regler: [
{
test: /.ts(x?)$/,
utesluter: /node_modules/,
användning: [
{
loader: “ts-loader”
}
]
},
// Alla output”.js’ filer kommer att ha någon sourcemaps bearbetas på nytt med “källa-map loader’.
{
tillämpa: “pre”,
test: /.js$/,
loader: “källa-map loader”
}
]
},
// När du importerar en modul vars sökväg som matchar något av följande, bara
// antag att en motsvarande global variabel finns och använda den istället.
// Detta är viktigt eftersom det tillåter oss att undvika att bunta ihop alla våra
// beroenden som gör att webbläsare cache dessa bibliotek mellan bygger.
externa: {
“reagera”: “Reagera”,
“reagera-dom”: “ReactDOM”
}
};
Nu kör npx webpack eller webpack-dev-server kommer att automatiskt hantera lastning TypeScript-filer för dig.
Hur man Arbetar Med JS-Baserade Paket
Om du har bara installerat på Maskin, förändrat några av dina förlängningar .ts, och märkte att allt nu är i brand, oroa dig inte. Många JS-bibliotek inte har stöd för maskinskriven text ur lådan, men tredje part typer är vanligtvis tillgängliga från DefinitelyTyped, en gemenskap arkivet inriktade på att upprätthålla typningar för de flesta vanliga bibliotek som installeras separat npm beroenden. Till exempel, Reagerar är tillgängliga från @typer/reagera:
npm install-spara-dev @typer/reagera @typer/reagera-dom
Detta kommer omedelbart att bli av med det problem när du använder det i samband paket. Om du får kompilator fel efter installation av ett nytt paket, försök att installera @typer/paket.
Lyckligtvis, TypeScript kommer fortfarande att sammanställa och arbeta med infödda JS bara fint att du bara kan se några röda krumelurer som talar om det är ett problem. Om du verkligen vill fixa typningar för en npm paket som inte offentligt tillgängliga typer, kan du skriva en förklaring filen för det, eventuellt med gaffel DefinitelyTyped (och skicka in din nya typningar till gemenskapen repo).
En förklaring fil ser ut som följande, oftast sparas som paket.d.ts någonstans i dina src:
exportera som namespace Paket
exportera = Package
förklara namespace Package {
Typ av gränssnitt {
värde: boolean
}
// osv…
}
Då kan du använda förklaring genom att lägga till en referens på toppen av en kod med hjälp av detta paket:
///<hänvisning path=”paketet.d.ts”/>
Hur Man Typ Legacy-Kod
Skriva legacy-kod är en manuell process som kommer att bli specifika för din verksamhet logik, så det kommer att ta lite tid beroende på projektets storlek. Men det grundläggande konceptet är inte alltför svårt, och det innebär helt enkelt att skapa anpassade gränssnitt för värden som skickas till och returneras av de funktioner som du har genomfört.
Till exempel, säga att du har en Reagera komponent som tar några rekvisita, och gör några JSX:
Att skriva detta, kan du definiera ett nytt gränssnitt för den funktion du vill använda. Varje gång du refererar till en knapp på rekvisita i koden, som rekvisita.divCustomColor här, lägg till det att gränssnittet tillsammans med motsvarande typ.
Sedan, när du använder den här funktionen i en annan fil, får du ett felmeddelande om du inte definierar rekvisita.divCustomColor, eller försök att ge det en felaktig typ. Om din app redan hanterar värden i en typ-och säkert sätt, som kan vara allt du behöver för att typ många av dina komponenter. Du kan dock behöva justera några saker att bättre hantera strikt skriva.
Om du verkligen skrapa huvudet över något, kan du alltid ge upp och inaktivera TypeScript-kompilator varningar med ts-ignorera flagg:
//@ts-ignorera
Eller ts-nocheck för en hel fil.
Lägga Till Projekt-Brett Typer
Om du vill lägga till den anpassade typer projektet-brett, men du vill skapa en global deklaration fil. Till exempel, om du ville skapa en referenceable enum lagra din app färger, så att du kan använda dem direkt genom att namn, kan du spara följande som globalt.d.ts i dina src mapp:
förklara global {
enum Färg {
primär = “#6ca583”,
accent = “#9b8dab”,
}
}
export {};
Inaktivera Implicita Någon att Kontrollera Om Du Verkligen Har Frågor
Det vanligaste felet kommer du förmodligen att stöta på är maskinskriven text som klagar på “Implicit Någon.” Du kan göra funktioner acceptera någon typ använder explicit någon, eller val: alla. Detta är bra, och samtidigt ska du brukar göra mer strikta typningar, det är bättre ibland att berätta Maskin för att koppla av.
Som standard är alla värden implicit kommer att ha någon typ som är standard JavaScript dynamisk typning system. TypeScript kommer att klaga om detta en hel del. Om du vill kan du inaktivera den klagande genom att ställa noImplicitAny falskt:
{
“compilerOptions”: {
“noImplicitAny”: false
}
}
Var försiktig med detta men—och detta bara tystar fel, och inte löser det grundläggande problemet. Men om du vill aktivera den här tillfälligt medan du arbetar med att skriva ut allt, detta gör att din kod för att sammanställa i tiden.