
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:

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”?
İçindekiler
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.

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:
- TypeScript’i şununla yükle:
npm i typescript
- adlı bir klasör oluşturun
example
ve içine cd yapın (terminalinizde) - adlı bir dosya oluştur
hello.world.ts
- 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.

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

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ı 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

Ç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

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:
- Uygulama iş mantığınız, API ve HTTP’leriniz için net türler tanımlayın
@types
Tüm kitaplıklarınız için paketleri kullanınpackage.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çindepackage.json
dosyası).- 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.
- Uygulamanızın GÇ parçalarını, veritabanı katmanlarını, kuyruklarını vb. Dönüştürün.
- 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 --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
Veyatest
veyaconfig
dizinindeki tüm dosyaları okuruz (include
bayrağı kullanarak ).- JavaScript dosyalarını girdi olarak kabul ediyoruz (
allowJs
bayrağı kullanarak ). - Tüm çıktı dosyalarını
build
(kullanarakoutDirflag
).
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 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 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 – 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 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-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 aşağıdaki konular etrafında dönüyordu biz dahili olarak sunulur:
- TypeScript’in neden harika olduğunu düşündüğümüzü açıklayın
- TypeScript nedir
- 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.
- 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.
- 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 ) teşvik edin ! Şirketimizde,ts-check
yakalayan gerçekten harika bazı hatalar hazırladık ve TypeScript derleyicisinin JS belgelerini veyats-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 . - 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ı. - Ç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.
- 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.
- Herkese açık bir çekme isteği oluşturun. Onay için mümkün olduğunca fazla destek almaya çalışmanızı öneririm.

yaşasın!
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..
Dilerseniz Diğer Blog Sayfalarımızı Göz Atabilirsiniz…
Hata!
Yorumunuz Çok Kısa, Yorum yapabilmek için en az En az 10 karakter gerekli