TypeScript Notları ve İpuçları

İçindekiler

1. Temel Tipler
2. Arayüzler
3. Sınıflar
4. Fonksiyonlar
5. Jenerikler
6. Numaralandırmalar
7. Tip Onaylamaları
8. Gelişmiş Tipler
9. Modüller
10. Dekoratörler

Temel Tipler

İlkel Tipler

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];
let x: [string, number] = ["hello", 10]; // Tuple

Any ve Unknown

let notSure: any = 4;
notSure = "belki bir dize";
notSure = false; // tamam, kesinlikle bir boolean

let uncertain: unknown = 4;
uncertain = "belki bir dize";
uncertain = false;

Void, Null ve Undefined

function warnUser(): void {
    console.log("Bu benim uyarı mesajım");
}

let u: undefined = undefined;
let n: null = null;

Never

function error(message: string): never {
    throw new Error(message);
}

Arayüzler

Temel Arayüz

interface LabelledValue {
    label: string;
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Boyut 10 Nesne"};
printLabel(myObj);

İsteğe Bağlı Özellikler

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
    let newSquare = {color: "beyaz", area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: "siyah"});

Salt Okunur Özellikler

interface Point {
    readonly x: number;
    readonly y: number;
}

let p1: Point = { x: 10, y: 20 };
// p1.x = 5; // hata!

Sınıflar

Temel Sınıf

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Merhaba, " + this.greeting;
    }
}

let greeter = new Greeter("dünya");

Kalıtım

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Hayvan ${distanceInMeters}m hareket etti.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Hav! Hav!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);

Erişim Belirleyiciler

class Animal {
    private name: string;
    protected age: number;
    public color: string;

    constructor(name: string, age: number, color: string) {
        this.name = name;
        this.age = age;
        this.color = color;
    }
}

Fonksiyonlar

Fonksiyon Tipleri

function add(x: number, y: number): number {
    return x + y;
}

let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };

İsteğe Bağlı ve Varsayılan Parametreler

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

function buildName2(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}

Rest Parametreleri

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

Jenerikler

Jenerik Fonksiyonlar

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString");
let output2 = identity("myString"); // tip çıkarımı

Jenerik Arayüzler

interface GenericIdentityFn<T> {
    (arg: T): T;
}

let myIdentity: GenericIdentityFn<number> = identity;

Jenerik Sınıflar

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

Numaralandırmalar

Sayısal Numaralandırmalar

enum Direction {
    Up = 1,
    Down,
    Left,
    Right,
}

Dize Numaralandırmaları

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

Tip Onaylamaları

"açı parantezi" sözdizimi

let someValue: any = "bu bir dizedir";
let strLength: number = (<string>someValue).length;

as-sözdizimi

let someValue: any = "bu bir dizedir";
let strLength: number = (someValue as string).length;

Gelişmiş Tipler

Birleşim Tipleri

function padLeft(value: string, padding: string | number) {
    // ...
}

Kesişim Tipleri

interface ErrorHandling {
    success: boolean;
    error?: { message: string };
}

interface ArtworksData {
    artworks: { title: string }[];
}

type ArtworksResponse = ArtworksData & ErrorHandling;

Tip Takma Adları

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

Modüller

Dışa Aktarma

export interface StringValidator {
    isAcceptable(s: string): boolean;
}

export const numberRegexp = /^[0-9]+$/;

export class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}

İçe Aktarma

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

Dekoratörler

Sınıf Dekoratörleri

function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Merhaba, " + this.greeting;
    }
}

Metod Dekoratörleri

function enumerable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.enumerable = value;
    };
}

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }

    @enumerable(false)
    greet() {
        return "Merhaba, " + this.greeting;
    }
}