Öğretici: Visual Studio'da mevcut ASP.NET Core uygulamasına TypeScript ekleme

Makale
10/31/2023

ASP.NET Core ve TypeScript kullanarak Visual Studio geliştirmeye yönelik bu öğreticide basit bir web uygulaması oluşturacak, bazı TypeScript kodu ekleyecek ve uygulamayı çalıştıracaksınız.

Visual Studio 2022 ve sonraki sürümlerde ASP.NET Core ile Angular veya Vue kullanmak istiyorsanız, TypeScript ile ASP.NET Core uygulaması oluşturmak için ASP.NET Core Tek Sayfalı Uygulama (SPA) şablonlarını kullanmanız önerilir. Daha fazla bilgi için bkz. Angular veya Vue için Visual Studio öğreticileri.

Visual Studio'yu henüz yüklemediyseniz Visual Studio indirmeleri sayfasına giderek ücretsiz yükleyin.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

ASP.NET Core projesi oluşturma
TypeScript desteği için NuGet paketini ekleme
Bazı TypeScript kodu ekleme
Uygulamayı çalıştırma
npm kullanarak üçüncü taraf kitaplığı ekleme

Önkoşullar

Visual Studio'yu ve ASP.NET web geliştirme iş yükünü yüklemiş olmanız gerekir.

Visual Studio'yu henüz yüklemediyseniz Visual Studio indirmeleri sayfasına giderek ücretsiz yükleyin.
İş yükünü yüklemeniz gerekiyorsa ancak Visual Studio'nuz zaten varsa, Visual Studio Yükleyicisi açmak için Araçlar>Araçları ve Özellikleri Al... bölümüne gidin. ASP.NET ve web geliştirme iş yükünü ve ardından Değiştir'i seçin.

Yeni ASP.NET Core MVC projesi oluşturma

Visual Studio, projedeki tek bir uygulama için dosyaları yönetir. Proje kaynak kodu, kaynaklar ve yapılandırma dosyalarını içerir.

Not

Boş bir ASP.NET Core projesiyle başlamak ve bir TypeScript ön ucu eklemek için bkz . Bunun yerine TypeScript ile ASP.NET Core.

Bu öğreticide, ASP.NET Core MVC uygulaması için kod içeren basit bir projeyle başlayacaksınız.

Visual Studio'yu açın. Başlangıç penceresi açık değilse Dosya>Başlangıç Penceresi'ni seçin.
Başlangıç penceresinde Yeni proje oluştur'u seçin.
Yeni proje oluştur penceresinde, arama kutusuna web uygulaması girin. Ardından, dil olarak C# seçeneğini belirleyin.

Dil filtresini uyguladıktan sonra ASP.NET Çekirdek Web Uygulaması (Model-Görünüm-Denetleyici) seçeneğini belirleyin ve ardından İleri'yi seçin.

Not

ASP.NET Core Web Uygulaması proje şablonunu görmüyorsanız, ASP.NET ve web geliştirme iş yükünü eklemeniz gerekir. Ayrıntılı yönergeler için bkz . Önkoşullar.
Yeni projenizi yapılandırın penceresinde Proje adı kutusuna projeniz için bir ad girin. Ardından İleri'yi seçin.

Önerilen hedef çerçeveyi (.NET 8.0 veya Uzun vadeli destek) ve ardından Oluştur'u seçin.

Ek bilgiler penceresinde, Çerçeve açılan menüsünde .NET 8.0'ın seçili olduğundan emin olun ve oluştur'u seçin.

Visual Studio yeni projenizi açar.

Kod ekleme

Çözüm Gezgini (sağ bölme) bölümünde proje düğümüne sağ tıklayın ve Çözümler için NuGet Paketlerini Yönet'i seçin.
Gözat sekmesinde Microsoft.TypeScript.MSBuild'i arayın.
Paketi yüklemek için Yükle'yi seçin.

Visual Studio, NuGet paketini Çözüm Gezgini Bağımlılıklar düğümü altına ekler.
Proje düğümüne sağ tıklayın ve Yeni Öğe Ekle'yi > seçin. TypeScript JSON Yapılandırma Dosyası'nı ve ardından Ekle'yi seçin.

Tüm öğe şablonlarını görmüyorsanız, Tüm Şablonları Göster'i seçin ve ardından öğe şablonunu seçin.

