Typescript Öğrenmek

Typescript, Javascript’in bir süper setidir. Bir derleyicidir ve kodlarını Javascripte dönüştürür. 

Typescript, Javascript’e ek özellikler getiriyor. Normalde Javascript’de değişkenlere tip veremiyoruz. Ama Typescript bunu sağlıyor. Çünkü JS dinamik tiplere sahiptir ama TS static tiplere sahiptir.

Nesne Tabanlı Progralama (OOP) terimlerini getiriyor. Özellikle soyutlama ve kapsülleme.

Typescript’i derlemek için kendi derleyicisini kullanabilirsiniz. Ayrıca babel, webpack ile de derleyebilirsiniz.

(Görsel, I)

Kurulum:

npm i -g typescript

Bu komut global olarak kurar. 

Derleme:

tsc dosya.ts

Birkere derler ve bırakır.

Ama her değişikliğinizde derlemesini istiyorsanız:

tsc dosya.ts -w

Tipler

Neyse, gelin ilk içeriğimizi yazalım, bir yazılımcı klasiği olan “hello world” ile başlayalım:

let text : string = "Hello World"; // Tipini 'string' yaptık. 
text = "Merhaba dünya!" // Böyle dersek, kabul eder.
text = 5 // Dersek eğer hata verir. Sebebi ise tipi 'number' olmasıdır.


console.log(text) // Çıktı, text'e 5 verdiğimiz için derleyici hata verecektir.

Bildiğimiz int tipi number tipi karşılar:

let age : number = 18 // Yaş değerini 18 yaptık ve artık bu değer 'number'
age : number = "Burak" // Bu durumda hata verecektir.

Yani anlatılmak istenen, bir değer atanırsa eğer o değerin yerine bir şey atanamaz. 

Ama birden çok veri türü atayabiliriz:

let varMi : boolean | null = true
varMi = false // Doğru.
varMi = 5 // Hatalı
varMi = "Evet" // Hatalı
varMi = true // Doğru.

Burada boolean, true/false alır sadece ve any hiç demek. Bu durumda her şey yazılabilir. Ama yoksa undefined ya da null verecekseniz ona göre, null veyahût undefined diyebilirsiniz.

Arrayler de tip tanımlamaları:

let sayilar: number[] = [1,2,3,4]

let sayilar: Array<number> = [1,2,3,5]

let ornek: [number, string] = [0, 'burak']

// Array tipleri, sadece tipin yanına köşeli parantez koymanız yeterli: 
string[]
number[]
boolean[]
any[]

(Görsel, II)

Fonksiyonlara gelelim.

Fonksiyon dönüşünün string türünden olmasını isteyeceğiz:

function ornekFunc():string {
    return "string tipi"
}

Eğer return yoksa void tipini veriyoruz:

function ornekFunc():void{
    console.log('void tipi')
}

Parametrelere tip veermek:

function ornekFunc(sayi1:number,sayi2:number):number{
    return sayi1 + sayi2
}

function ornekFunc2({firstName, lastName}:{firstName:string, lastName:string}){
  console.log(`Adı: ${firstName}, Soyadı: ${lastName}`)
}

type keyword’u kullanımı:

type kullanici = {
    adi: string;
    yasi: number | string;
    rol: 'yönetici' | 'kullanıcı';
}

// kullanım
let yeniKullanici: kullanici

yeniKullanici = {
    adi: "Burak",
    yasi: 24,
    rol: "kullanıcı"
}

Ayrıca, interface kullanımı mevcut:

interface insan {
    boy: number;
    kilo: number;
    cinsiyet: 'erkek' | 'kadın';
}

// kullanım
let burak : insan

burak = {
    boy: 1.72,
    kilo: 55,
    cinsiyet: 'erkek'
}

? koyarsanız o yer zorunlu olmaktan çıkar:

interface body {
    adi?: string,
    soyadi?: string
}

never tipi asla geriye değer döndürmez:

function hataFirlat(mesaj: string): never {
  throw new Error(mesaj)
}

// kullanım
hataFirlat("Bir hata oluştu!") // Fonksiyon burada durur ve asla geri dönmez.

Döngülerde de kullanılır. Bu tip asla dönüş yapmaz. 

as kullanımı:

let person = {} as IProps
// veya
let person = <IProps> {}

person.name = 'Burak'
person.age = 24

enum kullanımı:

const enum Gün {
  Pazartesi,
  Sali,
  Carsamba
}

const gun = Gün.Pazartesi

implements kullanımı:

class Kedi implements Hayvan {}

// Arayüz tanımı
interface Hayvan {
  isim: string;
  sesCikar(): void
}

// Arayüzü uygulayan sınıf
class Kedi implements Hayvan {
  isim: string;

  constructor(isim: string) {
    this.isim = isim
  }

  sesCikar(): void {
    console.log(`${this.isim} miyavlıyor!`);
  }
}

// Kullanım
const kedi = new Kedi("İnte");
kedi.sesCikar()

abstract kullanımı:

// Soyut sınıf
abstract class Hayvan {
  // Normal bir özellik
  isim: string;

  constructor(isim: string) {
    this.isim = isim
  }

  // Normal bir metot
  hareketEt(): void {
    console.log(`${this.isim} hareket ediyor.`)
  }

  // Soyut bir metot (gövdesiz)
  abstract sesCikar(): void
}

// Soyut sınıftan türetilen bir sınıf
class Kedi extends Hayvan {
  constructor(isim: string) {
    super(isim)
  }

  // Soyut metotları uygulamak zorundayız
  sesCikar(): void {
    console.log(`${this.isim} miyavlıyor!`)
  }
}

// Soyut sınıftan türetilen başka bir sınıf
class Kopek extends Hayvan {
  constructor(isim: string) {
    super(isim);
  }

  sesCikar(): void {
    console.log(`${this.isim} havlıyor!`)
  }
}

// Kullanım
const kedi = new Kedi("Pamuk")
kedi.hareketEt()
kedi.sesCikar()

const kopek = new Kopek("Karabaş")
kopek.hareketEt() // Çıktı: Karabaş hareket ediyor.
kopek.sesCikar()  // Çıktı: Karabaş havlıyor!

/* Aşağıdaki satır hata verir çünkü soyut sınıflardan 
doğrudan nesne oluşturulamaz */
// const hayvan = new Hayvan("Hayvan"); 
// Soyut sınıflardan nesne oluşturulamaz.

Sınıf tipleri:

public : // açık
private : // özel
protected : // sınıf içinde erişim
readonly : // const ile aynı görevi görür.

static : /* bir özellik veya metodun kullanımı, 
sınıfın bir örneğine ihtiyaç duymadan */

// kullanım:
class Kitap {
  readonly baslik: string

  constructor(baslik: string) {
    this.baslik = baslik
  }
}

namespace: birçok sınıfı, fonksiyonu,vb.. barından bir yapıdır:

namespace Base {
  export class Model {
    constructor(public marka: string, public model: string) {}

    tanit() {
      console.log(`${this.marka} - ${this.model}`)
    }
  }
 export function isimDenetle(isim: string): string {
    return `${isim} denetimi yapıldı.`
  }
}

const araba = new Base.Model("Toyota", "Corolla")
araba.tanit()

new Base.isimDenetle()

Generic Fonksiyon:

function Func<T>(arg: T): T{
    return arg
}

// Kullanım
Func<string>("merhaba")

Nesneler için:

interface User {
    name: string;
    age: number;
}

const user: User = { name: "Burak", age: 25 }
const result = Func<User>(user)

Generic utility type:

Partial: İstekleri isteğe bağlı hâle getirir. Zorunlu kılmaz.

interface Kisi {
    id: number;
    name: string;
}

type KisiPartial = Partial<Kisi>

const Burak: KisiPartial = {
    id: 1,
    name: 'Behlül'
}

Required: Alanları zorunlu hâle getirir.

type KisiRequired = Required<Kisi>

Pick: Alanların zorunlu olup olmadığını biz seçiyoruz.

type KisiPick= Pick<Kisi, "id" | "name">

const Burak: KisiPick= {
    id: 1,
    name: "Burak",
}

Omit: Seçtiğimiz özelliği dışarıda bırakıyoruz. Ama bu bir nesne içerisindeki tipi çıkarır.

Normal kümedeki bir tipi çıkarmak için ise, Exclude kullanılır.

// OMIT
interface Kisi {
    id: number;
    name: string;
    age: number;
}

type KisiOmit = Omit<Kisi, "age">

const Burak: KisiOmit = {
    id: 1,
    name: "Burak",
}

// EXCLUDE
type MyType = string | number | boolean
type ExcludeType = Exclude<MyType, number>

const str: ExcludeType = "merhaba"
const bool: ExcludeType = true
const num: ExcludeType = 5 // Hata! `number` dışarıda bırakıldı.

Extract: Tip şemalarını kontrol eder:

type MyType = string | number | boolean
type MyUnion = string | number

// `Extract` ile `MyType` ve `MyUnion` arasındaki kesişimi çıkarıyoruz:
type ExtractType = Extract<MyType, MyUnion>

const str: ExtractType = "merhaba"  // Geçerli
const num: ExtractType = 5  // Geçerli

const bool: ExtractType = true  
// Hata! `boolean` `MyUnion` içinde değil.

Record: Sabit yapılar.

type Config = Record<'host' | 'port' | 'timeout', string>

