ESLint? ???? JavaScript ? React ?????? ???? ?? ?? ??

?? ?? JavaScript ? React ????????? ???? ?? ? ?? null ?? ?? ??? ?????? ???? ?? ?? ?? ??? ?? ???? ???? ??? ??? ???? ?? ??????. ??? ??? ??? ??? ???? ???? ???? ?? ? ????. ? ????? ???? ??? ???? ?? ????? ??? ? ?? ESLint ??? ?????. ??

?? React? React Native ??????? TypeScript? ???? ?? ??? ??? ?? ??? ???? ?? ????. ??? ???? ?? ??? React Native ? ??, ??? ??, ?? ?? ?? ? ?? ???? ?? ??? ??? ? ????. ??? ???? ??? ?? ??? ???????. ???

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

1. ???? ?? ?? null? ??? ??? ???

??:

???? ???? null? ??? ??? ????? ??? ??? ?????.

const user = undefined;
console.log(user.name); // ? Runtime Error: Cannot read property 'name' of undefined

???:

• ??? 1: ??? ??(?.)? ?????.

const name = user?.name;

• ??? 2: ?? ??? ?????.

const name = user ? user.name : 'Default Name';

• ??? 3: ????? ?? ???? ?????.

const user = { name: 'Default Name' };

2. ???? ??? null? ?? ??? ?? ???

??:

???? ?? ??? ?? .map() ?? .filter()? ?? ???? ???? ??? ?????.

const items = undefined;
items.map((item) => console.log(item)); // ? Runtime Error: Cannot read property 'map' of undefined

???:

• ??? 1: ??? ???? ?????.

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

• ??? 2: ?? ??? ?????.

const items = someValue || [];
items.map(item => console.log(item));

• ??? 3: null ?? ???(??)? ?????.

const items = possibleItems ?? [];

3. ???? ?? ?? ?? ?????

??:

???? ?? ?? ?? ??:

const handler = undefined;
handler(); // ? Runtime Error: handler is not a function

???:

• ??? 1: ???? ?? ?? ??? ?????.

if (typeof handler === 'function') {
  handler();
}

• ??? 2: ??? ?? ??? ?????.

const handler = passedHandler || (() => {});

4. ???? ???? Null ??? ???? ???

??:

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

const user = undefined;
console.log(user.name); // ? Runtime Error: Cannot read property 'name' of undefined

???:

• ??? 1: ????? ??? ??? ?????.

const name = user?.name;

• ??? 2: ??? ???? ?? ???? ?????.

const name = user ? user.name : 'Default Name';

5. ???? ?? ?? ??? ??? ???

??:

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

const user = { name: 'Default Name' };

???:

• ??? 1: ?? ??? ?????.

const items = undefined;
items.map((item) => console.log(item)); // ? Runtime Error: Cannot read property 'map' of undefined

• ??? 2: ???? ???? ??????.

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

6. ??? ??/?? ?? ??

??:

???? ?? ??? ??? .map() ?? .filter()? ?? ?? ??? ??:

const items = someValue || [];
items.map(item => console.log(item));

???:

• ??? 1: ?? ??? ?? ??? ?? ?????.

const items = possibleItems ?? [];

• ??? 2: ??? ???? ??? ??? ??? ?????.

const handler = undefined;
handler(); // ? Runtime Error: handler is not a function

7. ??? ??? ????? ??

??:

??? ???? ???? ??? ??? ?? ???? ?? ??? ??? ? ????. ?? ?? ??? ???? ??? ???? ?? ?? 0:
? ?? ?? ??? ?? ??? ? ?? ??

if (typeof handler === 'function') {
  handler();
}

???:

• ??? 1: ??? ?? ??? ?????.

const handler = passedHandler || (() => {});

• ??? 2: ??? ??? ?? ????? ?? ?????.

const obj = undefined;
const { name } = obj; // ? Runtime Error: Cannot destructure property 'name' of undefined

• ??? 3: ???? ??? ??? ?????.

const { name = 'Default Name' } = user || {};

---

???? ?? ??? ??? ?? ESLint? ?? ???

?? ?? ??? ??? ???? ?? ?? ???? ESLint? ??? ? ????. ??? ???? ?? ??? ???? ???? ?? ??? ???? ESLint ?????. ????

ESLint ?? ????

.eslintrc.js ?? ESLint ?? ??? ?? ??? ?????.

const user = undefined;
console.log(user.name); // ? Runtime Error: Cannot read property 'name' of undefined

?? ?? ????

1. @typescript-eslint/no-unnecessary-condition: ???? ???? ???? ?? ???? ???? ?? ? ?? null ?? ??? ?????. ??
2. no-unused-expressions: ????? ???? ?? ? someObject && someObject.doSomething? ?? ?? ??? ?????. ?
3. @typescript-eslint/no-unsafe-call: ???? ?? ???? ?? ?? ??? ?????. ?
4. @typescript-eslint/no-unsafe-member-access: ???? ????? ???? ?? ?? ??? ?????? ?????. ?
5. ??? ??: ???? ??? ???? ?? ?? ???? ?? ???? ?? ??? ??? ?? ??? ?????. ?
6. @typescript-eslint/strict-boolean-expressions: ??? ??? ???? ???? ?????. ?
7. @typescript-eslint/no-non-null-assertion: ???? ?? ! null/???? ?? ??? ???? ? ???? ??????. ?

---

?? ??? ?? ???

??? ??? ?????? ??? ESLint ????? ??? ???? ??? ?????.

const name = user?.name;

---

VSCode? ESLint ?? ????

1. ESLint ?? ??:

• VSCode ???????? "ESLint"? ???? ?????. ?

2. ?? ?? ???:

settings.json? ??? ?????.

const name = user ? user.name : 'Default Name';

3. ESLint ??:

ESLint? ????? npm ????? ?????.

const user = { name: 'Default Name' };

?? ?? npm run lint? ???? ??? ?????. ?

---

?? ???

?? ESLint ??? ??? ???? ??? ??? ???? ?? ???? ?? ??? ???? ??? ? ????. ?? ? ?? ??? JavaScript ? React ????? ???? ?? ???? ??????. ????

---

? ??? ESLint? ???? JavaScript ? React ?????? ???? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!