22 Aralık 2020 Salı

Hoisting

Giriş
Hoisting kaldırma/yükseltme anlamına gelir. Javascript diline mahsus bir kavram, C++,Java gibi dillerde bulunmaz. Kısaca değişkenlerin ve metodların kodda bulunduğu yerden en üst satıra Javascript engine tarafından taşınması gibi düşünülebilir.

Bir açıklama şöyle.
... variables and functions in JavaScript are hoisted or moved to the top by the JavaScript engine, as if they were moved physically, up to the top so that they work no matter where you put them.
Örnek
Şöyle yaparız
console.log(x);  // undefined
var x = 5;

30 Kasım 2020 Pazartesi

tsconfig.json Dosyası - TypeScript Derleyicisi Tarafından Kullanılır

Giriş
compilerOptions, include, exclude bölümlerinden oluşur

compilerOptions Bölümü
noImplicitReturns, noImplicitThis, noImplicitAny gibi seçenekler kullanılabilir.

Örnek - target
Şöyle yaparız.
{
"compilerOptions": {

  "target": "es5",

  "module": "commonjs",

  "outDir": "./build",

  "strict": true,

  "esModuleInterop": true

  }
}
Örnek - lib
Şöyle yaparız
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
Örnek
Şöyle yaparız
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noImplicitAny": false,
    "experimentalDecorators": true
  },
  "include": ["src", "husky.config.js", "lint-staged.config.js"]
}

16 Kasım 2020 Pazartesi

TypeScript tsc komutu

Giriş
Eğer seçenek vermezsek src olarak tanımlanan dosyaları is olarak derler. @type dosyalarının halen package.json dosyasında tanımlı olması gerekir

--init seçeneği
tsconfig.json dosyası oluşturur

10 Kasım 2020 Salı

class Anahtar Kelimesi

Örnek
Şöyle yaparız
class class1{
  constructor(let x , let y){
     this.x = x;
     this.y = y;
  }
}

class class2 extends class1{

 // x & y just arguments for explaining
 constructor(let x , let y){

   // calling class1 after extends
   super(x , y);
 }
}

Typescript Partial

Giriş
Belirtilen tipin tüm alanlarını optional yapar. Birim testi için kullanılabilir

Örnek
Şöyle yaparız
export interface Employee {
   id: string;
   name: string;
   department: Department;
   position: Position;
}
export function buildEmployee(
  {
    id = "abc123",
    name = "Jim",
    department = buildDepartment(),
    position = buildPosition(),
   }: Partial<Employee> = {}
): Employee {
  return {
     id,
     name,
     department,
     position,
  }
}
const dummyEmployee = buildEmployee();
Örnek
Şöyle yaparız
interface User {
  id: int;
  email: string;
  password: string;
  hairColor?: string;
}

function update(user: Partial<User>) {...}

4 Kasım 2020 Çarşamba

Promise Micro Queue

Micro Queue Kavramı
Açıklaması şöyle
Jobs are enqueued on the job queues, and in current spec version there are two job queues: ScriptJobs, and PromiseJobs.
Micro Queue ve Macro Queue Farkı
Örnek
Elimizde şöyle bir kod olsun
setTimeout(() => console.log("hello"), 0);

Promise.resolve('Success!')
  .then(console.log)
Çıktı olarak şunu alırız
Success!
hello
Açıklaması şöyle
There are 2 separate queues for handling of the callbacks. A macro and a micro queue. setTimeout enqueues an item in the macro queue, while promise resolution - to the micro queue. The currently executing macro task(the main script itself in this case) is executed synchronously, line by line until it is finished. The moment it is finished, the loop executes everything queued in the microtask queue before continuing with the next item from the macro queue(which in your case is the console.log("hello") queued from the setTimeout).

