Add typescript parser for eslint, jsx/tsx check support, fix code errors

.eslintignore

@@ -0,0 +1 @@
+/node_modules

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
-  parser: "babel-eslint",
-  extends: "plugin:markdown/recommended",
-  plugins: ["markdown"],
+  parser: "@typescript-eslint/parser",
+  extends: ["plugin:react/recommended", "plugin:markdown/recommended"],
+  plugins: ["@typescript-eslint", "react", "markdown"],
   overrides: [
     {
       files: ["**/*.md"],
@@ -14,4 +14,9 @@ module.exports = {
       },
     },
   ],
+  settings: {
+    react: {
+      version: "17.0.2",
+    },
+  },
 };

lessons/lesson27/lecture.md

@@ -139,6 +139,8 @@ const login: ReduxAction<"login"> = {
 
 [Условные типы (Conditional Types)](<https://nauchikus.gitlab.io/typescript-definitive-guide/book/contents/%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5%20%D1%82%D0%B8%D0%BF%D1%8B%20(Conditional%20Types).html>), это типы способные принимать одно из двух значений, основываясь на выражении,в котором устанавливается принадлежность к заданному типу данных. Условные типы семантически схожи с тернарным оператором.
 
+<!-- eslint-skip -->
+
 ```ts
 T extends U ? T1 : T2
 ```

lessons/lesson28/lecture.md

@@ -95,7 +95,10 @@ function draw2({
 Для callback функций есть стандартное [error-first соглашение](http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js/)
 
 ```ts
-function asyncOperation(param: any, (error: Error | null, data: any) => {});
+function asyncOperation(
+  param: any,
+  fn: (error: Error | null, data: any) => {}
+): any;
 ```
 
 <!-- v -->

lessons/lesson33/lecture.md

@@ -71,6 +71,8 @@ description: Mediator и EventEmitter как инструмент организ
 
 Может быть представлен как
 
+<!-- eslint-skip -->
+
 ```ts
 IObservable {
   addObserver(event, handler)
@@ -83,6 +85,8 @@ IObservable {
 
 или
 
+<!-- eslint-skip -->
+
 ```ts
 EventTarget {
   addEventListener(event, handler)
@@ -95,6 +99,8 @@ EventTarget {
 
 или
 
+<!-- eslint-skip -->
+
 ```ts
 Backbone.Events {
   on(event, handler)
@@ -107,6 +113,8 @@ Backbone.Events {
 
 Иногда могут добавлять вспомогательные методы, например
 
+<!-- eslint-skip -->
+
 ```ts
 Backbone.Events {
   // ...

lessons/lesson34/lecture.md

@@ -259,6 +259,8 @@ function usersReducer(
 
 <!-- v -->
 
+<!-- eslint-skip -->
+
 ```ts
 interface State {
   users: // ... <- usersReducer

lessons/lesson38/lecture.md

@@ -78,15 +78,15 @@ description: Работа с асинхронными actions в redux
 
 <!-- v -->
 
-```js [1-30
+```ts [1-30]
 const getStarredRepos = (username: string) => {
   return fetch(`https://api.github.com/users/${username}/starred`);
 };
 ```
 
 <!-- v -->
 
-```js [1-30]
+```ts [1-30]
 const getStarredRepos = (username: string) => {
   return fetch(`https://api.github.com/users/${username}/starred`).then(
     (data) => saveData(data)
@@ -96,7 +96,7 @@ const getStarredRepos = (username: string) => {
 
 <!-- v -->
 
-```js [1-30]
+```ts [1-30]
 const getStarredRepos = (username: string) => {
   return fetch(`https://api.github.com/users/${username}/starred`)
     .then((data) => saveData(data))
@@ -106,7 +106,7 @@ const getStarredRepos = (username: string) => {
 
 <!-- v -->
 
-```js [1-30]
+```ts [1-30]
 const getStarredRepos = (username: string) => {
   saveIsLoading();
 
@@ -118,7 +118,7 @@ const getStarredRepos = (username: string) => {
 
 <!-- v -->
 
-```js [1-30]
+```ts [1-30]
 const getStarredRepos = (username: string) => {
   dispatch({ type: "LOADING" });
 
@@ -130,7 +130,7 @@ const getStarredRepos = (username: string) => {
 
 <!-- v -->
 
-```js [1-30]
+```ts [1-30]
 const reducer = (state = { isLoading: false }, action) => {
   switch (action.type) {
     case "LOADING":

lessons/lesson42/lecture.md

@@ -369,21 +369,21 @@ https://github.com/reduxjs/redux-toolkit/blob/master/package.json#L60
 ```ts
 type ConfigureEnhancersCallback = (
   defaultEnhancers: StoreEnhancer[]
-) => StoreEnhancer[]
+) => StoreEnhancer[];
 
 interface ConfigureStoreOptions<S = any, A extends Action = AnyAction> {
   // A single reducer function that will be used as the root reducer, or an
   // object of slice reudcers that will passed to `combineReducers()`
-  reducer: Reducer<S, A> | ReducersMapObject<S, A>
+  reducer: Reducer<S, A> | ReducersMapObject<S, A>;
   // An array of Redux middleware to install
-  middleware?; Middleware<{}, S>[]
+  middleware?: Middleware<{}, S>[];
   // Whether to enable Redux DevTools integration. Defaults to `true`.
   // Additional configuration can be done by passing Redux Devtools options
-  devTools?: boolean | DevToolsOptions
+  devTools?: boolean | DevToolsOptions;
   // the initial state, same as Redux's createStore.
-  preloadedState?: DeepPartial<S extends any ? S : S>
+  preloadedState?: DeepPartial<S extends any ? S : S>;
   // The store enhancers to apply. See Redux's `createStore()`.
-  enhancers?: StoreEnhancer[] | ConfigureEnhancersCallback
+  enhancers?: StoreEnhancer[] | ConfigureEnhancersCallback;
 }
 ```
 

lessons/lesson43/lecture.md

@@ -321,7 +321,7 @@ describe("App", () => {
 
 > RTL используется для взаимодействия с вашими компонентами React так, как это делает человек. То, что видит человек, - это просто визуализированный HTML из ваших компонентов React, поэтому вы видите эту структуру HTML как результат
 
-```js [1-30]
+```html [1-30]
 <body>
   <div>
     <div>Hello React</div>
@@ -467,25 +467,25 @@ describe("App", () => {
 
 `getByLabelText`:
 
-```js
+```html
 <label for="search" />
 ```
 
 `getByPlaceholderText`:
 
-```js
+```html
 <input placeholder="Search" />
 ```
 
 `getByAltText`:
 
-```js
+```html
 <img alt="profile" />
 ```
 
 `getByDisplayValue`:
 
-```js
+```html
 <input value="JavaScript" />
 ```
 
@@ -621,6 +621,9 @@ describe("App", () => {
 <!-- v -->
 
 ```js [1-30]
+import React from "react";
+import App from "./App";
+
 describe("App", () => {
   test("renders App component", async () => {
     render(<App />);
@@ -677,7 +680,11 @@ describe("App", () => {
 
 <!-- v -->
 
+<!-- eslint-skip -->
+
 ```js
+import React from "react";
+
 function Search({ value, onChange, children }) {
   return (
     <div>
@@ -691,6 +698,8 @@ function Search({ value, onChange, children }) {
 <!-- v -->
 
 ```js [1-30]
+import React from "react";
+import Search from "./Search";
 //  FireEvent
 describe("Search", () => {
   test("calls the onChange callback handler", () => {
@@ -714,6 +723,8 @@ describe("Search", () => {
 <!-- v -->
 
 ```js [1-30]
+import React from "react";
+import Search from "./Search";
 // UserEvent
 describe("Search", () => {
   test("calls the onChange callback handler", async () => {

lessons/lesson46/lecture.md

@@ -71,6 +71,8 @@ class Screen extends React.Component {
 
 Для dispatch соответственно
 
+<!-- eslint-skip -->
+
 ```ts [1-50]
   onClick() {
     store.dispatch(changePage({id: 'new'}))
@@ -85,6 +87,8 @@ class Screen extends React.Component {
 
 <!-- v -->
 
+<!-- eslint-skip -->
+
 ```ts [1-50]
   componentDidMount() {
     store.subscribe(() => this.forceUpdate());
@@ -193,7 +197,7 @@ export class App extends React.Component {
 
 <!-- v -->
 
-```ts [13-50]
+```tsx [13-50]
 import React, { Dispatch } from "react";
 import { AnyAction } from "redux";
 import { store } from "../store";
@@ -380,7 +384,7 @@ export const App = withRedux(RawApp, getAppPropsFromRedux);
 
 [Provider](https://react-redux.js.org/api/provider)
 
-```ts [1-50]
+```tsx [1-50]
 /**
 * Makes the Redux store available to the connect() calls in the componet hierarchy below.
 */

lessons/lesson47/lecture.md

@@ -66,8 +66,10 @@ unlisten();
 
 <!--v-->
 
-```js [1-100]
+```jsx [1-100]
+import React from "react";
 import { BrowserRouter, Route } from "react-router-dom";
+import News from "./News";
 
 // BrowserRouter создает объект history и прокидывает
 // его вниз
@@ -89,8 +91,10 @@ const App = () => (
 
 ### Вложенные Route
 
-```js [1-100]
+```jsx [1-100]
+import React from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
+import News from "./News";
 
 // также обратите внимание на Switch
 const Category = () => (
@@ -115,7 +119,11 @@ const App = () => (
 
 ### Route с параметрами
 
-```js [1-100]
+<!-- eslint-skip -->
+
+```jsx [1-100]
+import React from "react";
+
 const CatPage = ({ match }) => <h1>Viewing category {match.params.catid}</h1>;
 
 const Category = () => (
@@ -130,7 +138,7 @@ const Category = () => (
 
 ### Действия при входе
 
-```js [1-100]
+```jsx [1-100]
 class CatPage extends Component {
   // используем лайфсайкл-хук
   componentDidMount() {
@@ -189,7 +197,7 @@ const Category = () => (
   - **`<a>`** можно даже перетаскивать!
 - Если вместо **`<a>`** рисовать
 
-```js [1-100]
+```jsx [1-100]
 <span onClick={() => history.pushState(/*...*/)}>link</span>
 ```
 
@@ -201,7 +209,7 @@ const Category = () => (
 
 <!-- eslint-skip -->
 
-```js [1-100]
+```jsx [1-100]
 import { Link } from "react-router-dom";
 // Хитрая ссылка
 <Link to="/news">Новости!</Link>
@@ -232,7 +240,7 @@ const target = {
 
 <!-- eslint-skip -->
 
-```js [1-100]
+```jsx [1-100]
 //у Link есть подвох
 // если на https://vasya-superman.ru написать
 <Link to="https://mail.yandex.ru">Yandex.Mail</Link>
@@ -259,7 +267,7 @@ const target = {
 
 <!-- eslint-skip -->
 
-```js [1-100]
+```jsx [1-100]
 import { Redirect } from "react-router-dom";
 // Рендерим Redirect - переходим по адресу
 <Redirect to="/view-ad" />
@@ -281,7 +289,7 @@ const withAuth = Cmp => props => {
 
 ### Парсим query string
 
-```js [1-100]
+```jsx [1-100]
 // Противоречивое решение react-router v4:
 // убрать работу с queryString
 // Теперь все сами: