JavaScript Çorbası

27 Eylül 2021 Pazartesi

HTML Header Tag

Örnek

<body>
  <header>
    <img src="/static/logo.png" alt="Logo">
    <nav>
      <a href="/">Main page</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Title</h1>
      <p>Content</p>
    </article>
  </main>
  <footer></footer>
</body>

7 Eylül 2021 Salı

HTML Embed Tag

Örnek - PDF

Şöyle yaparız

<embed id="plugin" type="application/x-google-chrome-pdf" src="..." 
...
>

2 Eylül 2021 Perşembe

TypeScript Type Guard

Giriş

Type Guard çeşitleri şöyle

null Guard
typeof Guard
instanceof Guard
in Guard
Discriminated Union Guards
User-Defined Guards

null Guard - null kontrolü yapar

Örnek

Şöyle yaparız

const element: HTMLElement | null = document.getElementById('target');

element.innerText = 'Hello'; // Compiler error - null in union

if (element !== null) {
    element.innerText = 'Hello'; // null removed from union 
}

null Guard yerine Optional kullanmak çok daha kolay. Şöyle yaparız.

element?.innerText = 'Hello';

typeof Guard

Örnek

Şöyle yaparız

// Note that the type of 'primitive' in each branch is different
switch (typeof primitive) {
  case "number": return primitive.toFixed(2);
  case "string": return primitive.toUpperCase();
  case "boolean": return !primitive;
  default: throw new Error("Unexpected type") 
}

Açıklaması şöyle

Remember that typeof can only tell us if a type is string, number, boolean, symbol, function, bigint, undefined. Everything else will return "object".

instanceof Guard

Örnek

Şöyle yaparız

function setupInput(input: HTMLInputElement | HTMLTextAreaElement) {
    input.value = ''; // Valid since value is common to both types

    if (input instanceof HTMLTextAreaElement) {
        // These properties are only valid for HTMLTextAreaElement
        input.rows = 25;
        input.cols = 80;
        input.wrap = 'hard';
    } else {
        // These properties are only valid for HTMLInputElement
        input.width = 400;
        input.height = 50;
    }
}

in Guard

Örnek

Şöyle yaparız

function setupInput(input: HTMLInputElement | HTMLTextAreaElement) {
    if ('rows' in input) {
        // These properties are only valid for HTMLTextAreaElement
        input.rows = 25;
        input.cols = 80;
        input.wrap = 'hard';
    } else {
        // These properties are only valid for HTMLInputElement
        input.width = 400;
        input.height = 50;
    }
}

Açıklaması şöyle

The in operator allows us to test an object for the existence of a member. In the code below, only HTMLTextAreaElement has a rows property so by testing for its existence the compiler determines the type of the input variable on each branch and narrows the type.

Note, in can only be used if ALL members of the union are object types (not primitives).

in Guard kullanıyorsak return type'a dikkat etmek gerekir. Şöyle yaparız

function isTextArea(input: HTMLInputElement | HTMLTextAreaElement):
input is HTMLTextAreaElement {
  return 'rows' in input;
}

if (isTextArea(input)) {
    // input has type HTMLTextAreaElement
    input.rows = 25; // Valid
}
Eğer şöyle yapsaydık derleme hatası alırdık. Çünkü boolean dönünce "type narrowing" yapılmıyor.
function isTextArea(input: HTMLInputElement | HTMLTextAreaElement): boolean {
    return 'rows' in input;
}

if (isTextArea(input)) {
    // input still has union type
    input.rows = 25; // Compiler error
}
Ayrıca TypeScipt 4.4 ile "type narrowing" şöyle de oluyor. Buna Control Flow Analysis information (CFA) deniliyor.
const isTextArea = 'rows' in input;

if (isTextArea) {
    // Narrowing has taken place
    input.rows = 25;
}
Örnek

Elimizde şöyle bir kod olsun.

interface A {
  text: string;
}
interface B {
  type: string;
}
type C = A|B;

B tipindeki nesneleri süzmek için şöyle yaparız.

function isB(c: C): c is B {
  if ('type' in c) { 
    return typeof c.type === 'string';
  }

  return false;
}

Elimizde bir array olsun.

const arr: Array<C> = [....]

Şöyle yaparız.

const output = arr.find(isB);

TypeScript Type Unions

Giriş

Açıklaması şöyle

Type Unions allow us to define a new type which represents any one of a set of possible types.

Örnek

Şöyle yaparız

