TypeScript 2.3 sürümüne dair her şey

Bugün size yeni TypeScript 2.3 sürümümüzü duyurmanın heyecanını yaşıyoruz!

Tanışık olmayan kullanıcılar için belirtelim: TypeScript, isteğe bağlı statik türleme ve sağlam araçlar sağlayan bir JavaScript üst kümesidir. TypeScript kullanmak, kodunuzu tür denetimi yaparak JavaScript yazarken sıklıkla karşılaşılan can sıkıcı hataların önlenmesine yardımcı olabilir. Aslında TypeScript, siz daha dosyanızı kaydetmeden bile sorunları bildirebilir ve tür sisteminden yararlanarak kodu daha da hızlı yazmanıza yardımcı olabilir. Bu, gerçekten çok iyi bir düzenleme deneyimini getirir; size, önemli olan şeyleri düşünme ve test etme zamanını kazandırır.

TypeScript’in güncel kararlı sürümünü kullanmaya başlamak için NuGet üzerinden alabilir ya da npm ile aşağıdaki komutu kullanabilirsiniz:

npm install -g typescript

Visual Studio 2015 (Update 3 kullanan) kullanıcılar ve Visual Studio 2017 Update 2 Önizlemesi kullanan kullanıcılar TypeScript’i buradan yükleyebilirler. Bu, Visual Studio 2017 Update 2’nin de TypeScript’in herhangi bir yeni sürümünü eskileriyle yan yana  kullanabileceği demektir. Diğer editörler için varsayılan 2.3 desteği yakında yayınlanacak, ancak gereksindiğiniz herhangi bir sürümü almak için Visual Studio Kodu ve Sublime Text eklentisi yazabilirsiniz.

What’s new in TypeScript sayfamızda tamamını bulacaksınız, ama burada TypeScript 2.3’ün getirdiği güzel yeni özelliklerden bazılarını burada ele alalım!

JavaScript dosyalarında // @ts-check ve –checkJs ile tür denetimi

TypeScript’de, –allowJs bayrağını kullanarak dosyalarınızı JavaScript’den TypeScript’e aşamalı olarak taşıyabilmeniz için bir seçenek uzun zamandır var; ancak JavaScript kullanıcılarından duyduğumuz ortak acil sorunlardan biri JavaScript kod temellerinin geçirilmesinin ve TypeScript’den erken yarar almanın zor olduğuydu. Onun için TypeScript 2.3’de .js dosyalarında denetlemenin yeni “hafif” bir biçimini deniyoruz; bu, .ts dosyaları yazmayı gerektirmeden TypeScript yazmanın birçok avantajını sağlamakta.

Bu yeni denetim modu açıklamaları kullanarak normal JavaScript bildirimlerindeki türleri belirlemektedir. TypeScript’de olduğu gibi bu ek açıklamalar da tümüyle isteğe bağlıdır  ve çıkarım işlevi buradan yola çıkarak boşlukları tamamlar. Ancak bu modda kodunuz yine çalıştırılabilirdir ve yeni herhangi bir dönüşümden geçmesi gerekmez.

Tüm bunları mevcut geliştirme araçlarınıza dokunmadan bile deneyebilirsiniz. TypeScript’i zaten kurduysanız (npm install -g typescript), başlamanız çok kolaydır! Önce projenizin kök dizininde bir tsconfig.json oluşturun:

{

“compilerOptions”: {

“noEmit”: true,

“allowJs”: true

},

“include”: [

“./src/”

]

}

Not: Dosyalarımızın src olduğunu varsayıyoruz. Klasör adlarınız farklı olabilir.

Şimdi bir dosyada tür denetimi için tek yapmanız gereken, üst tarafına // @ts-check ile bir açıklama eklemektir. Şimdi de, tsconfig.json ile aynı klasörünüzden tsc çalıştırın; bu kadar.

// @ts-check

 

/**

* @param {string} input

*/

function foo(input) {

input.tolowercase()

//    ~~~~~~~~~~~ Error! Should be toLowerCase

}

Burada, geliştirme düzeninize TypeScript’i getirmek istemediğinizi varsaydık; ancak TypeScript, projenizi nasıl kurmak istediğiniz konusunda çok esnektir. Belki // @ts-check açıklamaları kullanmak yerine projenizin tüm JavaScript dosyalarını checkJs bayrağıyla denetlemek istediniz. Belki de denetleme sırasında TypeScript’in ES2015+ kodunuzu da derlemesini istediniz. Yalnızca bunu yapan bir tsconfig.json var:

{

“compilerOptions”: {

“target”: “es5”,

“module”: “commonjs”,

“allowJs”: true,

“checkJs”: true,

“outDir”: “./lib”

},

“include”: [

“./src/**/*”

]

}

Not: TypeScript yeni dosyalar oluşturduğu için outDir‘i  lib gibi bir başka dosyaya kurmamız gerekti. Webpack, Gulp gibi araçlar kullanıyorsanız bu gerekmeyebilir.

Sonra, sık kullandığınız kitaplıklardan herhangi biri için TypeScript bildirim dosyaları (.d.ts dosyaları) kullanmaya başlayabilir ve yazmaya başladığınız herhangi bir yeni koddan yararlanabilirsiniz. Bu tanımlar temelinde kod tamamlama ve hata denetlemeyi özellikle seveceğinizi düşünüyoruz; belki de zaten denediniz.

Bu JavaScript denetleme modu .js dosyalarında iki açıklamaya daha izin vermektedir:

  1. –checkJs açık olduğunda bir dosyanın denetlenmemesi için // @ts-nocheck
  2. Aşağıdaki satırdaki hataların yok sayılması için // @ts-ignore

Bunun linting deneyimine benzer olduğunu düşünmüş olabilirsiniz; ancak bu, linter deneyiminin yerine getirmeye çalıştığımız anlamına gelmiyor. Bunu, JavaScript’inizdeki ESLint gibi var olan araçlarla yan yana çalışabilen bütünleyici bir şey olarak görüyoruz. Her bir araç kendi güçlü özelliklerini çalıştırabilir.

Zaten TypeScript kullanıyorsanız, elinizin altında bunu çalıştırarak içindeki gerçek hataları kolayca yakalayabileceğiniz bir JavaScript kod temeli mutlaka vardır. Fakat TypeScript kullanmaya yeni başlıyorsanız, bu modun, doğrudan kullanmaya başlamanız gerekmeden TypeScript’in size neler sağlayabileceğini görmenize gerçekten yardımcı olacağını düşünüyoruz.

Dil sunucusu eklenti desteği

TypeScript’in hedeflerinden biri, JavaScript dünyasına son teknolojiyi kullanan düzenleme deneyimi sağlamaktır. Geleneksel JavaScript yapıları, yeni ECMAScript özellikleri, hatta JSX kullanımında olsun, bu deneyim, kullanıcılarımızın uzun zamandır yararlandıkları bir şey.

Bununla birlikte, konuları birbirinden ayırabilmek için, TypeScript, şablonlar gibi belli içerikleri özel biçimlere koymaktan kaçındı. Bu sorunu, Angular ekibiyle derinlemesine ele aldık. İsteğimiz, Angular kullanıcılarına şablonlarında da kodlarının diğer parçalarında sağladığımız aynı düzeydeki araçları sağlamaktı. Buna tamamlamalar, gidilecek tanımlar, hata raporlama gibi işlevler de dâhildi.

Angular ekibiyle yakın bir işbirliğiyle yaptığımız çalışma sonucunda TypeScript 2.3’ün resmi olarak bir dil sunucusu eklenti API’si sunduğunu duyurmaktan mutluyuz. Bu API, TypeScript’in zaten sunduğu normal düzenleme deneyimini zenginleştiren eklentilere izin vermektedir. Tüm bunların anlamı, birçok farklı iş yükünüz için gelişmiş düzenleme deneyiminizin olabileceğidir.

Angular kullanıcılarının deneyimini büyük ölçüde geliştiren Angular’ın Visual Studio Kod Eklentisinin ilerlemesini burada görebilirsiniz. Ancak önemli bir not, bunun bir genel API olduğudur; yani, eklenti birçok farklı içerik için yazılabilir. Örnek olarak, hazır bir TSLint dil sunucusu eklentisi ve bir TypeScript GraphQL dil sunucusu eklentisi vardır! Dil sunucusu eklentisi modelimizle Vetur eklentisi Vue.js için .vue dosyalarında da daha iyi bir TypeScript ve JavaScript düzenleme deneyimi de sağladı.

TypeScript’in farklı araç takımlarını kullanan kullanıcıları güçlendirmeye devam edeceğini umuyoruz. Kullanıcılarınıza gelişmiş bir deneyim sağlamakla ilgileniyorsanız, bu örnek eklentiye bakabilirsiniz.

Varsayılan tür bağımsız değişkenleri

Bu özelliği açıklamak için React’in bileşen API’sine basitçe bakalım. Bir React bileşeninde proplar ve olası birkaç state olacaktır. Bunu aşağıdaki gibi kodlayabilirsiniz:

class Component<P, S> {

// …

}

Burada P, props türü; S, state türüdür.

Ancak çoğu zaman state bir bileşende asla kullanılmaz. Bu durumlarda türü object ya da {} olarak yazabiliriz, ancak net olarak yazmalıyız:

class FooComponent extends React.Component<FooProps, object> {

// …

}

Bu şaşırtıcı gelmeyebilir. API’lerin sizin önemsemediğiniz bilgiler için varsayılan değer kavramları içermeleri oldukça yaygındır.

Varsayılan tür bağımsız değişkenlerini girin. Varsayılan tür bağımsız değişkenleri bizi kullanılmayan uyarlanabilir türleri düşünmekten kurtarır. TypeScript 2.3’de React.Component’i aşağıdaki gibi açıklayabiliriz:

class Component<P, S = object> {

// …

}

Şimdi de Component<FooProps> yazdığımız her yerde dolaylı olarak Component<FooProps, object> yazmış oluruz.

Bir tür parametresinin varsayılanının mutlaka kısıtlamasıyla aynı olmadığını (ancak varsayılanın kısıtlamaya atanabilir olması gerektiğini) unutmayın.

