JS loyihasini ko'chirish

Ko'pchilik TypeScript ni bo'sh papkada boshlamaydi - mavjud JavaScript loyihasiga qo'shadi.

Yaxshi xabar: bu bir kunda qilinadigan ish emas va shunday bo'lishi kerak ham emas. TypeScript ataylab bosqichma-bosqich ko'chirish uchun mo'ljallangan.

Boshlang'ich holat #

export function chegirma(narx, foiz) {
  return narx - (narx * foiz) / 100;
}

import { chegirma } from "./dokon.js";

console.log(chegirma(50000, 20));
console.log(chegirma(50000));

tsx src/asosiy.js

40000
NaN

Ikkinchi chaqiruvda foiz berilmadi va natija NaN bo'ldi. Dastur yiqilmadi ham, ogohlantirmadi ham - NaN shunchaki oqib ketaveradi.

Birinchi qadam: allowJs va checkJs #

export function chegirma(narx, foiz) {
  return narx - (narx * foiz) / 100;
}

import { chegirma } from "./dokon.js";

console.log(chegirma(50000, 20));
console.log(chegirma(50000));

echo "--- faqat allowJs ---"
tsc --noEmit --allowJs && echo "xato yo_q"
echo "--- allowJs va checkJs ---"
tsc --noEmit --allowJs --checkJs 2>&1 | fold -sw 74

--- faqat allowJs ---
xato yo_q
--- allowJs va checkJs ---
src/dokon.js(1,26): error TS7006: Parameter 'narx' implicitly has an
'any' type.
src/dokon.js(1,32): error TS7006: Parameter 'foiz' implicitly has an
'any' type.

Katta loyihada checkJs ni birdan yoqish yuzlab xato beradi. Shuning uchun fayl-fayl yoqish mumkin:

export function qqs(narx) {
  return narx * 1.12;
}

console.log(qqs());

// @ts-check

export function chegirma(narx, foiz) {
  return narx - (narx * foiz) / 100;
}

console.log(chegirma(50000));

tsc --noEmit --allowJs 2>&1 | fold -sw 74

src/tekshirilgan.js(3,26): error TS7006: Parameter 'narx' implicitly has
an 'any' type.
src/tekshirilgan.js(3,32): error TS7006: Parameter 'foiz' implicitly has
an 'any' type.

Ikkala faylda ham bir xil muammo bor, lekin faqat @ts-check yozilgani haqida xabar berildi.

JSDoc bilan turlash #

.js faylda ham to'liq turlash mumkin - izohlar orqali:

// @ts-check

/**
 * Narxdan foizli chegirma ayiradi.
 *
 * @param {number} narx - boshlangich narx
 * @param {number} foiz - chegirma foizi
 * @returns {number} yakuniy narx
 */
export function chegirma(narx, foiz) {
  return narx - (narx * foiz) / 100;
}

console.log(chegirma("50000", 20));

tsc --noEmit --allowJs 2>&1 | fold -sw 74

src/dokon.js(14,22): error TS2345: Argument of type 'string' is not
assignable to parameter of type 'number'.

Fayl hali ham oddiy JavaScript - uni hech qanday qurish vositasisiz ishga tushirish mumkin. Lekin tekshiruv .ts faylidagidek ishlaydi.

// @ts-check

/**
 * @typedef {object} Mahsulot
 * @property {string} nomi
 * @property {number} narx
 */

/** @type {string[]} */
const mahsulotlar = [];
mahsulotlar.push("Olma");
mahsulotlar.push(42);

/** @type {Mahsulot} */
const m = { nomi: "Olma" };

tsc --noEmit --allowJs 2>&1 | fold -sw 74

src/turlar.js(12,18): error TS2345: Argument of type 'number' is not
assignable to parameter of type 'string'.
src/turlar.js(15,7): error TS2741: Property 'narx' is missing in type '{
nomi: string; }' but required in type 'Mahsulot'.

To'g'ri yozilganda hammasi jim:

// @ts-check

/**
 * @typedef {object} Mahsulot
 * @property {string} nomi
 * @property {number} narx
 */

/** @type {Mahsulot[]} */
const mahsulotlar = [
  { nomi: "Olma", narx: 12000 },
  { nomi: "Anor", narx: 25000 },
];

const jami = mahsulotlar.reduce((a, m) => a + m.narx, 0);
console.log(mahsulotlar.length, jami);

tsc --noEmit --allowJs && echo "tsc: xato yo_q"
tsx src/turlar.js

tsc: xato yo_q
2 37000

@ts-ignore va @ts-expect-error #

Ko'chirish paytida ba'zi xatolarni vaqtincha o'chirishga to'g'ri keladi. Ikkita yo'l bor va ular bir xil emas:

// @ts-ignore
const a: number = "Olma";
console.log(a, typeof a);

tsc --noEmit && echo "tsc: xato yo_q"
tsx src/ignore.ts

tsc: xato yo_q
Olma string

a ning turi number deb e'lon qilingan, ichida esa satr. @ts-ignore xatoni butunlay yashirdi.

@ts-expect-error esa o'zini kuzatib turadi:

// @ts-expect-error
const a: number = "Olma";

// @ts-expect-error
const b: number = 25000;

console.log(a, b);

tsc --noEmit 2>&1 | fold -sw 74

src/expect.ts(4,1): error TS2578: Unused '@ts-expect-error' directive.

Birinchisi ishladi - xato bor edi va u yashirildi. Ikkinchisi esa o'zi xato berdi: kutilgan xato yo'q ekan.

Bu juda muhim farq: kod tuzalgach, @ts-expect-error o'zining keraksizligini aytadi. @ts-ignore esa abadiy qolib ketadi.

// @ts-expect-error - eski API, #142 da tuzatiladi

.ts ga qayta nomlash #

export function chegirma(narx, foiz) {
  return narx - (narx * foiz) / 100;
}

export const mahsulotlar = [];

tsc --noEmit 2>&1 | fold -sw 74

src/dokon.ts(1,26): error TS7006: Parameter 'narx' implicitly has an
'any' type.
src/dokon.ts(1,32): error TS7006: Parameter 'foiz' implicitly has an
'any' type.

E'tibor bering: mahsulotlar = [] shikoyat qilmadi - bu 3-bobdagi rivojlanuvchi massiv turi. Xato u ishlatilganda chiqadi.

Xatolar juda ko'p bo'lsa, noImplicitAny ni vaqtincha o'chirish mumkin:

export function chegirma(narx, foiz) {
  return narx - (narx * foiz) / 100;
}

export const mahsulotlar = [];

tsc --noEmit --noImplicitAny false && echo "tsc: xato yo_q"

tsc: xato yo_q

Endi loyiha kompilyatsiya bo'ladi va siz turlarni asta-sekin qo'shasiz.

Chiqish va incremental #

export const QQS = 12;

import { QQS } from "./eski.js";
export const soliq: number = QQS;

tsc --allowJs --outDir dist
echo "--- dist ---"
ls dist

--- dist ---
eski.js
yangi.js

.js va .ts fayllar birga o'girildi va bitta papkaga tushdi - aralash loyiha shu tarzda ishlaydi.

Katta loyihada har safar hammasini qayta qurish sekin:

export const salom = "Salom";

tsc --incremental --outDir dist
echo "--- fayllar ---"
ls dist
ls *.tsbuildinfo

--- fayllar ---
asosiy.js
tsconfig.tsbuildinfo

tsconfig.tsbuildinfo - o'tgan qurish haqidagi ma'lumot. Keyingi safar faqat o'zgargan fayllar qayta ishlanadi.

Bu faylni .gitignore ga qo'shing.

Ko'chirish tartibi #

Beshinchi va oltinchi qadamlar eng ko'p mehnat talab qiladi. strictNullChecks odatda eng ko'p xato beradi - lekin eng ko'p foyda ham o'sha yerdan keladi.

Xulosa #

• Ko'chirish bosqichma-bosqich qilinadi; har bir qadamdan keyin loyiha ishlaydi.
• allowJs .js fayllarni qo'shadi, checkJs ularni tekshiradi.
• // @ts-check bitta faylni yoqadi, // @ts-nocheck bitta faylni chetlab o'tadi.
• JSDoc (@param, @returns, @type, @typedef) .js faylda to'liq turlash imkonini beradi.
• JSDoc bilan turlangan fayl hali ham oddiy JavaScript - qurish vositasini o'zgartirish shart emas.
• @ts-ignore xatoni abadiy yashiradi; @ts-expect-error keraksiz bo'lib qolganda TS2578 beradi.
• Har bir chetlab o'tishga sabab va tuzatish rejasi yozilgan izoh qo'shing.
• .ts ga o'tishda birinchi to'lqin odatda TS7006 bo'ladi; noImplicitAny: false bilan vaqt yutish mumkin.
• Barglardan ildizga qarab ko'chiring, aks holda import qilinganlar any bo'lib keladi.
• allowJs bilan .js va .ts fayllar birga o'girilib, bitta outDir ga tushadi.
• --incremental va tsconfig.tsbuildinfo takroriy qurishni tezlashtiradi; bu faylni git ga qo'shmang.
• Eng qiyin qadam - strictNullChecks, lekin eng foydalisi ham o'sha.