WebDevCurriculum]静解析:タイプスクリプトと印刷システム

概要
タイプスクリプトの概念と静的解析、および林システムについて説明します.
Checklist

コードを印刷するメリットは何ですか?

コードはESLintなどの静的ナビゲーション装置によって解析され,これはコードのコンパイルと実行の前にプリデバッグを行うことを意味する.
実行前にコードを分析します.つまり、実行時に異なる要求を満たし、開発段階でこれらの要求を発見することを目的としています.
詳細は、静的ナビゲーションターゲットを示します.
→要求漏れ:未考慮事項があるか
→誤解/誤った要求:期待しない、または無意味な(余計な)動作が起こる
→エラー処理欠落:例外処理が欠落しているか
→以外の複数の符号化エラー等
以上の検査対象の詳細については、ここ参照.
他のダイナミックナビゲーションよりもリソースの消費が少なく、実行前にエラーを発見し、迅速に修復できるという利点があります.

リントルールはどのように設定すればいいですか?どのようにして厳しすぎる規則と緩い規則の間でバランスを取るのか.

規模の大きい場所には複数の開発者がおり、分岐点も多い.
これらのブランチを最も効率的に管理するために,適切なルールを作成するには,符号化を行う環境,開発者の傾向など,考慮すべき要因が多すぎる.
最終的にはESLintもコラボレーション
つまり、コードのルールと適用すべき部分は、チームメンバー間のプロトコルによって決定する必要があります.
開発サイクルで

リントやビルなどの授業を簡単に完了するにはどうすればいいですか?

Prettierのように個別の拡張パッケージを設定し、コードを保存するたびに自動的にLintチェックを行うことができます.

型のスクリプトはどんな言語ですか?

JavaScriptにtypeの言語を指定します.

const createNewBlock = (data: string): Block => {
    const previousBlock: Block = getLatestBlock();
    const newIndex: number = previousBlock.index + 1;
    const newTimestamp: number = getNewtimestamp();
    const newHash: string = Block.calculateBlockhash(newIndex, previousBlock.hash, newTimestamp, data);

上記のコードに示すように、各変数はdata:string/Block/numberのような特定のデータ型を定義します.

タイプのスクリプトを使用する利点は何ですか?

タイプスクリプトは、コンパイル中にエラーを検出する静的タイプの言語です.
したがって、エラーを早期にチェックし、特定のデータ型を指定できるため、実行速度が非常に速い.
これらの効率的なエラー発見と実行速度の利点に加えて、タイプスクリプトはさまざまな理由で使用されます.
→javascript 100%と互換性があり、拡張の観点から簡単です.
→Vscodeや複数のライブラリ/フレームなどのタイプスクリプトをサポートします.
→プロジェクト規模が大きいほど、タイプスクリプトのメリットが多くなります.

タイプのスクリプトを使用して、ライブラリやフレームワークのタイプを使用しない必要がある場合は、どうすればいいですか?

タイプスクリプト自体がJavaScriptをサポートしているので、2つのファイルのインタラクション自体は問題ありません.
つまり、ライブラリはタイプスクリプトをサポートしていないため、すべてのファイルをJavaScriptに置き換える必要はありません.JavaScriptがサポートしていない部分を使用するだけです.
このような問題ではなく、単純な拡張子とファイル名の問題であれば、.jsを.tsに変更することができます.
なぜ

anyタイプを乱用するのはよくないのですか?

タイプスクリプトは、各材料タイプを特定する意味のある言語です.
anyを乱用すると,タイプスクリプトを使用する意味がなくなるため,その利点を利用することは困難である.
リファレンスコンセプト

リント

リントの意味は毛がふわふわしている.
服の上の糸の塊が露出している毛がふわふわしている様子は見苦しいし、服の材質がずいぶん損なわれていることもわかります.
コード内のリンクは、エラー、エラー、および可読性に影響を与える要因を排除することによって、パフォーマンスを向上させ、コード品質を向上させる操作またはツールを意味します.
代表的なツールは、ESLint、ECMAScript構文でエラーやエラーが発生する可能性のある部分を探索し、堅牢な(コラボレーションがうまく行われている)コードを生成するために作成されます.

ナビゲーションターゲット

リントナビゲーションの目標はinit eslintによって決定される(すなわち、ユーザが設定した検査項目に従ってナビゲーションされる).
これをより一般的にすると、フォーマットとコード品質の2つに大きく分けることができます.
フォーマットは、コードスタイルの一貫性を維持することを目的としています.すなわち、1つのコードが複数のブランチで動作または管理されている場合、一貫したコードスタイルを維持し、誤解を解消します.
コード品質は、使用しない変数、変数の範囲(グローバル/ゾーン)などの潜在的なエラーを排除することを目的としています.
このESLint被験者が修正(拡張)できるのも、ESLintが拡張しやすい理由です.

ESLint使用プロセス

1)ESLintモジュールを取り付ける.npm i eslint --save
2)ESLint構成を初期化する.npx eslint --init※npm eslint --init参照で行うとエラーが発生しますので、必ずnpxと記入してください.

