??: https://code-art.pictures/

? ????

???? ?? ?? ??? ??? ???? ??? ???? ???? ??? ?? ????. ??? ?????? ??? ???? ??? ??? ??, ?? ???? ???? ???, ?? ??? ?? ??? ??? ???? ?? ???? ??? ????? ????. ??? ?? ?? ??? ??? ??? ?????. ???? ? 7?? ?? ??? ????.

1. ES5? ??????? ???

2020??? ?? ?? ???? ?? ?? ???? ?????. ES5? ???? ? ???? React TypeScript ?? ???????????. webpack 5? ???? ?????? ??? ??????. ?? ?? ???? ???????. ?? ??? ??? ???? ??????? ??? ?? ?? ?????. ???? ???? ??? ? ??? ??? ??? ???? ??? ??? ?? ?????. ?? ??? ?? ???????.

??? ES5? ??? ?? ??? ?????. ?? ??:

• ?? ??????? ?? ES6 ??? ???? ????. ?, ?? ??? ES5? ???? ????.
• ??? ?? ??? ???? ES5? ???? ????. ??? ????? ES5? ???? ?? ? ????.
• ES5 ???? ??? ????? ????? ?? ????? ?????? ???? ???.

2. ?? JavaScript ?? ??? ?? ??????.

? ???? ???? ??? ??? ? ?? ? ?? ??? ??? ????.

2.1. ???

???? ??? ??? ???? ???? ?????.

type TreeNode<T> = {
    left?: TreeNode<T>
    value: T
    right?: TreeNode<T>
};

function* traverse<T>(root: TreeNode<T>): Generator<T> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}

2.2. ??? ??? ??

???? ??? ??? ??? ????? ?? ??? ??? ? ??? ??? ???? ?? ? ??? ?? ??? ?? ????.

??

export class A {
  #myFancyStateObject
}

??

export class A{#t}

?? TypeScript ??? ????? ???? ????. tsc? ??? ???? ?? ??? ????? ??? ???? ?????.

2.3. ?? API

Promise.withResolvers() ?? Map.groupBy()? ?? ???? ?? ???? ? API? ? ?? ?? ???? ?? ?? ???? ??? ? ??? ?????. ?? ?? ??? ?? ????? ? ? ?? ??? ??? ???.

?: ??? JavaScript API? ?? ??

??? ???? ????? ??? ?? ?? '????'? TypeScript ???? ?? ??? .d.ts ?????. ?? ?? es2024.collection.d.ts? ?? ???? ?

3. ?? ?? ??

???? ??? ??????

type TreeNode<T> = {
    left?: TreeNode<T>
    value: T
    right?: TreeNode<T>
};

function* traverse<T>(root: TreeNode<T>): Generator<T> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}

???? ??? ?? ??? ?? ?? ??? ? ??? ??? ???? ??? ????. ?? ?? ???? ?? ???? ??? ???? ????? ?? ??? ??? ???? ?? ??? ?? ???? ????.

? ??? ?? ??? ??? ?? ????? ?? ??????? ?? ???? ??????? ??? ?????. ?? ?? ??? ???? ??? ?? ??, ?? ??? ? ??? ??? ??? ????.

?? ?? ?? ??? ?????. ???? ????? ?? ??? ??? ???? ? ?? ???? ? ???? ??? ?? ???? ?? ? ????.

export class A {
  #myFancyStateObject
}

? ???? ?? n? ?? ???? ?? ??? ? ???? ??? ???????. ?? ???? ?? ???? ??? ? ??? ?????. ? ?? ?? ??? ?? ??? ? ?? ???? ??? ??????.

4. ??? ?????? ????

? ?? ??? ??? ???? ???, ? ?? ? ????.

???????? ??? ?? ?? ?? ??? ???? ????.

? ?? ????? ? ?? ?? ??? ???????? ??????.

4.1. ??? ???

? ??? ??? ???. ??? 4px? ???? ???? ??? ?????. ?? ??? ??? ?? ??? ?? ???? ?? ???? ??? ??? ? ????. ??? ?? Button ?? ??? ??? ?? ??? ??? ??? ????, ??? ??? ?????? ?? ?????

CSS

export class A{#t}

JSX

const clamp = (min, val, max) =>
  Math.max(min, Math.min(val, max))
const x = clamp(0, v1, a.length - 1)
const y = clamp(0, v2, b.length - 1)
const z = clamp(0, v3, c.length - 1)

? ??? '?? ??'? ?? ?????. ??? ??? ???? ???? ??? ?????? ??? ? ????. ?? ??? ?? ??? ???? ????? ?? ???? '3'? ?????. ??? ??? ??? ? ?? ??? ?? ??? ????? ???? ? ??? ??? ????.

??? ??? ?? ? ????? ??? ??? ??? ????? CSS ??? ???? ?? ?? ?? ?????? ?????.

4.2. ???? ????? ??

?, ?? ??? ???? ?(Next.js, React, Vue ?)? ?? ????? ????. ?? DOM ?? ???? ?? ????? ???? ???, ???? ???, ?? ??? ?? ?? ??? ?????.

• ?? ??? ??? - ??? ???? ??? ? ????.
  • ?????: ?? ? ??? ????? React? ?? ?????? ?????. ?? ???? ???? ?? ?? ??? ???.
• WordPress? ?? ??? ?? ???.
• ??? — ?? ? ?? ??? ?????.
  • ?? ?? ?????.
  • ?? DOM? ?? ???? ??? ?? ???? ???? ??? ?? ??? ???. ? ?? ????? ???.

5. ??? TypeScript ??? ????

TypeScript? ?? ??? ?? JavaScript ?? ????? ?? ???? ?????. ES6 ???? "? ?? JavaScript"? ???? ??? ???? TypeScript? ??? ??????. ?? ??? ? ??? ??? ?????.

5.1. ???

??? ???? ??? ?? ??? ??? ??? ??? ?????.

??????

type TreeNode<T> = {
    left?: TreeNode<T>
    value: T
    right?: TreeNode<T>
};

function* traverse<T>(root: TreeNode<T>): Generator<T> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}

??????

export class A {
  #myFancyStateObject
}

?? TypeScript ?????? ??? ?? ??? ??? ??? ?? ?????. ???? ??? ??? ? ? ????.

5.2. ??????

??????? ESM ?? ??? ????????. ?? ??? ?? ?? ??? ??????? ????? ????? ????? ??? ??? ?????? ?? ??? ???? ?? ?????.

??????

export class A{#t}

??????

const clamp = (min, val, max) =>
  Math.max(min, Math.min(val, max))
const x = clamp(0, v1, a.length - 1)
const y = clamp(0, v2, b.length - 1)
const z = clamp(0, v3, c.length - 1)

?????? ?? ES ??? ?????.

??: ??????? ?? ?????? ?? ?? ??? ???? ? ??? ?????.

6. ?? ???? ???? ???

??? ??? ?? ??? ???? ???? ? ????? ?? ???? ??? ? ????. ??? ???? ?? ?? ??? ?? ? ????.

6.1. ?/?? ?? ??

?? ?? ? ???? ?????. ???? ?? ?? ?? ??? ????? ??? ?? ??? ???? ???.

const clampToRange = (n, {length}) =>
  clamp(0, n, length - 1)
const x = clampToRange(v1, a)
// ...

6.2. ??? ???? ?? ?? ??

?? ==? ???? null? ???? ?? ??? ????? ? ??? ?? ?? ???? ????? ?????.

.btn-a {
    background-color: skyblue;
    padding: 4px;
}
.btn-b {
    background-color: deepskyblue;
    padding: 8px;
}

6.3. Nullish Coalescent, Logical OR ? ?? ????? ???? ??? ??

<button className='btn-a' onClick={handleClick}>
    Show
</button>
// ...
<button className='btn-b' onClick={handleSubmit}>
    Submit
</button>

6.4. ?? ???? ??? ?? ??

??:

enum A {
  x, y
}

??? ?????:

var A;
(function (A) {
    A[A["x"] = 0] = "x";
    A[A["y"] = 1] = "y";
})(A || (A = {}));

6.5. ?? ??? ???? ???? ???? ???

??:

namespace A {
  export let x = 1
}

??? ?????:

var A;
(function (A) {
    A.x = 1;
})(A || (A = {}));

??? ??? ???? ??? ???? ?? ??? ??? ?? ????.

7. ????? ?? ??

? ????? webpack? webpack-bundle-analyzer ? Vite? vite-bundle-analyzer? ?? ???? ????? ??? ????. ??? ?? ??? ??? ??? ???? ??? ???? ? ??? ???.

• ???? ?? ?? ??? ?????. ?? ???????? ?????? ??? ??? ?????
• ? ?? ??? ?????? ????? ?? ?? ???? ?????. ??? ???? ??? ? ?????
• ??? ??? ??? ??? 0.5%? ???? ???? ???(?: ???? ???)??? ???? ? ????. ??? ?? ????()? ???? ??? ??? ? ?????

??? ?? ??? ??? ??? ???? ?? ????? ???? ?? ????. ?? ??, TypeScript ?? ??? ?? ES6 ???? ES5 ???? ??? ESM ?????? CJS ???? ?? ? ????. ??? ??? ???? ??? ???? ?? ?? ??? ??? ?? ??? ???? ????? ?? ??? ??? ???? ??? ??? ? ????.

---

????? ?????. ??? ?????!

? ??? JavaScript ?? ??? ????? ???? ?? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!