TIL 29プロジェクト-コード可視性


1.コード最適化、可視性
エンタープライズコラボレーションの過程でadminページを担当した.navコンポーネントを処理する場合は、実装日の関数を作成する必要があります.現在考えている方法で書かれているコードは以下の通りです.
const formatDate = () => {
		const DATE: Date = new Date();
		const year = DATE.getFullYear().toString().substring(2, 4);
		let month: number | string = DATE.getMonth();
		let date: number | string = DATE.getDate();
		let time: number | string = DATE.getHours();
		let minute: number | string = DATE.getMinutes();

		if (month < 10) {
			month = "0" + month;
		}

		if (date < 10) {
			date = "0" + date;
		}

		if (time < 10) {
			time = "0" + time;
		}

		if (minute < 10) {
			minute = "0" + minute;
		}

		return year + "-" + month + "-" + date + ", " + time + ":" + minute;
	};
は、21-05-02, 14:00形式の日付を生成する関数です.制作後も不満点が多かったです.
気に入らない部分は全部で3つあります.
  • 変数let
  • を使用
  • if文によればnumberからstringに変わり、2種類のタイプを指定する必要があります.
  • マルチifゲート
  • typeScriptの使用に不慣れであったため、numberからstringに変更したことを考慮して、上記に記載した.
    定数として宣言すると、文の値が変化すると、当然エラーが発生し、変数に変換されるコードが表示されます.本当に必要でない場合は、変数の使用は避けるべきですが、変数も使用し、if文が4つある場合は、コード自体の長さも長くなります.
    良い方法があるかどうかをずっと考えていたところ、コードコメントを受け、新しい方法でコードを書きました.
    	const formatDate = () => {
    		const DATE: Date = new Date();
    		const year = DATE.getFullYear().toString().substring(2, 4);
    		const month = DATE.getMonth() + 1 < 10 ? "0" + (DATE.getMonth() + 1) : DATE.getMonth() + 1;
    		const date = DATE.getDate() < 10 ? "0" + DATE.getDate() : DATE.getDate();
    		const time = DATE.getHours() < 10 ? "0" + DATE.getHours() : DATE.getHours();
    		const minute = DATE.getMinutes() < 10 ? "0" + DATE.getMinutes() : DATE.getMinutes();
    
    		return year + "-" + month + "-" + date + ", " + time + ":" + minute;
    	};
    
    明らかに同じ機能を持つコードです.しかし、どのコードがもっとよく見えるかと聞くと、次のコードを選択します.コードの可視性も向上したため,if文の代わりに3つの演算子を用いることで,コードの長さ自体も減少した.また,タイプ推論に基づいてデータ型を指定する必要もない.また、この関数の実行時にのみ値が入力されるので、letではなくconstを使用することができる.
    2.基礎が大切
    日付フォーマットを作成するためにDate()コンストラクタを使用しましたが、typeScriptを使用したため、最初からエラーが発生しました.グーグルで問題を解決しましたが、実は私もなぜ間違っているのか分かりません.習ったくせに、習っただけで、実際の仕事では使えない.
    また,getMonth()手法を用いると,当然1~12の数字が現れると考えられ,当然0~11である.また,3つの演算子も毎日使用されているが,実際にはここでは思い出せずifゲートで解決しようとしている.経験不足と言ってもいいのですが、やはり基礎が足りないと思います.分からないことはたくさんありますが、知っていることを書くのも一つの能力だと思います.プロジェクトを始めたとき、javascriptの勉強を怠ってしまいましたが、元気を出して勉強し直すことを決意しました.