TypeScript’ga migratsiya
JavaScript-dan TypeScript-ga o‘tish kod bazasining barqarorligi va ishlab chiquvchi tajribasini sezilarli darajada yaxshilashi mumkin.
Ushbu qo‘llanma sizga jarayonni bosqichma-bosqich yo‘naltiradi.
Tayyorgarlik bosqichi
Kod bazangizni baholang
Migratsiyani boshlashdan oldin:
- Kod bazasining hajmi va murakkabligini aniqlang
- Qurilish jarayoni va bog‘liqliklarni hujjatlashtiring
- Mavjud tip ta’riflarini (
.d.tsfayllarini) tekshiring - Alohida e’tibor talab qiladigan muhim yo‘llarni aniqlang
Versiya boshqaruvini sozlash
Sizda toza git ombori yoki ekvivalentiga ega ekanligingizga ishonch hosil qiling:
# Create a new branch for the migration
git checkout -b typescript-migration
# Commit your current state
git add .
git commit -m "Pre-TypeScript migration state"
Konfiguratsiya
TypeScript-ni o‘rnating
# Install TypeScript as a dev dependency
npm install --save-dev typescript @types/node
tsconfig.json yarating
Boshlash uchun asosiy tsconfig.json yarating:
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
Eslatma: target ni minimal qo‘llab-quvvatlanadigan muhitlar asosida sozlang.
Migratsiya yondashuvlari
Asta-sekin migratsiya
Bir vaqtning o‘zida bitta faylni ko‘chiring, qolganlarini JavaScript sifatida saqlang.
{
"compilerOptions": {
"allowJs": true,
"checkJs": true
}
}
Best for: Katta kod bazalari, minimal buzilish
Birdaniga migratsiya
Barcha .js fayllar nomini .ts ga o‘zgartiring va xatolarni tuzating.
# Rename all JS files to TS
find src -name "*.js" -exec sh -c 'mv "$0" "${0%.js}.ts"' {} \;
Best for: Kichik va o‘rta loyihalar, yashil maydon loyihalari
Muhim eslatma
Yirik loyihalarda uzilishlarni minimallashtirish va jarayonni boshqarish mumkin bo‘lishi uchun bosqichma-bosqich migratsiya yondashuvini qat’iy tavsiya qilamiz.
Bosqichma-bosqich migratsiya
Konfiguratsiya bilan boshlang
Tavsiya etilgan sozlamalar bilan asosiy tsconfig.json yarating:
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist",
"rootDir": "./src",
"allowJs": true,
"checkJs": true,
"noEmit": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
JavaScript uchun Turni tekshirishni yoqing
Turni tekshirishni yoqish uchun JavaScript fayllaringizning yuqori qismiga // @ts-check qo‘shing:
// @ts-check
/** @type {string} */
const name = 'John';
// TypeScript will catch this error
name = 42; // Error: Type '42' is not assignable to type 'string'
Eslatma: // @ts-ignore dan foydalanib, muayyan qatorlar turini tekshirishni o‘chirib qo‘yishingiz mumkin.
Fayllar nomini .ts ga o‘zgartiring
Muhim bo‘lmagan fayllardan boshlang va ularni .js dan .ts ga o‘zgartiring:
# Rename a single file
mv src/utils/helpers.js src/utils/helpers.ts
# Or rename all files in a directory (use with caution)
find src/utils -name "*.js" -exec sh -c 'mv "$0" "${0%.js}.ts"' {} \;
Turga izoh qo‘shish
Kodingizga asta-sekin turdagi izohlarni qo‘shing:
// Before
function add(a, b) {
return a + b;
}
// After
function add(a: number, b: number): number {
return a + b;
}
// With interface
interface User {
id: number;
name: string;
email?: string;
}
function getUser(id: number): User {
return { id, name: 'John Doe' };
}
Qurilish va sinov skriptlarini yangilang
TypeScript kompilyatsiyasini kiritish uchun package.json-ni o‘zgartiring:
{
"scripts": {
"build": "tsc",
"dev": "tsc --watch",
"test": "jest"
}
}
Eslatma: TypeScript fayllari bilan ishlash uchun test konfiguratsiyasini yangilaganingizga ishonch hosil qiling.
Migratsiya vositalari
ts-migratsiya
JavaScript-ni TypeScript-ga ko‘chirish uchun avtomatlashtirilgan vosita
npx ts-migrate-full .
TypeStat
JavaScript-ni xavfsizlik turi bilan TypeScript-ga o‘zgartiradi
npx typestat
@types paketlar
O‘zingizning bog‘liqliklaringiz uchun turdagi ta’riflarni o‘rnating
npm install --save-dev @types/react @types/node
TypeScript migratsiyasi uchun eng yaxshi amaliyotlar
Kichik va takrorlashni boshlang
- Utility funksiyalari va UI bo‘lmagan komponentlar bilan boshlang
- Bir vaqtning o‘zida bitta fayl yoki modulni ko‘chiring
- Har bir muvaffaqiyatli migratsiya bosqichidan keyin amal qiling
TypeScript xususiyatlaridan foydalaning
Misol
// Use type inference where possible
const name = 'John'; // TypeScript infers 'string'
const age = 30; // TypeScript infers 'number'
// Use union types for flexibility
type Status = 'active' | 'inactive' | 'pending';
// Use type guards for runtime checks
function isString(value: any): value is string {
return typeof value === 'string';
}
Uchinchi tomon kutubxonalari bilan ishlash
- O‘zingizning bog‘liqliklaringiz uchun
@typespaketlarini o‘rnating - Turlarsiz kutubxonalar uchun deklaratsiya fayllarini yarating
- Global turdagi kengaytmalar uchun
declare moduledan foydalaning
Umumiy muammolar va yechimlar
Dinamik xususiyatlar
Problem: JavaScript ko‘pincha obyektlardan lug‘at sifatida foydalanadi.
Misol
// Before
const user = {};
user.name = 'John'; // Error: Property 'name' does not exist
Solution: Indeks imzolaridan foydalaning yoki tasdiqlarni yozing.
Misol
// Option 1: Index signature
interface User {
[key: string]: any;
}
const user: User = {};
user.name = 'John'; // OK
// Option 2: Type assertion
const user = {} as { name: string };
user.name = 'John'; // OK
this Kontekst bilan ishlash
Problem: this callback funksiyasilarda majburiy muammolar.
Misol
class Counter {
count = 0;
increment() {
setTimeout(function() {
this.count++; // Error: 'this' is not defined
}, 1000);
}
}
Solution: Arrow funksiyalaridan foydalaning yoki this bog‘lang.
Misol
// Solution 1: Arrow function
setTimeout(() => {
this.count++; // 'this' is lexically scoped
}, 1000);
// Solution 2: Bind 'this'
setTimeout(function(this: Counter) {
this.count++;
}.bind(this), 1000);
Xulosa
JavaScript-dan TypeScript-ga o‘tish kodlar bazasiga muhim, ammo foydali sarmoyadir.
Ushbu qo‘llanmaga amal qilib, siz o‘tishni muammosiz va bosqichma-bosqich amalga oshirishingiz mumkin.
Asosiy xulosalar:
- Qattiq
tsconfig.jsonkonfiguratsiyasidan boshlang - Sekin-asta ko‘chirish uchun
allowJsvacheckJsdan foydalaning - Xatolarni erta aniqlash uchun TypeScript turi tizimidan foydalaning
- TypeScript-ni qo‘llab-quvvatlash uchun qurish va sinov jarayonlarini yangilang
- Yuqorida ko‘rsatilgan naqshlar bilan umumiy muammolarni hal qiling
Migratsiya hodisa emas, balki jarayon ekanligini unutmang.
O‘tish davrida aralash kod bazasiga ega bo‘lish yaxshi.
Eng muhimi, kod sifatini saqlab qolish bilan birga taraqqiyotni davom ettirishdir.
Migratsiyani boshlashga tayyormisiz?
Loyihangizda TypeScript-ni sozlashdan boshlang va tur izohlarini asta-sekin qo‘shib boring.
TypeScript kompilyatori sizning kodingizni yanada mustahkam va barqaror qilish jarayoni bo‘yicha sizga yo‘l ko‘rsatadi.
Qo‘shimcha ma’lumot olish uchun official TypeScript migration guide ga qarang.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!