🔀: Udemy/Ts/section2/29 (#33)

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱:  README을 수정

Github에서 수정한 커밋입니다.

* 🌱: issue templates 생성

Github에서 작성한 커밋입니다.

* 🌱: pr-template 생성

Github에서 작성한 커밋입니다.

* 🌱: pr-template 수정

Github에서 수정한 커밋입니다.

* 🌱: pr-template 수정

Github에서 수정한 커밋입니다.

* 🚩: udemy section2의 14번 강의를 듣고 실습을 했다.

* 🚩: unknown타입의 선언 방식과 any의 차이 분석

* 🚩: unknown Type으로 할당된 값을 if문을 통해 안정적으로 사용할 수 있는 예시

Author: 4BFC

src/app.ts

@@ -1,29 +1,19 @@
-function add(n1: number, n2: number): number {
-  return n1 + n2;
-}
+let userInput: unknown; // any 와 비교가 되는 unknown Type
+//unknown Type은 어떤 타입이 사용될지 모를 때 사용된다.
+//any와의 차이
+// userName에 userInput을 할당 했지만 오류가 발생한다. unknown을 any로 교체하면 해당 에러는 사라진다. 즉, 타입이 정확히 정해지지 않았을 뿐, any처럼 어떤 값이든 무작위로 사용을 허용한다는 것은 아니다. 다시 말해서 typeof로 확인을 해보면 마지막에 할당 한 값으로 userInput은 값이 할당 되어 있다.literal Type을 확인하면 여전히 unknown으로 할당이 된다.
 
-function printResult(num: number): void {
-  console.log('Result: ', +num);
-}
+let userName: string;
+userInput = 5;
+userInput = 'Max';
 
-//콜백함수
-function addAndHandle(n1: number, n2: number, cd: (num: number) => void) {
-  const result = n1 + n2;
-  //cd(result);
-  return cd(result);  //return으로 반환 값 설정
-}
+console.log(typeof userInput);
 
-const test = addAndHandle(10, 20, (result) => {
-  console.log(result);
-  return result;
-});
-//콜백함수를 사용하면 어떤 장점이 있는가?
-// 함수 안에서 콜백을 전달하면 타입스크립트는 결과가 숫자라는 것을 추론한다. 즉, 해당 함수를 사용할 때 명시적으로 코드를 작성하지 않아도 된다.
-console.log(test);  //하지만 이렇게 log를 찍어서 확인을 해보면 아무것도 없는 undefined를 반환한다. 왜냐면 반환 타입을 void로 지정했기 때문이다.
-//그렇다면 여기서 드는 의문은 addAndHandle의 void때문일까 아니면 cd의 콜백함수에서 암묵적으로 지정한 void때문일까? 이유는 리터럴 타입을 확인하면 된다. addAndHandle의 반환되는 리터럴 타입은 number이다. 타입을 지정하지 않았기 때문에 암묵적으로 result의 타입을 끌고와서 number로 타입이 지정된다. 따라서 함수 타입을 지정하거나 return값을 지정해주면 undefined가 아닌 정상적인 코드가 출력 될 것이다.
+//userName = userInput; //error ts(2322) -> 'unknown' 형식은 'string' 형식에 할당할 수 없습니다.
+//그렇다면 userName에 userInput 값을 할당이 가능하게 하려면 어떻게 해야할까? 지난 강의에서도 계속 언급했듯 if문이라는 조건문을 통해서 userName의 타입을 확인 할 수 있는 환경을 조성해주면 된다.
 
-printResult(add(1, 2));
+if (typeof userInput === 'string') {
+  userName = userInput;
+}
 
-let result: (a: number, b: number) => number;
-result = add;
-console.log(result(1, 2));
+//결론적으로 any보다 unknown으로 타입을 할당하게 되면 if문으로 검수,검토를 통해서 값을 재할당하거나 활용할 수 있기 때문에 가시적으로도 코드의 가독성적으로도 훨씬 안정적인 코드를 작성할 수 있다.

src/functions.ts

@@ -0,0 +1,24 @@
+function add(n1: number, n2: number): number {
+  return n1 + n2;
+}
+
+function printResult(num: number): void {
+  console.log('Result: ', +num);
+}
+
+function addAndHandle(n1: number, n2: number, cd: (num: number) => void) {
+  const result = n1 + n2;
+  return cd(result);
+}
+
+const test = addAndHandle(10, 20, (result) => {
+  console.log(result);
+  return result;
+});
+
+console.log(test);
+printResult(add(1, 2));
+
+let result: (a: number, b: number) => number;
+result = add;
+console.log(result(1, 2));