JavaScript Projesine TypeScript Nasıl Eklenir

Kod yazmayı seviyorum. Ve bunda gerçekten iyi olmak istiyorum. Ama her nasılsa, JavaScript yazmak hiç güçlü yanım olmadı.

Ne kadar pratik yaptığım önemli değil, aynı hatalar üretimde görünmeye devam etti: cannot read property <> of undefinedistisnalar, ünlü [Object object]dizgi ve hatta geçersiz sayıda parametrelere sahip işlev çağrıları.

Dahası, üzerinde çalıştığım kod tabanlarının çoğu gerçekten büyük JavaScript’lerdi. İşte ben olmanın nasıl hissettirdiğini gösteren güzel bir şema:

Bu yazıda, TypeScript’in neden harika (ve öyle) olduğunu açıklamamaktan kaçınacağım ve vanilya JavaScript projenizi karma bir TypeScript projesine geçirmek istiyorsanız tamamlamanız gereken görevlere odaklanacağım.

Gönderinin sonunda daha mutlu bir insan olacaksınız ve aşağıdaki soruları cevaplayabileceksiniz:

• JavaScript projeme nasıl tür ekleyebilirim?
• TypeScript nedir?
• TypeScript’i bir JavaScript projesinde nasıl kullanabilirim?
• Bir JavaScript uygulamasını TypeScript’i destekleyecek şekilde dönüştürme adımları nelerdir?
• Yapım ve paketleme ile nasıl ilgilenebilirim?
• Tüy bırakmayla nasıl ilgilenebilirim?
• TypeScript’i kuruluşuma ve geliştiricilerime nasıl “satabilirim”?

JavaScript projeme nasıl tür ekleyebilirim?

Vanilla JavaScript şu anda türleri desteklemiyor, bu nedenle bunu yapabilmek için JavaScript’in üzerinde bir tür soyutlamaya ihtiyacımız var.

Bazı yaygın soyutlamalar Facebook’un statik tip denetleyici denir kullanıyor flowve Microsoft’un dil seslendi: typescript.

Bu blog yazısı, TypeScript’in JavaScript projenize eklenmesi ve kullanımını inceleyecektir.

Typescript nedir?

TypeScript, düz JavaScript ile derlenen bir JavaScript üst kümesidir.

TypeScript birkaç bölümden oluşur. İlki TypeScript dilidir – bu, tüm JavaScript özelliklerini içeren yeni bir dildir.

İkincisi, tscts dosyalarını oluşturan ve js dosyalarını veren bir derleme motoru olan TypeScript derleyicisidir (tür sistem motoru).

TypeScript’te merhaba dünya

Örnek olarak, ilk TypeScript uygulamanızı yazmak için atmanız gereken adımlar şunlardır:

1. TypeScript’i şununla yükle: npm i typescript
2. adlı bir klasör oluşturun exampleve içine cd yapın (terminalinizde)
3. adlı bir dosya oluştur hello.world.ts
4. içine aşağıdaki kodu yazın:

const firstWords:string = "hello world"
console.info(firstWords);

Merhaba dünya TypeScript’te – İlk TypeScript programım!

ve sonra kaydedin.

5. tscTypeScript derleyicisini geçerli klasörde çalıştırmak için komutu çalıştırın.

6. hello.jsşimdi çalıştırabileceğiniz bir dosyanız olduğuna dikkat edin 🙂

7. koş node ./hello.js

TypeScript’i bir JavaScript projesinde nasıl kullanabilirim?

Bu “geçişi” yapmak için birkaç strateji vardır (şirket ve kod açısından). Aşağıda “maliyetlerine” ve ne kadar değer sağladıklarına göre sıraladım.

“Uygulama TS desteği” ile başlamanızı ve geliştirme ekibinize değerini kanıtladıktan sonra ilerlemenizi öneririm.

“İnsan için küçük adım” yaklaşımı – Mevcut uygulamalar için TS desteği ekleme

İlk önerim, iki dilin bir karışımını tek bir projede oluşturmak ve ardından tüm “gelecek” kodunu TypeScript ile yazmaktır.

