O'rnatish va tsconfig.json - TypeScript

1-bobda tsc ga fayl nomini berib ishlatdik. Haqiqiy loyihada bunday qilinmaydi - sozlama faylga yoziladi va tsc argumentsiz chaqiriladi.

Bu bobda nima uchun shundayligini ko'ramiz, va yo'lda ikkita jiddiy tuzoqqa duch kelamiz.

O'rnatish #

TypeScript loyihaga ishlab chiqish bog'liqligi sifatida qo'shiladi:

Natija

npm install --save-dev typescript tsx

Nima uchun global emas? Chunki har bir loyiha o'z versiyasini ishlatishi kerak. Bir loyiha TypeScript 5.7 da, boshqasi 5.2 da bo'lishi mumkin - global o'rnatish ularni to'qnashtiradi.

Terminal

tsc --version

Natija

Version 5.7.3

`tsc --init` #

TypeScript sozlama faylini o'zi yaratib beradi:

Terminal

tsc --init

Natija

Created a new tsconfig.json with:

  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

Natijada 111 qatorli fayl hosil bo'ladi - deyarli hammasi izoh. Bu foydali: har bir sozlama nima qilishini o'sha yerda o'qish mumkin.

--init ning standart qiymatlari eskirgan

E'tibor bering: target: es2016 va module: commonjs.

2016 - o'n yildan ortiq oldingi standart. Zamonaviy Node va brauzerlar ancha ko'p narsani qo'llab-quvvatlaydi, demak tsc keraksiz "orqaga moslashtirish" kodini yozadi.

Yangi loyihada target ni es2022 yoki undan yuqori qiling.

Ishchi sozlama #

--init yaratgan faylni o'zimiznikiga almashtiramiz. Bu darslikda ishlatiladigan minimal, lekin to'g'ri sozlama:

JSON

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "moduleResolution": "bundler",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src"]
}

Sozlama	Nima qiladi
`target`	Qaysi JavaScript versiyasiga aylantiriladi
`module`	Modul tizimi: `esnext`, `commonjs`, `nodenext`
`moduleResolution`	Import yo'llari qanday qidiriladi
`strict`	Barcha qat'iy tekshiruvlarni yoqadi
`outDir`	Natija qayerga yoziladi
`rootDir`	Manba kod qayerda
`include`	Qaysi fayllar kompilyatsiya qilinadi

Kompilyatsiya qiladigan bitta fayl yozamiz:

export const salom = (n: string): string => `Salom, ${n}!`;
console.log(salom("Husanboy"));

Endi tsc ni argumentsiz chaqiramiz:

Terminal

tsc
find . -name 'salom.js' -not -path './node_modules/*'

Natija

./dist/salom.js

Manba src/salom.ts edi, natija dist/salom.js ga tushdi - outDir va rootDir ishladi.

Terminal

node dist/salom.js

Natija

Salom, Husanboy!

Tuzoq bir: fayl nomini bersangiz, tsconfig e'tiborsiz qoladi #

Bu TypeScript dagi eng ko'p adashtiradigan xatti-harakat.

Terminal

rm -rf dist
tsc src/salom.ts
find . -name 'salom.js' -not -path './node_modules/*'

Natija

./src/salom.js

dist ga emas, src ga yozdi.

Sabab: buyruq satrida fayl ko'rsatsangiz, tsc tsconfig.json ni umuman o'qimaydi. Ya'ni outDir, rootDir, include - hammasi e'tiborsiz qoladi.

Bir xil kompilyator, ikki xil natija

Tuzoq ikki: `strict` ham e'tiborsiz qoladi #

Birinchisi noqulaylik edi. Bu esa xavfli.

null bo'lishi mumkin bo'lgan qiymat ishlatilgan fayl yaratamiz:

export function uzunlik(s: string | null): number {
  return s.length;
}

Terminal

tsc --noEmit > n1.txt 2>&1
echo "kod: $?"
cat n1.txt

Natija

kod: 2
src/qatiy.ts(2,10): error TS18047: 's' is possibly 'null'.

Xato topildi. Endi xuddi shu faylni nomi bilan beramiz:

Terminal

tsc src/qatiy.ts --noEmit > n2.txt 2>&1
echo "kod: $?"
cat n2.txt

Natija

kod: 0

Hech qanday xato yo'q. Chunki tsconfig.json o'qilmadi, demak strict yoqilmadi va strictNullChecks o'chiq qoldi.

Terminal

rm -f src/qatiy.ts
tsc --noEmit && echo "endi loyiha toza"

Natija

endi loyiha toza

Bu nima uchun xavfli

Tasavvur qiling: CI da tsc ishlaydi va hammasi yashil. Keyin kimdir tezkor tekshiruv uchun tsc src/fayl.ts yozadi, xato ko'rmaydi va "hammasi joyida" deb o'ylaydi.

Aslida u butunlay boshqa sozlamalar bilan tekshirgan bo'ladi.

Qoida: tsc ni har doim argumentsiz chaqiring. Bitta faylni tekshirish kerak bo'lsa, include ni vaqtincha o'zgartiring yoki alohida tsconfig.tekshir.json yarating va tsc -p tsconfig.tekshir.json deb ishga tushiring.

`strict` nimani yoqadi? #

"strict": true - bu bitta sozlama emas, balki bir nechtasining qisqartmasi:

Sozlama	Nimani taqiqlaydi
`noImplicitAny`	Turi aniqlanmagan parametr
`strictNullChecks`	`null` va `undefined` ni e'tiborsiz qoldirish
`strictFunctionTypes`	Funksiya turlarining xavfli mosligi
`strictBindCallApply`	`bind`, `call`, `apply` da noto'g'ri argument
`strictPropertyInitialization`	Sinf maydonini ishga tushirmaslik
`noImplicitThis`	Turi noma'lum `this`
`useUnknownInCatchVariables`	`catch (e)` da `e` ni `any` deb olish

Yakuniy sozlamani ko'rish uchun:

Terminal

tsc --showConfig 2>&1 | head -12

Natija

{
    "compilerOptions": {
        "target": "es2022",
        "module": "esnext",
        "moduleResolution": "bundler",
        "strict": true,
        "outDir": "./dist",
        "rootDir": "./src",
        "allowSyntheticDefaultImports": true,
        "resolvePackageJsonExports": true,
        "resolvePackageJsonImports": true,
        "resolveJsonModule": true,

--showConfig barcha standart qiymatlarni ham ko'rsatadi - qaysi sozlama qayerdan kelayotgani noaniq bo'lganda juda foydali.

Yangi loyihada strict ni darhol yoqing

Mavjud loyihaga qo'shayotgan bo'lsangiz, birdan yoqish yuzlab xato beradi.

Unda bosqichma-bosqich boring:

Natija

"strict": false,
"noImplicitAny": true

Keyin strictNullChecks, so'ng qolganlari. 18-bobda bu strategiyani batafsil ko'ramiz.

Yangi loyihada esa birinchi kundan strict: true. Keyin yoqish ancha qimmatga tushadi.

`include` va `exclude` #

include qaysi fayllar kompilyatsiya qilinishini belgilaydi. Eski, tuzatilmagan kod ham unga tushib qolishi mumkin:

export const eski: number = "matn";

Terminal

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

Natija

src/eski/arxiv.ts(1,14): error TS2322: Type 'string' is not assignable to
type 'number'.

exclude bilan chiqarib tashlanadi:

JSON

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "moduleResolution": "bundler",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src"],
  "exclude": ["src/eski"]
}

Terminal

tsc --noEmit && echo "xato yo'q"

Natija

xato yo'q

exclude - vaqtinchalik chora

Kodni tekshiruvdan chiqarish muammoni hal qilmaydi, faqat ko'rinmas qiladi.

To'g'ri ishlatilishi: ko'chirish davomida eski papkani vaqtincha chetlab o'tish. Har hafta undan bittadan faylni chiqarib, tuzatib, qaytarish.

exclude doimiy bo'lib qolsa - u endi texnik qarz.

Ishlab chiqish oqimi #

Amalda ikkita buyruq ishlatiladi:

Buyruq	Qachon
`tsx src/asosiy.ts`	Ishlab chiqish - tezda ishga tushirish
`tsc --noEmit`	Tekshirish - CI va kommitdan oldin
`tsc`	Qurish - ishlab chiqarish uchun
`tsc --watch`	Fon rejimida uzluksiz tekshirish

tsx ham tsconfig.json ni o'qiydi:

Terminal

tsx src/salom.ts

Natija

Salom, Husanboy!

package.json ga qisqartmalar yozib qo'yiladi:

JSON

{
  "scripts": {
    "dev": "tsx src/asosiy.ts",
    "tekshir": "tsc --noEmit",
    "qur": "tsc"
  }
}

tsx turlarni TEKSHIRMAYDI

tsx tez ishlaydi, chunki u turlarni shunchaki o'chirib tashlaydi va tekshirmaydi.

Ya'ni tsx bilan ishlagan kod tsc da xato berishi mumkin.

Shuning uchun CI da albatta tsc --noEmit bo'lsin - tsx ishlagani yetarli emas.

Xulosa #

TypeScript loyihaga o'rnatiladi (--save-dev), global emas - har bir loyiha o'z versiyasini ishlatadi.
tsc --init izohlangan sozlama fayli yaratadi, lekin uning standart qiymatlari (es2016, commonjs) eskirgan.
tsc argumentsiz chaqirilganda tsconfig.json o'qiladi - bu yagona to'g'ri usul.
Fayl nomini bersangiz, tsconfig.json umuman o'qilmaydi: natija dist ga emas, manba yoniga tushadi.
Undan ham yomoni - strict ham o'chiq qoladi va xatolar jimgina o'tib ketadi.
strict: true - ettita alohida tekshiruvning qisqartmasi.
--showConfig yakuniy, standartlar bilan to'ldirilgan sozlamani ko'rsatadi.
exclude - ko'chirish davridagi vaqtinchalik chora; doimiy bo'lib qolsa, texnik qarzga aylanadi.
tsx ishlab chiqish uchun tez, lekin turlarni tekshirmaydi.
CI da har doim tsc --noEmit bo'lsin.

Amaliy topshiriq

Yangi papkada npm init -y va npm i -D typescript tsx bajaring.
tsc --init bilan sozlama yarating va target ni ko'ring.
Uni es2022 ga o'zgartiring.
outDir va rootDir qo'shib, tsc ni ishga tushiring.
Xuddi shu faylni tsc src/fayl.ts bilan kompilyatsiya qilib, natija qayerga tushganini toping.
null bo'lishi mumkin qiymat bilan ikkala usulni sinang va farqni yozing.
--showConfig chiqishini o'qib, strict nimalarni yoqqanini sanang.
exclude bilan bitta papkani chiqarib tashlang.
package.json ga dev, tekshir va qur skriptlarini qo'shing.
tsx da ishlaydigan, lekin tsc da xato beradigan kod yozing.

O'rnatish #

tsc --init #

Ishchi sozlama #

Tuzoq bir: fayl nomini bersangiz, tsconfig e'tiborsiz qoladi #

Tuzoq ikki: strict ham e'tiborsiz qoladi #

strict nimani yoqadi? #

include va exclude #

Ishlab chiqish oqimi #

Xulosa #

Xatolik topdingizmi?

`tsc --init` #

Tuzoq ikki: `strict` ham e'tiborsiz qoladi #

`strict` nimani yoqadi? #

`include` va `exclude` #