Initを行うときに設定する項目は、基本チェックを行う手順です.
上記の設定が完了すると、以下に示すように、ESLintで基本的なチェックを行うためにinitファイルが構成されます.

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 13
    },
    "rules": {
    }
};

※env:ESLintチェックの環境と文法(CommonJS/ES 6など)を設定します.
※extendsはESLint設定を拡張するために使用され、eslint:推奨するとESLint推奨のルールが有効になります.
→prettyer、airbnb、googleなど他のユーザーの設定.
※rulesは、プロジェクトで強制したいルールを設定できます.
3)検査npx eslint app.jsチェックしたいオブジェクトをeslintする場合は、設定環境に基づいてチェックします.

上記のように1つのファイルをチェックすることができます.一部のファイルを一括チェックしたい場合はpackageです.チェックするコードをjsonに記述することもできます.

npm/npx

npmパッケージのゾーン/グローバルインストールを行い、プロジェクトはパッケージに依存します(実行するには、対応するモジュールが必要です).
npmは、以下に示すように、自分がどの部分に役立つかを教えてくれます.

access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npxパッケージをインストールせず、実行のみを行い、プロジェクトはこのパッケージに依存しません.
ESLintモジュール自体が必要なので、プロジェクトにパッケージ(依存)をインストールする必要があります.
逆に,ESLint検査自体は検査のためnpxで実行され,独立した依存性部分がなく,単独の実行(検査)のみが行われる.
整理する

0. why

タイプのスクリプトが開発者に人気があり、将来JavaScriptに取って代わる可能性がある理由を考えてみましょう.

1. what

タイプのスクリプトが何なのか、javscriptよりも有利な点を考えてみましょう.

は、どのような操作で、どの時点でタイプスクリプトを導入するかを考慮します.

2. how

プロジェクトの規模が拡大した場合、javscriptの限界と存在する問題をどのように感じ、これらの問題を解決するためにタイプスクリプトをどのように採用するかを実際に考えます.

3.参照リンク

なぜ静的解析が必要なのか.
https://siwan.dev/2019/06/01/%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%AD%E1%84%92%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%B5%EC%9C%A0.html
ESLint公式文書
https://eslint.org/
ESLintコンセプト
https://www.zerocho.com/category/JavaScript/post/583231719a87ec001834a0f2
https://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html
ESLintのインストールと使用
https://kavoom2.github.io/node.js/Eslint/
ESLint優先パラメータ
https://baeharam.netlify.app/posts/lint/Lint-ESLint-+-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
ESLINTの自動適用
https://whitekiwi.medium.com/vscode-eslint-%EC%9E%90%EB%8F%99-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-fe1fd7e11928
タイプスクリプトの概念
https://www.samsungsds.com/kr/insights/TypeScript.html
WebDev - QUEST14
https://github.com/leejiwoo2021/WebDevCurriculum/tree/master/Quest14