Tek bir projede iki dilin birleşimi ilk bakışta oldukça kötü görünüyor, ancak TS kademeli kullanım için geliştirildiğinden bu oldukça iyi çalışıyor. İlk başta .ts dosyaları ve garip içe aktarma satırları ile JS gibi kullanılabilir.

Bu stratejide, taşınan TypeScript dosyalarını derleyeceğiz ve sadece JavaScript dosyalarını bir çıktı klasörüne kopyalayacağız.

Bu yaklaşımın en büyük yararı, geliştirme ekibi için (ve sizin için) dil ve özellikleri ile kademeli bir öğrenme eğrisi sağlamasıdır. Ayrıca, artıları ve eksileri hakkında size uygulamalı deneyim ve fikir verir.

Bu adımdan başlamanızı ve ilerlemeden önce ekibinizle birlikte tekrarlamanızı şiddetle tavsiye ederim. Hızlı bir “bunun nasıl yapılacağı” için The steps to convert a javascript application to support typescriptbölüme gidin.

İşe açık yaklaşım – Mevcut kütüphaneler için TS desteği ekleme.

TS ile biraz deneyim kazandıktan ve geliştirme ekibiniz ilerlemeye değer olduğunu kabul ettikten sonra, şirket içi kitaplıklarınızı ve modüllerinizi TS’yi destekleyecek şekilde dönüştürmenizi öneririm.

Bu iki şekilde yapılabilir:

İlk yol , bildirim dosyalarını kullanmayı içerir . d.tsDosyaların basit bir şekilde eklenmesi , TS derleyicisinin mevcut JavaScript kodunu kontrol etmesine yardımcı olur ve IDE’nizde size otomatik tamamlama desteği verir.

Bu, kitaplıkta herhangi bir kod değişikliği gerektirmediğinden “en ucuz” seçenektir. Ayrıca gelecekteki kodunuzda maksimum güç ve tür desteği sağlar.

İkinci yol , TypeScript’in tamamen yeniden yazılmasıdır; bu, zaman alıcı ve hataya açık olabilir. Ekibinize ROI değerinin uygun olduğunu kanıtlamadıkça, buna karşı bir tavsiyede bulunurum.

İskelet – geleceğe doğru bir adım

Çoğu geliştiricinin “tembel” olduğunu ve uygulamalarını genellikle bir iskeletten kopyalayarak (genellikle günlük kaydı, ölçümler, yapılandırma vb. İçerir) başlattığını varsayıyorum.

Bu adım, şirketiniz için “resmi” bir iskelet oluşturarak parlak bir geleceğe doğru ilerlemenize yardımcı olur. % 100 TS olacaktır ve varsa eski JS iskeletini geçersiz kılar.

Bu typcript-node-starter , başlamak için gerçekten iyi bir ilk projedir.

Her şey dahil – Tam bir kod tabanını JS’den TS’ye dönüştürme

Bu seçenek, JavaScript kodundan TypeScript’e tam bir yeniden yazma gerektirir.

Uygulamanın tamamen yeniden yazılmasını ve TypeScript ve özelliklerinin derinlemesine bilgi sahibi olmasını gerektirdiğinden, bunu TS geçiş sürecinde son bir adım olarak yapmanızı tavsiye ederim.

Böyle bir yeniden yazma işlemini (bu uzun bir işlemdir) aşağıdaki şekilde yapabilirsiniz:

1. Uygulama iş mantığınız, API ve HTTP’leriniz için net türler tanımlayın
2. @typesTüm kitaplıklarınız için paketleri kullanın package.json. Orada destek TS dışarı kütüphanelerin çoğu ve bu süreçte ben (sadece ekleyerek hepsini tek tek göç öneririz @types/<package_name>senin içinde package.jsondosyası).
3. Uygulamanızın mantıksal bileşenlerini önem sırasına göre dönüştürün. İş mantığı ne kadar benzersiz olursa o kadar iyidir.
4. Uygulamanızın GÇ parçalarını, veritabanı katmanlarını, kuyruklarını vb. Dönüştürün.
5. Testlerinizi dönüştürün.

Bu süreci kolaylaştırmak için tasarlanmış otomatik araçlar olduğunu unutmayın, örneğin Airbnb ekibinden ts-migrate .