const serverConfig: Config = {
    host: 'localhost',
    port: '8080',
    timeout: '3000'
}

Genericler ile readonly, private kullanımı:

Readonly<Record<'theme' | 'language', string>>

Enum ile kullanım:

enum Status {
    Active = 'active',
    Inactive = 'inactive',
    Pending = 'pending',
}

type StatusScores = Record<Status, number>

const statusScores: StatusScores = {
    [Status.Active]: 100,
    [Status.Inactive]: 0,
    [Status.Pending]: 50,
}

// 2 Örnek:
type Scores = Record<string, number>;
const playerScores: Scores = {
    Burak: 10,
    Behlül: 15,
    Ümit: 20,
}

Dekoratör kullanımı:

// Metod dekoratörü
function first() {
    return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log(`Method ${propertyKey} çağrıldı.`);
    };
}


class MyClass {
    @first() // Dekoratörü doğru şekilde kullanıyoruz
    method() {
        console.log("Method executed!");
    }
}

const nesne = new MyClass();
nesne.method();  // Konsola Method çağrıldı yazdıracak.


/* Bu methodu kullanmak için tsconfig.json'da,
experimentalDecorators ayarı true olmalı. */

tsconfig.json, Typescript derleme ayar dosyasıdır. Derleme seçenekleri burada belirtilir. 

tsconfig.json oluşturalım:

npx tsc --init

Ayarları json yapısındadır ve her bir ayarı bir anlama gelir, en default hâli şöyledir:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*.ts"
  ]
}

compilerOptions Değerleri

target, hangi ECMAScript sürümüne çevrileceğini belirler. Örnek: ES5, ES6, ESNext

module, hangi modül sisteminin kullanılacağını belirtir. Örnek: CommonJS, ESNext.

lib, kullanılacak JavaScript özelliklerini içeren kitaplıkları belirler. Örnek: [“DOM”, “ES2015”, “ES2016”]

outDir, derlenmiş JavaScript dosyalarının kaydedileceği dizini belirtir. Örnek: dist.

rootDir,typeScript dosyalarının kök dizinini belirtir. Örnek: src 

strict,tüm katı (strict) denetim kurallarını etkinleştirir.

esModuleInterop,CommonJS ve ES modüllerinin birlikte çalışabilirliğini kolaylaştırır. Örnek: "esModuleInterop": true

allowJs,JavaScript dosyalarının derlenmesine izin verir. Örnek: "allowJs": true

declaration, .d.ts dosyalarının (tip tanımlama dosyaları) oluşturulmasını sağlar. Örnek: "declaration": true

sourceMap,hata ayıklama için kaynak haritaları oluşturur. Örnek: "sourceMap": true

moduleResolution, modül çözümleme stratejisini belirler. 

Örnek Değerler: 

"Node": Node.js modül çözümlemesi. 

"Classic": Eski TypeScript çözümlemesi.

resolveJsonModule,JSON dosyalarının TypeScript içinde import edilmesine izin verir.

• Örnek: "resolveJsonModule": true

baseUrl, Modül yollarını çözmek için kullanılan temel dizini belirtir. Örnek: "baseUrl": "./"

pathsModül yollarını özelleştirmek için alias (takma ad) tanımlar.

• Örnek:

"paths": { "@components/*": ["src/components/*"] }

skipLibCheckHarici kütüphanelerin (node_modules) tip kontrolünü atlar.

• Örnek: "skipLibCheck": true

experimentalDecoratorsDekoratörlerin kullanımını etkinleştirir.

• Örnek: "experimentalDecorators": true

emitDecoratorMetadata

• Dekoratörlerin meta verilerinin oluşturulmasını sağlar.
• Örnek: "emitDecoratorMetadata": true

includeDerlenecek dosya veya dizinleri belirtir.

"include": ["src/**/*"]

excludeDerlemeye dahil edilmeyecek dosya veya dizinleri belirtir.

"exclude": ["node_modules", "dist"]

fileDerlenecek belirli dosyaları açıkça belirtir.

"files": ["src/index.ts"]

watchOptionsDosya izleme davranışını özelleştirir.

"watchOptions": {
  "watchFile": "useFsEvents",
  "watchDirectory": "useFsEvents"
}

typeRootsTip tanımlamalarının bulunduğu dizinleri belirtir.

"typeRoots": ["./node_modules/@types"]

typesKullanılacak tip tanımlarını açıkça belirtir.

"types": ["node", "jest"]

Tüm tsconfig ayarları bu kadardı. Hepsi önemli ayarlardı. Çoğunu kendi projelerimden, çoğunu da Typescript’in resmî sitesinden aldım. 

Typescript serüvenimiz bu kadardı.

Herkese iyi kodlamalar!