type Primitive = 
    | string
    | number
    | boolean;

let x: Primitive;

Kullanmak için şöyle yaparız.

x = 'Hello';
x = 123;
x = false;

x = new Date(); // Compiler Error

Değişkenin tipini anlamak için şöyle yaparız.

if (typeof x === 'number') {
  console.log(x.toFixed(2)); // 'x' can safely use 'number' operations 
}

TypeScript Derive New Types From Existing Types

Giriş

Açıklaması şöyle

It’s possible in TypeScript to derive new types from existing types using type unions, type intersections, mapped types, and conditional types.

Type Intersection

Örnek

Şöyle yaparız

interface Employee {
    name: string
    age: number;
    dob: Date;
}

// Type Intersection
type EmployeeWithId = Employee & { id: string };
// This type will be equivalent to
// {
//    id: string;
//    name: string
//    age: number;
//    dob: Date;
// }

// Readonly uses Mapped Types
type ReadonlyEmployee = Readonly<Employee>;
// This type will be equivalent to
// {
//    readonly name: string
//    readonly age: number;
//    readonly dob: Date;
// }

// A Mapped Type with a Conditional Type allows for interesting transformations
type DateToString<T> = {
    [P in keyof T]: T[P] extends Date ? string : T[P];
};

type EmployeeJson = DateToString<Employee>
// This type will be equivalent to
// {
//    name: string
//    age: number;
//    dob: string; // Date has changed to string
// }

ReadOnly

Örnek

Şöyle yaparız

interface Employee {
    name: string
    age: number;
    dob: Date;
}

// Readonly uses Mapped Types
type ReadonlyEmployee = Readonly<Employee>;
// This type will be equivalent to
// {
//    readonly name: string
//    readonly age: number;
//    readonly dob: Date;
// }

MappedType

Örnek

Şöyle yaparız

interface Employee {
    name: string
    age: number;
    dob: Date;
}

// A Mapped Type with a Conditional Type allows for interesting transformations
type DateToString<T> = {
    [P in keyof T]: T[P] extends Date ? string : T[P];
};

type EmployeeJson = DateToString<Employee>
// This type will be equivalent to
// {
//    name: string
//    age: number;
//    dob: string; // Date has changed to string
// }

24 Ağustos 2021 Salı

Chrome Developer Tools

Giriş

F12 ile açılır

Console Sekmesi
Bir değişkene yeni değer atamak için kullanılabilir.

Network Sekmesi

1. Throttle

Şöyle yaparız. 5. adımda anlatıldığı gibi "Reload this page" simgesine basılı tutarken DevTools penceresi açık olmalı

Steps To Use the Throttler
1. Open DevTools (Ctrl + Shift + I)
2. Switch to the Network Tab.
3. By default, the throttler is set to ‘No Throttle’.
4. From the dropdown menu, you can select the type of network to simulate.
5. Long Press the reload icon while the DevTools panel is open.
6. Select ‘Empty Cache and Hard Reload’ from the advanced reload options. It is important to empty cache to examine the page as a first time visitor.

29 Temmuz 2021 Perşembe

TypeScript Optional

Örnek

Şöyle yaparız

interface Cat {
  name: string;
  age: number;
  ownerName?: string; // not every cat has an owner
}

const mrWhitePaws: Cat = {
  name: "Mr. White Paws",
  age: 7,
  ownerName: "Jane", // domestic cat, lucky guy
};

const wildLynx: Cat = {
  name: "Lynx lynx",
  age: 6,
  // this wild cat lives a free life!
};

Örnek
null Guard yerine Optional kullanmak çok daha kolay. Şöyle yaparız.
element?.innerText = 'Hello';
optional chaining ve nullish coalescing

Açıklaması şöyle

The optional chaining allows to safely “navigate” through possibly absent values (without throwing an error), while the nullish coalescing operator, or the ??, enables providing a failover (default) value in case of stumbling upon a null (think of it as a good, old || operator, but for null or undefined values only, instead of all “falsy” ones). Again, keep in mind, that this is an example of a feature eventually available in pure JavaScript, too.

Örnek

Şöyle yaparız

// optional chaining:
// The value will be undefined. Without `?.`, this would error with
// "Uncaught TypeError: Cannot read property 'length' 
const nameLength: string | undefined = wildLynx?.name?.length; of undefined".

// nullish coalescing:
const nope = null;
const calculation = (nope ?? 0) + 42; // The value will be 0 + 42, ergo 42.