Bu sorunu farklı bir perspektiften ele alır ve tüm dosyaları TypeScript’e dönüştürür. Ayrıca, tüm kod tabanı ilk günden itibaren TypeScript iken kademeli iyileştirmelere (yukarıdaki adımlarda belirtildiği gibi) izin verir.

TypeScript’i desteklemek için bir JavaScript uygulaması nasıl dönüştürülür.

Tipleri yükle

tarafından çalışan: npm install typescript.

Typescript yapılandırma dosyası

CLI’nizdeki tsc --initkomut kullanılarak oluşturulabilen bir typcript yapılandırma dosyası ekleyin .

İşte ilk yapılandırmamızın nasıl göründüğüne dair bir örnek:

{
 "compilerOptions": {
   "target": "esnext",
   "module": "commonjs",
   "allowJs": true,
   "checkJs": false,
   "outDir": "dist",
   "rootDir": ".",
   "strict": false,
   "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
   "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
   "declaration": true, /* Generates corresponding '.d.ts' file. */
   "strictNullChecks": true,
   "resolveJsonModule": true,
   "sourceMap": true,
   "baseUrl": ".",
   "paths": {
    "*": [
      "*",
      "src/*",
      "src/setup/*",
      "src/logic/*",
      "src/models/*",
      "config/*"
    ]
  },
 },
  "exclude": ["node_modules", "dist"],
  "include": [
    "./src",
    "./test",
    "./*",
    "./config" 
  ]
}

Yukarıda dikkat edilmesi gereken birkaç nokta:

• srcVeya testveya configdizinindeki tüm dosyaları okuruz ( includebayrağı kullanarak ).
• JavaScript dosyalarını girdi olarak kabul ediyoruz ( allowJsbayrağı kullanarak ).
• Tüm çıktı dosyalarını build(kullanarak outDirflag).

Projenizde ilk .TS dosyanızı oluşturun

Basit bir TypeScript dosyası ekleyerek (veya gerçekten basit bir JS dosyasını TS dosyaya değiştirerek) başlamanızı ve dağıtmanızı öneririm. Bu geçişi her seferinde bir adım atın.

Package.json dosyanıza dikkat edin

İşte package.jsonöncesi ve sonrası görünümümüz:

{
  "scripts": {
    "start": "node ./application.js",
    "mocha": "mocha --recursive --reporter spec -r test/bootstrap.js",
    "test": "npm run mocha -- test/ -r test/integration/bootstrap.js", 
  }
}

Önce

{
  "scripts": {
    "start": "node ./dist/application.js",
    "build-dist": "./node_modules/typescript/bin/tsc",
    "mocha": "mocha --recursive --reporter spec -r ./dist/test/bootstrap.js",
    "test": "npm run mocha -- ./dist/test/ -r ./dist/test/integration/bootstrap.js"
  }
}

Sonra

Gördüğünüz gibi, değişikliklerin çoğu öneki distoluşturma komutlarımızın çoğuna eklemeyle ilgiliydi . Ayrıca build-distkod tabanımızı derleyen ve tüm dosyaları dist.

Kaynak haritası desteği ekleyin

Projenize TypeScript eklerken en büyük sorunlardan biri, yazdığınız kod ile üretimde gerçekten çalışan kod arasına bir dolaylama katmanı eklemenizdir (çünkü  çalışma zamanında .tsaktarılır .js).

Örneğin, aşağıdaki TypeScript programını hayal edin:

const errorMessage: string = "this is bad"

throw new Error(a)

Çalıştırdığımızda, aşağıdaki yığın izini atacak:

Error: this is bad
    at Object.<anonymous> (/Users/dorsev/work/git/example/hello.js:3:7)

Bekle! ancak daktilo kodumuzda sadece 2 satır var!

Kod tabanımız yalnızca .tsdosyalar içerdiğinden bu sorunludur . Ve çoğu üretim kodu yüzlerce satır içerdiğinden, bu sayıları ve dosyaları doğru bir şekilde çevirmek gerçekten zaman alıcı olacaktır.

Neyse ki bizim için bunun için kaynak haritası desteği denen bir çözüm var !

