TypeScript के साथ Vite
In this page:
npm create vite@latest project-name -- --template vanilla-tsCore Concept
Vite एक dev server और bundler है जो development के दौरान आपकी source files को native ES modules पर serve करता है (एक पूरी bundle step को पूरी तरह skip करते हुए) और production build के लिए Rollup पर switch करता है, TypeScript support out of the box built in के साथ।
उदाहरण: Core Concept
// Vite serves native ES modules in dev, bundles with Rollup for production
console.log("Vite supports TypeScript out of the box, no config needed");Basic Setup
npm create vite@latest -- --template vanilla-ts (या react-ts, vue-ts, आदि) से scaffolding एक working tsconfig.json और dev server generate करता है बिना typed code लिखना शुरू करने के लिए किसी extra configuration की ज़रूरत के।
उदाहरण: Basic Setup
// npm create vite@latest my-app -- --template vanilla-ts
console.log("Scaffolds a working tsconfig.json and dev server instantly");Typed Example
Vite speed के लिए esbuild के through file-by-file TypeScript transpile करता है लेकिन dev server के दौरान type-check नहीं करता — vue-tsc/tsc --noEmit को vite build के साथ चलाना वह है जो असल में type errors catch करता है।
उदाहरण: Typed Example
// Vite transpiles via esbuild but doesn't type-check during dev
// vue-tsc / tsc --noEmit catches real type errors
console.log("Vite's dev server is fast because it skips type checking");Project Usage
एक असली project में, Vite का instant hot-module-replacement मतलब है कि एक typed component edit करना browser में लगभग तुरंत reflect होता है, क्योंकि पूरे bundle के बजाय सिर्फ changed module re-transpile होता है।
उदाहरण: Project Usage
// Editing a .ts file triggers instant HMR for just that module
console.log("Vite's HMR only re-transpiles the changed module");Best Practices
Type-checking को एक separate step के रूप में रखें (CI या एक pre-commit hook में चलाई एक tsc --noEmit script) क्योंकि Vite का अपना dev/build pipeline speed के लिए intentionally इसे skip करता है और अपने आप type errors catch नहीं करेगा।
उदाहरण: Best Practices
// package.json: "build": "tsc --noEmit && vite build"
console.log("Run tsc --noEmit as a separate type-checking step");- यह मान लेना कि
vitedev के दौरान type-check करता है, जब यह सिर्फ esbuild से types strip करता है, इसलिए errors सिर्फ तब दिखते हैं जब आपtscचलाते हैं। const enumयाnamespacefeatures उपयोग करना जिन्हें full type information चाहिए, जिन्हें esbuild अच्छी तरह support नहीं करता।isolatedModulesऔर type-onlyimport typeभूल जाना, re-exported types को fail करने का कारण बनते हुए।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: