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"]
}




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

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>) {...}

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