Bu, yığın izlerinin .tsalışık olduğumuz gibi uygun dosya adlarına ve satır numaralarına sahip olmasını sağlamamıza olanak tanır 🙂

Bu, npm install source-map-supportuygulamanızın ilk satırlarına aşağıdaki satırı ekleyerek ve ardından ekleyerek yapılabilir :

require(‘source-map-support’).install();

Kod artık şöyle görünür:

require('source-map-support').install();
const a:string = "this is bad"
throw new Error(a)

merhaba.world.ts

Ve onu derlediğimizde çalıştırıyoruz tsc --sourcemap hello.ts. Şimdi harika olan aşağıdaki yığın izini alıyoruz 🙂

Error: this is bad
    at Object.<anonymous> (/Users/dorsev/work/git/example/hello.ts:3:7)

Uygulamasının son sürümlerinde nodejsbu, --enable-source-mapsbayrak kullanılarak yerel olarak desteklenir .

Yapınıza (Travis) ve ambalajınıza nasıl özen göstermelisiniz?

Yapı yapılandırma dosyamızdaki önceki ve sonraki değişiklikleri inceleyelim.

.travisDosyamız daha önce böyle görünüyordu (basitleştirilmiş baskı):

jobs:
  include:
  - &build-and-publish
    before_script:
    - npm install --no-optional --production
    - npm prune --production
    before_deploy:
     - XZ_OPT=-0 tar --exclude=.git --exclude=reports.xml --exclude=${ARTIFACTS_MAIN_DIR}
       --exclude=.travis.yml --exclude=test -cJf "${ARTIFACTS_PATH}/${REPO_NAME}".tar.xz * .??*
  
  - &test
    before_script:
     - npm install --no-optional
    script:
     - echo "Running tests"
     - npm run lint && npm test

Typecript’ten önce basitleştirilmiş .travis

Ve işte böyle görünüyordu:

jobs:
  include:
  - &build-and-publish
    before_script:
    - npm install --no-optional --production
    - npm run build-dist  # Build dist folder
    - npm prune --production
    before_deploy:
     - cp -rf config/env-templates ./dist/config/
     - cp -rf node_modules ./dist/
     - cd dist
     - XZ_OPT=-0 tar --exclude=.git --exclude=reports.xml --exclude=${ARTIFACTS_MAIN_DIR} --exclude=.travis.yml --exclude=test -cJf "${REPO_NAME}.tar.xz" *
     - mv ${REPO_NAME}.tar.xz "../${ARTIFACTS_PATH}"
     - cd ..

  - &test
    before_script:
     - npm install --no-optional
     - npm run build-dist
    script:
     - echo "Running tests"
     - npm run lint && npm test

Typcript’ten sonra basitleştirilmiş .travis

Değişikliklerin çoğunun tar.xzdosyada “paketleme” build-distve distklasöre erişmeden önce komutu çalıştırmayla ilgili olduğuna dikkat edin .

Tüy bırakmayla nasıl ilgilenebilirim?

Birkaç tüy bırakma çözümü mevcuttur.

Kullandığımız ilk çözüm tsfmt idi   – ancak daha sonra buna karşı karar verdik çünkü projeniz için iki ayrı konfigürasyon sürdürmenizi gerektiriyor (biri TypeScript kullanmak için tsfmtve diğeri JavaScript kullanmak için eslint). Proje de kullanımdan kaldırılmış görünüyor.

Sonra buldum TSLint   bize yönlendirildi typescript için eslint eklentisi . Daha sonra aşağıdaki gibi yapılandırdık:

Bu bizim eslintrc.js:

module.exports = {
    rules: {
        indent: [2, 2, {
            SwitchCase: 1
        }],
        'no-multi-spaces': 2,
        'no-trailing-spaces': 2,
        'space-before-blocks': 2,
    },
    overrides: [{
        files: ['**/*.ts'],
        parser: '@typescript-eslint/parser',
        plugins: ['@typescript-eslint'],
        extends: ['plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended']
    }]
}

Aşağıdaki gibi görünen bir lint-fixkomut kullanarak çalışacak şekilde yapılandırdığımız package.json:

