Yeni Bir TypeScript Projesi Nasıl Başlatılır

giriiş

Başlangıç projesi veya Angular CLI gibi bir araç kullanırken TypeScript ile çalışmış olabilirsiniz. Bu eğitimde, başlangıç projesi olmadan bir TypeScript projesini nasıl kuracağınızı öğreneceksiniz. Ayrıca, TypeScript'te derlemenin nasıl çalıştığını ve TypeScript projenizde bir linter'ı nasıl kullanacağınızı da öğreneceksiniz.

Ön koşullar

Cihazınıza yüklü olan en son Node sürümü.
Tanışmak npm

Adım 1 – Bir TypeScript projesi başlatın

TypeScript projenizi başlatmak için projeniz için bir dizin oluşturmanız gerekir:

mkdir typescript-project

Şimdi proje dizininize geçin:

cd typescript-project

TypeScript'i proje dizininizi ayarlayarak yükleyebilirsiniz:

npm i typescript --save-dev

Bayrağın önemli olması --save-dev TypeScript'i, TypeScript'i bir geliştirme bağımlılığı olarak depoladığı için ekleyin. Bu, TypeScript'in projenizin geliştirilmesi için gerekli olduğu anlamına gelir.

TypeScript kurulu olduğunda, TypeScript projenizi aşağıdaki komutu kullanarak başlatabilirsiniz:

npx tsc --init

npm Ayrıca adı verilen bir aracı da var npx çalıştırılabilir paketleri çalıştıran. npx Global kuruluma ihtiyaç duymadan paketleri çalıştırmamızı sağlar.

Emir tsc Burada kullanılmasının nedeni, TypeScript için yerleşik derleyici olmasıdır. TypeScript'te kod yazdığınızda, yürütme tsc Kodunuzu JavaScript'e dönüştürür veya derler.

Bayrağın kullanımı --init Yukarıdaki komutta, TypeScript proje dizininizde bir tsconfig.json dosyası oluşturularak projeniz başlatılır. Bu tsconfig.json dosyası, daha fazla yapılandırma yapmanıza ve TypeScript ile derleyicinin nasıl etkileşime gireceğini belirlemenize olanak tanır. tsc Özelleştir. İhtiyaçlarınızı en iyi şekilde karşılamak için bu dosyadaki yapılandırmaları kaldırabilir, ekleyebilir ve değiştirebilirsiniz.

tsconfig.json Varsayılan yapılandırmayı bulmak için düzenleyicinizde açın:

nano tsconfig.json

Birçok seçenek olacak, bunların çoğunu aşağıda açıkladık:

{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Projects */
// "incremental": true, /* Enable incremental compilation */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
. . .
}
}

TypeScript yapılandırmanızı tsconfig.json dosyası aracılığıyla özelleştirebilirsiniz. Örneğin, outDir girdisinin yorum satırından çıkarıp "./build" olarak ayarlayabilirsiniz; bu, derlenmiş tüm TypeScript dosyalarınızı bu dizine yerleştirir.

TypeScript'i yükleyerek ve dosyayı kurarak tsconfig.jsonArtık TypeScript uygulamasını kodlamaya ve derlemeye geçebilirsiniz.

Adım 2 – TypeScript projesini derleyin

Artık TypeScript projenizi kodlamaya başlayabilirsiniz. Yeni bir dosya oluşturun: dizin.ts Editörünüzde açın. Aşağıdaki TypeScript kodunu yapıştırın dizin.ts Yazmak:

const world = 'world';
export function hello(who: string = world): string {
return `Hello ${who}! `;
}

Bu TypeScript kodu hazır olduğunda, projeniz derlenmeye hazır. Proje dizininizden tsc komutunu çalıştırın:

npx tsc

Derlenmiş JavaScript dosyası index.js ve sourcemap dosyası index.js.map'in, tsconfig.js dosyasında belirttiğiniz takdirde build klasörüne eklendiğini fark edeceksiniz.

dizin.js Açın ve aşağıdaki derlenmiş JavaScript kodunu göreceksiniz:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
return `Hello ${who}! `;
}
exports.hello = hello;