Micro Queue Örnekler
Örnek
Elimizde şöyle bir kod olsun. Burada Promise önce yaratılmasına rağmen then() içindeki iş kuyruğa ekleniyor.
// Enqueue a new promise on the PromiseJobs queue.
new Promise(resolve => setTimeout(() => resolve(10), 0))
  .then(value => console.log(value));
 
// This log is executed earlier, since it's still a
// running context, and job cannot start executing first
console.log(20);
 
// Output: 20, 10
Örnek
Elimizde şöyle bir kod olsun. Çıktı olarak 1,2,4,3 alırız.
new Promise(resolve => {
  new Promise(resolve1 => {
    console.log(1)
    resolve1()
  })
  .then(() => {
    console.log(2)
  })
  .then(() => {
    console.log(3)
  })
  resolve()
})
.then(() => {
  console.log(4)
})
- En dıştaki Promise constructor çağrılınca içteki promise constructor çalışır. O da resolve1'ı tetikler. resolve1 ise log(2)'yi kuyruğa ekler.
Böylece çıktı 1 olur. Kuyrukta ise log(2) bulunur. 
- Daha sonra en dıştaki Promise'in then() metodu çağrılır ve log(4) kuyruğa atılır. 
- resolve2() çalışır ve çıktı 
1
2
olur.
- resolve2() arkasından gelen resolve3()'ü kuyruğa ekler.
- resolve4 çalışır çıktı
1
2
4
olur
- resolve3() çalışır çıktı
1
2
4
3
olur

26 Ekim 2020 Pazartesi

Polyfill Nedir

Giriş
Açıklaması şöyle
A polyfill is code which simulates modern JavaScript features missing in older browsers.
Örnek
Şöyle yaparız
function filter(array, condition) {
  result = []
  for (element of array)
    if condition(element)
      result.push(element)
  return result
}

if (Array does not have filter function)
  Array.filter = filter

6 Ekim 2020 Salı

TypeScript Function Tanımlama

Function Tanımlama
Parametrenin tipi parametre isminden sonra myparameter : string şeklinde yazılır. Function sonuç dönüyorsa yine kapanış parantezinden sonra ): string şeklinde yazılır.

Örnek - const f = {...} Şeklinde
Şöyle yaparız. string veya null dönebilir.
const getErrorTextIfPresent = (r: ValidationResult): string | null => {
  return r.isValid ? null : r.errorText;
}
Örnek
Şöyle yaparız
function reverse(word:string):string{
  ...
}
Örnek  - Optional Parametreler
Optional parametrelerle tanımlamak için şöyle yaparız
function greet(firstName?: string, lastName?: string) {
  if (fistName && lastName) console.log(`Hello, ${firstName} ${lastName}!`)
  else console.log('Hello, World!')
}

greet('John', 'Doe') // Hello, John Doe!
greet() // Hello, World!
greet('John') // Invalid
Örnek - Generics
Şöyle yaparız. Nesnenin üye alanlarının ismini değiştirir. Alan ismi başına "old" getirilir.
type PrefixAll<T, P extends string>  = {
    [K in keyof T & string as `${P}${K}`]: T[K]
}

function prefixProperties<T, P extends string>(obj: T, prefix: P): PrefixAll<T, P> {
    let out = {} as Record<string, unknown>;
    for (let propt in obj) {
        out[prefix + propt] = obj[propt];
      }
    return out as PrefixAll<T, P>;
}

let x : { num: number, date: Date } = { ... };
let y = prefixProperties(x, 'old');

y.olddate
y.oldnum
Örnek
Prototype ile tanımlamak için şöyle yaparız
type Greet = {
     (firstName: string, lastName: string): void;
     (): void;
};
const greet: Greet = (firstName?: string, lastName?: string) => {
  if (firstName && lastName) console.log(`Hello, ${firstName} ${lastName}!`)
  else console.log('Hello, World!')
};

greet('John', 'Doe'); // Hello, John Doe!
greet(); // Hello, World!
greet('John'); // Hello World!