# JavaScript Projesine TypeScript Nasıl Eklenir

Kaynak: https://webodasi.com/javascript-projesine-typescript-nasil-eklenir/
Yazar: Ufuk Parlak
Yayın: 2020-09-06
Güncelleme: 2020-09-06

![](https://webodasi.com/wp-content/uploads/2020/09/1_9XMpTyccrky0eW5Wz6DoWQ-1024x511.png)

 

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 undefined`istisnalar, ü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:

 

![](https://webodasi.com/wp-content/uploads/2020/09/typescript-vs-javascript-1-.png)

Daha iyisini yapabiliriz!

 

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 `flow`ve 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.

 

![](https://webodasi.com/wp-content/uploads/2020/09/superset.png)

Javascript biliyorsanız, oranın yarısından fazlasısınız demektir.

 

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

 

İkincisi, `tsc`ts 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 `example`ve 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. `tsc`TypeScript 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.

 

![](https://webodasi.com/wp-content/uploads/2020/09/typescript-migration-steps.png)

Daktilo geçiş süreci, yalnızca değeri kanıtlarsanız süreç boyunca yineleyin.

 

### "İnsan için küçük adım" yaklaşımı - Mevcut uygulamalar için TS desteği ekleme

 

![](https://webodasi.com/wp-content/uploads/2020/09/small-step.jpeg)

Bir geliştirici için küçük bir adım. 
türler harika :)

 

İ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 typescript`bö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ı](https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html) kullanmayı içerir . `d.ts`Dosyaları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

 

![](https://webodasi.com/wp-content/uploads/2020/09/future.jpeg)

Daktilo iskeleti, parlak bir gelecek sağlamanın yoludur!

 

Ç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](https://github.com/microsoft/TypeScript-Node-Starter#getting-started) , 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**

 

![](https://webodasi.com/wp-content/uploads/2020/09/allin.jpeg)

Ben varım! 
Her şeyi daktilo edelim!

 

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. `@types`Tü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.json`dosyası).
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.

 

![](https://webodasi.com/wp-content/uploads/2020/09/champagne.jpeg)

Bir kutlama sebebidir :)

 

Bu süreci kolaylaştırmak için tasarlanmış otomatik araçlar olduğunu unutmayın, örneğin Airbnb ekibinden [ts-migrate](https://github.com/airbnb/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 --init`komut 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:

 

- `src`Veya `test`veya `config`dizinindeki tüm dosyaları okuruz ( `include`bayrağı kullanarak ).
- JavaScript dosyalarını girdi olarak kabul ediyoruz ( `allowJs`bayrağı 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 `dist`oluşturma komutlarımızın çoğuna eklemeyle ilgiliydi . Ayrıca `build-dist`kod 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 `.ts`aktarı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 `.ts`dosyalar 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](https://www.npmjs.com/package/source-map-support) denen bir çözüm var !

 

Bu, yığın izlerinin `.ts`alışı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-support`uygulamanı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 `nodejs`bu, `--enable-source-maps`[bayrak](https://github.com/nodejs/node/pull/29564) 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.

 

`.travis`Dosyamı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.xz`dosyada "paketleme" `build-dist`ve `dist`klasö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](https://github.com/vvakame/typescript-formatter) - ancak daha sonra buna karşı karar verdik çünkü projeniz için iki ayrı konfigürasyon sürdürmenizi gerektiriyor (biri TypeScript kullanmak için `tsfmt`ve diğeri JavaScript kullanmak için `eslint`). Proje de kullanımdan kaldırılmış görünüyor.

 

Sonra buldum [TSLint](https://palantir.github.io/tslint/) bize yönlendirildi [typescript için eslint eklentisi](https://github.com/typescript-eslint/typescript-eslint) . 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-fix`komut 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](https://github.com/dorsev/typescript-talk/blob/master/typescript_meetup.md) 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-code`için bir açıklama eklemeye ( [// @ ts-check](https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript) ) teşvik edin ! Şirketimizde, `ts-check`yakalayan 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.d`Dosyaları açıklayın ve `@types packages`TypeScript 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.

 

![](https://webodasi.com/wp-content/uploads/2020/09/Screen-Shot-5780-10-20-at-10.09.59-AM-1024x422.png)

Bir projeye daktilo eklemek! 
yaşasın!

 

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

 

![](https://webodasi.com/wp-content/uploads/2020/09/Screen-Shot-5780-10-20-at-10.13.33-AM-1024x353.png)

 

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](https://webodasi.com/http-nasil-calisir-ve-neden-onemlidir/)Sayfalarımızı Göz Atabilirsiniz...