Oluşturucu ve uyumsuz oluşturucu desteği

Önceden TypeScript derleme oluşturucuları ya da yineleyicilerle çalışmayı desteklemiyordu. TypeScript 2.3 ile hem her ikisini de destekliyor hem de ECMAScript’in yeni uyumsuz oluşturucuları ve uyumsuz yineleyicilerine destek getiriyor.

Bu, –downlevelIteration bayrağını kullanırken tercih edilebilen bir özelliktir. RC blog sayfamızda bu konuda daha fazlasını okuyabilirsiniz.

Bu işlevselliğin anlamı, TypeScript’in daha eski sürümler hedeflenirken ECMAScript’in en son sürümünü daha kapsamlı olarak desteklemesidir. Ayrıca, TypeScript’in şimdi redux-saga gibi kitaplıklarla daha iyi çalışabilmesi de demektir.

Daha iyi yardım, daha zengin başlatma, daha hızlı katılık ile daha kolay başlangıç

Kullanıcılardan duyduğumuz ortak acil sorunlardan bir diğeri de genelde başlamadaki ve yeni seçeneklerin keşfedilebilmesindeki zorluklar oldu. Kullanıcıların sıklıkla TypeScript’in JavaScript dosyalarında çalışabildiğini ya da null atanabilirlik hatalarını yakalayabildiğini bilmediklerini gördük. TypeScript’i daha ulaşılabilir, daha kolay keşfedilir ve size en ideal deneyimi sağlamaya daha yardımcı olacak hâle getirmek istedik.

Birincisi, TypeScript’in –help çıktısı seçeneklerin konularına göre gruplandığı, daha ilgili/daha ender seçeneklerin varsayılan olarak atlandığı şekilde geliştirildi. Seçeneklerin tam bir listesi için tsc –help –all girebilirsiniz.

İkincisi, kullanıcılar TypeScript’in sağladığı seçenek türlerinin çoğu zaman farkında olmadıklarından, potansiyel seçeneklerin açıklamalar bölümünde net olarak listelenmesi için TypeScript’in –init çıktısından yararlanmaya karar verdik. Bir örnek olarak, tsconfig.json çıktısı aşağıdakine benzer bir şey olacaktır:

{

“compilerOptions”: {

/*  Basic  Options */

“target”: “es5”,              /* Specify ECMAScript target version: ‘ES3’ (default), ‘ES5’, ‘ES2015’, ‘ES2016’, ‘ES2017’, or ‘ESNEXT’. */

“module”: “commonjs”,         /* Specify module code generation: ‘commonjs’, ‘amd’, ‘system’, ‘umd’ or ‘es2015’. */

// “lib”: [],                 /* Specify library files to be included in the compilation:  */

// “allowJs”: true,           /* Allow javascript files to be compiled. */

// “checkJs”: true,           /* Report errors in .js files. */

// “jsx”: “preserve”,         /* Specify JSX code generation: ‘preserve’, ‘react-native’, or ‘react’. */

// “declaration”: true,       /* Generates corresponding ‘.d.ts’ file. */

// “sourceMap”: true,         /* Generates corresponding ‘.map’ file. */

// …

}

}

–init çıktısında yaptığımız değişikliğin, sizin tsconfig.json komutunuzda değişiklik yapmanızı ve TypeScript’in yeteneklerini keşfetmenizi giderek kolaylaştıracağına inanıyoruz.

Son olarak da aşağıdaki ayarları mümkün kılan –strict bayrağını ekledik:

  • –noImplicitAny
  • –strictNullChecks
  • –noImplicitThis
  • –alwaysStrict (tüm dosyalarda JavaScript katı modu zorunlu kılar)

Bu –strict bayrağı, TypeScript ekibinin geliştiricilere dili kullanırken en iyi deneyimi sağlayacağına inandığı bayraklar kümesinden oluşmaktadır. Aslında da, tsc –init ile başlatılan tüm yeni projelerde –strict varsayılan olarak açık olacaktır.

Güle güle kullanın!

Neler yaptığımız ve gelecekte neler bulacağınıza daha derin bir bakış için Wiki sayfamızda What’s new in TypeScript yazısının tamamını ve Roadmap’i okuyabilirsiniz!

TypeScript’i her açıdan geliştirmemize yardımcı olacak yapıcı geribildirimlere her zaman önem veriyoruz. Gerçekten de TypeScript 2.3 özellikle hem mevcut TypeScript kullanıcılarından hem de genelde JavaScript topluluğundaki kişilerden aldığımız geribildirimlerle yönlendirildi. Herhangi bir aşamada sizinle iletişime geçtiysek, TypeScript’i tüm JavaScript geliştiricileri için daha iyi bir proje yapmaya yönelik yardımlarınız ve ilginize özellikle teşekkür etmek isteriz.

TypeScript 2.3’ü beğeneceğinizi, kodlamanızı daha da kolaylaştıracağını umuyoruz. Bu tür kolaylıkları aşağıdaki yorumlar bölümünden bize yazabilir ya da beğendiğinizi Twitter’de duyurabilirsiniz.

Okuduğunuz için teşekkür ederiz, iyi kodlamalar!