{
    "scripts": {
        "lint-fix": "node_modules/.bin/eslint . --fix"
    },
    "pre-commit": ["lint-fix"]
}

Daktilo yazısını geliştirme ekibinize nasıl “satabilirsiniz”

TypeScript’i kuruluşunuza tanıtmanın en kritik yönlerinden birinin “satış konuşması” ve onu geliştirme ekibinize nasıl sunduğunuz olduğuna inanıyorum.

İşte sunum aşağıdaki konular etrafında dönüyordu biz dahili olarak sunulur:

1. TypeScript’in neden harika olduğunu düşündüğümüzü açıklayın
2. TypeScript nedir
3. Bazı temel kod örnekleri. Bu bölümdeki ana nokta% 100 TypeScript’i “öğretmek” değildir, çünkü insanlar bunu kendi başlarına yapacaklardır. Bunun yerine, insanlara TypeScript okuyup yazabilecekleri ve öğrenme eğrisinin o kadar da zor olmadığı hissini verin.
4. JS geliştiricisine muazzam değerler sağlayan Union türleri ve Cebirsel veri türleri gibi gelişmiş kod örnekleri. Bu, yazılan dilin ve geliştiricilerinizi ona çekecek derleyicinin üstünde gerçek bir muamele.
5. Kullanmaya nasıl başlanır. İnsanları IDE’yi indirmeye ve sihri görmeye başlayabilmeleri vs-codeiçin bir açıklama eklemeye ( // @ ts-check ) teşvik edin ! Şirketimizde, ts-checkyakalayan gerçekten harika bazı hatalar hazırladık ve TypeScript derleyicisinin JS belgelerini veya ts-check) tür ek açıklamaları kullanarak onlara ne kadar hızlı yardımcı olabileceğini göstermek için canlı bir demo (2-3 dakika) yaptık .
6. Bazı özellikleri derinlemesine inceleyin. ts.dDosyaları açıklayın ve @types packagesTypeScript kod tabanlarınızda gerçekten erken dönemde karşılaşacağınız şeylerden bazıları.
7. Çalışmanızdan canlı PR’ler. Erken oluşturduğumuz PR’yi gösterdik ve insanları bunu gözden geçirmeye ve kendileri denemeye teşvik ettik.
8. Bazı harika kaynakları paylaşın. İnternette çok fazla içerik var ve iyiyi kötüden anlamak zor. Ekip arkadaşlarınız sağlam bir şeyler yapın ve daha derine inin ve kullandığınız ve ihtiyaç duyduğunuz araçlar hakkında kaliteli içerik bulmaya çalışın. Kaynaklarım için aşağı kaydırın.
9. Herkese açık bir çekme isteği oluşturun. Onay için mümkün olduğunca fazla destek almaya çalışmanızı öneririm.

10. Kuruluşunuzda değişiklik hakkında olumlu bir dedikodu yaratın!

Bu listeyi ekibinize, standartlarınıza ve zaman kısıtlamalarına göre değiştirmenizi şiddetle tavsiye ederim.

Sonuç

Typescript süper harika ! Üretim sınıfı yazılım yazıyorsanız ve iş gereksinimleri ve kullanılabilirliği yüksekse, typcript’i denemenizi şiddetle tavsiye ederim.

Her seferinde bir adım atmayı unutmayın. Yeni diller ve çerçeveler zordur, bu nedenle bu süreci ilerletmeden önce kendinizi ve ekibinizi öğrenmek ve eğitmek için zaman ayırın.

Kısa bir geri bildirim döngüsü ve değer teklifi oluşturun . Zaman ve kaynak gerektirdiği için ekibinize ve yönetiminize yeni bir dil “satmak” zordur.

Bu nedenle, geçiş sürecinizi kısa geri bildirim döngüleri ile tasarlayın ve net KPI’lar (üretimde daha az hata, daha kolay yeniden düzenleme süreleri vb.) facto standardı.  

Öğrenim kaynaklarını hazır hale getirin.. İyi Çalışmalar..

https://www.youtube.com/watch?v=vxvQPHFJDRo&feature=youtu.be

Dilerseniz Diğer Blog Sayfalarımızı Göz Atabilirsiniz…