Visual Studio, tsconfig.json dosyasını proje köküne ekler. TypeScript derleyicisi seçeneklerini yapılandırmak için bu dosyayı kullanabilirsiniz.
tsconfig.json dosyasını açın ve varsayılan kodu aşağıdaki kodla değiştirin:
```
{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}
```
outDir seçeneği, TypeScript derleyicisinin çevirdiğini düz JavaScript dosyalarının çıkış klasörünü belirtir.

Bu yapılandırma, TypeScript kullanımına temel bir giriş sağlar. Gulp veya Webpack kullanırken olduğu gibi diğer senaryolarda, wwwroot/js yerine çevrilmiş JavaScript dosyaları için farklı bir ara konum isteyebilirsiniz. Konum, araçlarınıza ve yapılandırma tercihlerinize bağlıdır.
Çözüm Gezgini proje düğümüne sağ tıklayın ve Yeni Klasör Ekle'yi > seçin. Yeni klasör için ad betiklerini kullanın.
Betikler klasörüne sağ tıklayın ve Yeni Öğe Ekle'yi > seçin. TypeScript Dosyasını seçin, dosya adı için app.ts adını yazın ve ekle'yi seçin.

Tüm öğe şablonlarını görmüyorsanız, Tüm Şablonları Göster'i seçin ve ardından öğe şablonunu seçin.

Visual Studio betikler klasörüne app.ts ekler.

app.ts dosyasını açın ve aşağıdaki TypeScript kodunu ekleyin.

function TSButton() {
   let name: string = "Fred";
   document.getElementById("ts-example").innerHTML = greeter(user);
}

class Student {
   fullName: string;
   constructor(public firstName: string, public middleInitial: string, public lastName: string) {
      this.fullName = firstName + " " + middleInitial + " " + lastName;
   }
}

interface Person {
   firstName: string;
   lastName: string;
}