Her değişiklik yaptığınızda TypeScript derleyicisini çalıştırmak sıkıcı olabilir. Bunu düzeltmek için derleyiciyi izleme moduna alabilirsiniz; bu sayede her değişiklik yapıldığında kodunuzu yeniden derleyebilirsiniz.

Aşağıdaki komutu kullanarak izleme modunu etkinleştirebilirsiniz:

npx tsc -w

TypeScript derleyicisinin nasıl çalıştığını öğrendiniz ve artık TypeScript dosyalarınızı başarıyla derleyebilirsiniz. İş akışınıza bir linter ekleyerek TypeScript projelerinizi bir üst seviyeye taşıyabilirsiniz.

Adım 3 – Kodunuzu doldurmak ve düzeltmek için Google TypeScript Stilini kullanın

Kodlama yaparken bir linter kullanmak, kodunuzdaki tutarsızlıkları, sözdizimi hatalarını ve eksiklikleri hızla bulmanıza yardımcı olur. Ayrıca, bir stil kılavuzu yalnızca kodunuzun düzgün ve tutarlı olmasını sağlamanıza yardımcı olmakla kalmaz, aynı zamanda bu stili uygulamak için ek araçlar kullanmanıza da olanak tanır. Bunun için popüler bir araç olan eslint, geliştirme sürecine yardımcı olmak için birçok IDE ile uyumlu çalışır.

Projenizi kurup çalıştırdıktan sonra, tsconfig.json dosyanızı manuel olarak ayarlamak zorunda kalmamanıza yardımcı olması için TypeScript ekosistemindeki diğer araçları kullanabilirsiniz. Google TypeScript Stili de bu araçlardan biridir. GTS olarak da bilinen Google TypeScript Stili, bir stil kılavuzu, satır içi stil sayfası ve otomatik kod düzelticiyi bir arada sunar. GTS'yi kullanmak, yeni bir TypeScript projesini hızlı bir şekilde başlatmanıza ve projenizin tasarımına odaklanmak için küçük, düzenleme ayrıntılarıyla uğraşmanıza gerek kalmamasına yardımcı olur. GTS ayrıca varsayılan ayarlar da sunar. Bu, birçok ayarı özelleştirmenize gerek kalmayacağı anlamına gelir.

GTS'yi kurarak başlayın:

npm i gts --save-dev

Buradan, aşağıdaki komutu kullanarak GTS'yi başlatın:

npx gts init

Yukarıdaki komut, tsconfig.json dosyası ve linting kurulumu da dahil olmak üzere TypeScript'inizi kullanmaya başlamanız için ihtiyacınız olan her şeyi oluşturacaktır. Henüz yoksa, bir package.json dosyası da oluşturulacaktır.

npx gts init komutunu çalıştırmak, package.json dosyanıza faydalı npm betikleri de ekler. Örneğin, artık TypeScript projenizi derlemek için npm run compile komutunu çalıştırabilirsiniz. Perde hatalarını kontrol etmek için artık npm run check komutunu çalıştırabilirsiniz.

GTS artık kuruldu ve TypeScript projenize düzgün bir şekilde entegre edildi. Gelecekteki projelerinizde GTS'yi kullanmak, gerekli ayarlarla yeni TypeScript projelerini hızla oluşturmanıza olanak tanır.

GTS, yapılandırma gerektirmeyen, görüşe dayalı bir yaklaşım sunduğundan, kendi mantıklı kurallarını kullanır. Bunlar en iyi uygulamaları takip eder, ancak kuralları herhangi bir şekilde değiştirmeniz gerekirse, varsayılan Eslint kurallarını genişleterek bunu yapabilirsiniz. Bunu yapmak için, proje dizininizde stil kurallarını genişleten .eslintrc adlı bir dosya oluşturun:

---
extends:
- './node_modules/gts'

Bu, GTS tarafından sağlanan stil kurallarını eklemenize veya değiştirmenize olanak tanır.

Sonuç

Bu eğitimde, özel ayarlarla bir TypeScript projesi başlattınız. Ayrıca, TypeScript projenize Google TypeScript Stili'ni entegre ettiniz. GTS, yeni bir TypeScript projesini hızla çalışır hale getirmenize yardımcı olur. GTS ile yapılandırmayı manuel olarak ayarlamanıza veya iş akışınıza bir linter entegre etmenize gerek kalmaz.