function greeter(person: Person) {
   return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Fred", "M.", "Smith");

Visual Studio, TypeScript kodunuz için IntelliSense desteği sağlar.

Bu özelliği denemek için işlevden greeter kaldırın.lastName, dönemi (.) yeniden girip IntelliSense güncelleştirmelerine dikkat edin.

View IntelliSense

Soyadını koda geri eklemek için seçin lastName .

Views/Home klasörünü açın ve ardından Index.cshtml dosyasını açın.

Dosyanın sonuna aşağıdaki HTML kodunu ekleyin.

<div id="ts-example">
    <br />
    <button type="button" class="btn btn-primary btn-md" onclick="TSButton()">
        Click Me
    </button>
</div>

Views/Shared klasörünü açın ve ardından _Layout.cshtml dosyasını açın.
çağrısından önce aşağıdaki betik başvurusunu @RenderSectionAsync("Scripts", required: false)ekleyin:
```
<script src="~/js/app.js"></script>
```
Değişikliklerinizi kaydetmek için Dosya>Tümünü Kaydet 'i (Ctrl + Shift + S) seçin.

Uygulama oluşturma

Derleme Çözümü Oluştur'a > tıklayın.

Uygulamayı çalıştırdığınızda uygulama otomatik olarak derlenmiş olsa da, derleme işlemi sırasında gerçekleşen bir şeye göz atmak istiyoruz.
İki yeni dosya görmek için wwwroot/js klasörünü açın: app.js ve kaynak eşleme dosyası app.js.map. TypeScript derleyicisi bu dosyaları oluşturur.

Hata ayıklama için kaynak eşleme dosyaları gereklidir.

Uygulamayı çalıştırma

Uygulamayı çalıştırmak için F5 (Hata AyıklamaYı>Başlat Hata Ayıklama) tuşlarına basın.

Uygulama bir tarayıcıda açılır.

Tarayıcı penceresinde Hoş Geldiniz başlığını ve Beni Tıklatın düğmesini görürsünüz.
TypeScript dosyasında belirttiğimiz iletiyi görüntülemek için düğmeyi seçin.

Uygulamada hata ayıklama

kod düzenleyicisinde sol kenar boşluğuna greeter tıklayarak içindeki işlevinde app.ts bir kesme noktası ayarlayın.
Uygulamayı çalıştırmak için F5'e basın.

Betik hata ayıklamasını etkinleştirmek için bir iletiyi yanıtlamanız gerekebilir.

Not

İstemci tarafı betik hata ayıklaması için Chrome veya Edge gereklidir.
Sayfa yüklendiğinde, Bana Tıkla'ya basın.

Uygulama kesme noktasında duraklatılır. Artık değişkenleri inceleyebilir ve hata ayıklayıcı özelliklerini kullanabilirsiniz.

Üçüncü taraf kitaplığı için TypeScript desteği ekleme

Projenize dosya package.json eklemek için npm paket yönetimindeki yönergeleri izleyin. Bu görev projenize npm desteği ekler.

Not

ASP.NET Core projelerinde istemci tarafı JavaScript ve CSS dosyalarını yüklemek için npm yerine Library Manager veya yarn da kullanabilirsiniz.
Bu örnekte, projenize jQuery için bir TypeScript tanım dosyası ekleyin. Package.json dosyanıza aşağıdaki kodu ekleyin.
```
"devDependencies": {
  "@types/jquery": "3.5.1"
}
```
Bu kod jQuery için TypeScript desteği ekler. jQuery kitaplığının kendisi zaten MVC proje şablonuna dahil edildi (Çözüm Gezgini'de wwwroot/lib bölümüne bakın). Farklı bir şablon kullanıyorsanız jquery npm paketini de eklemeniz gerekebilir.
Çözüm Gezgini'daki paket yüklü değilse npm düğümüne sağ tıklayın ve Paketleri Geri Yükle'yi seçin.

Not

Bazı senaryolarda, Çözüm Gezgini burada açıklanan bilinen bir sorun nedeniyle bir npm paketinin package.json ile eşitlenmemiş olduğunu gösterebilir. Örneğin, paket yüklendiğinde yüklü değil gibi görünebilir. Çoğu durumda, bu makalede daha önce açıklandığı gibi package.json dosyasını silerek, Visual Studio'yu yeniden başlatarak ve package.json dosyasını yeniden ekleyerek Çözüm Gezgini güncelleştirebilirsiniz.
Çözüm Gezgini betikler klasörüne sağ tıklayın ve Yeni Öğe Ekle'yi>seçin.

Tüm öğe şablonlarını görmüyorsanız, Tüm Şablonları Göster'i ve ardından öğe şablonunu seçin.
TypeScript Dosyası'nı seçin, library.ts yazın ve Ekle'yi seçin.
library.ts dosyasında aşağıdaki kodu ekleyin.
```
var jqtest = {
  showMsg: function (): void {
     let v: any = jQuery.fn.jquery.toString();
     let content: any = $("#ts-example-2")[0].innerHTML;
     alert(content.toString() + " " + v + "!!");
     $("#ts-example-2")[0].innerHTML = content + " " + v + "!!";
  }
};

jqtest.showMsg();
```
Kolaylık olması için bu kod jQuery ve uyarı kullanan bir ileti görüntüler.

jQuery için TypeScript tür tanımları eklendikten sonra, burada gösterildiği gibi bir jQuery nesnesini izleyen bir nokta (.) girdiğinizde jQuery nesnelerinde IntelliSense desteği alırsınız.
_Layout.cshtml dosyasında, betik başvurularını içerecek library.jsşekilde güncelleştirin.
```
<script src="~/js/app.js"></script>
<script src="~/js/library.js"></script>
```
Index.cshtml dosyasında dosyanın sonuna aşağıdaki HTML'yi ekleyin.
```
<div>
  <p id="ts-example-2">jQuery version is:</p>
</div>
```
Uygulamayı çalıştırmak için F5 (Hata AyıklamaYı>Başlat Hata Ayıklama) tuşlarına basın.

Uygulama tarayıcıda açılır.

jQuery sürümüne güncelleştirilen sayfayı görmek için uyarıda Tamam'ı seçin: 3.3.1!!.

Sonraki adımlar

TypeScript'i ASP.NET Core ile kullanma hakkında daha fazla bilgi edinmek isteyebilirsiniz. Visual Studio'da Angular programlamayla ilgileniyorsanız, Visual Studio için Angular dil hizmeti uzantısını kullanabilirsiniz.

ASP.NET Core ve TypeScript

Angular dil hizmeti uzantısı