🔀: Udemy/Ts/section2/26 (#30)

* 🌱:  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번 강의를 듣고 실습을 했다.

* 🚩: return의 정의로 함수 타입이 반환되는 예시

* 🚩: 함수 반환 타입을 지정 했을 때 발생하는 error

* 🐛: 함수의 반환타입 error ts(2322)를 정상 동작하게 number로 타입을 할당, void와 undefined의 개념 및 활용 실습

* 🚩: undefined를 함수에 사용하면 안되는 이유

Author: 4BFC

src/app.js

@@ -1,6 +1,24 @@
-//console.log(person.name); 으로 person.name, 객체 타입으로 접근하기 위한 object 타입 정의 방법
-var person = {
-    name: 'Maximilian',
-    age: 30
-};
-console.log(person.name); //error : Object에 name이 없습니다. 그렇다면 어떻게 해야할까?
+//항상 유니온 타입을 지정하는 것은 많이 번거롭다. 이에 alias 타입으로 사용자 지정 타입을 정할 수 있다. 즉, 타입을 우리가 다로 별칭으로 만들어 낼 수 있다.
+function combine(n1, n2, resultConversion) {
+    var result;
+    if (typeof n1 === 'number' && typeof n2 === 'number' || resultConversion === 'as-number') {
+        result = +n1 + +n2;
+    }
+    else if (typeof n1 === 'string' && typeof n2 === 'string') {
+        result = n1 + n2;
+    }
+    else {
+        result = n1.toString() + n2.toString();
+    }
+    // if (resultConversion === 'as-number') {
+    //   return +result;
+    // } else {
+    //   return result.toString();
+    // }
+}
+var combineAges = combine(20, 30, 'as-number');
+console.log(combineAges);
+var combinedStringAges = combine('20', '30', 'as-number');
+console.log(combinedStringAges);
+var combineNames = combine('Max', 'Anna', 'as-text');
+console.log(combineNames);

src/app.ts

@@ -1,33 +1,24 @@
-//항상 유니온 타입을 지정하는 것은 많이 번거롭다. 이에 alias 타입으로 사용자 지정 타입을 정할 수 있다. 즉, 타입을 우리가 다로 별칭으로 만들어 낼 수 있다.
+function add(n1: number, n2: number): number {
+  return n1 + n2; //error ts(2322) 'number' 형식은 'string' 형식에 할당할 수 없습니다.
+} //현재 return에 정의한 n1+n2로 인해서 add함수의 반환 타입은 Number이다. 만약 toSting으로 형변환을 한 `n1.toString() + n2.toString()`일 경우 반환된 값은 string으로 타입이 반환 될 것이다.
 
-type Combinable = number | string;
-type ConversionCustom = 'as-number' | 'as-text';
-
-function combine(
-  n1: Combinable,
-  n2: Combinable,
-  resultConversion: ConversionCustom,
-) {
-  let result;
-  if (typeof n1 === 'number' && typeof n2 === 'number' || resultConversion === 'as-number') {
-    result = +n1 + +n2;
-  } else if (typeof n1 === 'string' && typeof n2 === 'string') {
-    result = n1 + n2;
+function printResult(num: number | string | undefined): void {
+  if (typeof num === 'number' || typeof num === 'string') {
+    console.log('Result: ', +num);
   } else {
-    result = n1.toString() + n2.toString();
+    console.log('this is Undefined!');
   }
-  // if (resultConversion === 'as-number') {
-  //   return +result;
-  // } else {
-  //   return result.toString();
-  // }
-}
+} //일반적으로 함수의 반환 타입을 정하지 않으면 void로 판단한다. `:void`를 명시하지 않아도 해당 함수에 마우스를 호버하면 void로 판별 되어 있는 것을 확인 할 수 있다. 따라서 굳이 void를 명시할 필요는 없다.
 
-const combineAges = combine(20, 30, 'as-number');
-console.log(combineAges);
+//반환되지 않는 함수를 기준으로 log로 확인을 해보면 어떤 결과가 나올까
+console.log(printResult(add(5, 12))); //결과적으로 `undefined`라는 결과가 나온다. 반환된 값이 없기 때문에 정의되지 않은 박스만 출력이 되는 것이다. 참고로 `undefined`는 값이 없는게 아니라 값을 담아내고 있는 박스에 아무것도 담겨 있지 않다는 의미의 `값`이다. 즉, 비어 있는 박스를 출력한 것이다.
 
-const combinedStringAges = combine('20', '30', 'as-number');
-console.log(combinedStringAges);
+let UndefinedValue: undefined;  //변수로 undefined라는 타입을 지정할 수는 있다. 하지만 함수에서는 undefined라는 타입을 할당 하면 안된다. 반환값이 없는 함수를 출력하면 undefined가 출력되는데 이는 함수의 활용과 의미가 상실하게 된다.
+
+function UndefinedFunction(value: string): undefined {
+  console.log(value);
+  // return value; //error ts(2322) -> 'string' 형식은 'undefined' 형식에 할당할 수 없습니다
+  return; //결과적으로 함수에 아무것도 없는 return이여야 undefined가 된다.
+}
 
-const combineNames = combine('Max', 'Anna', 'as-text');
-console.log(combineNames);
+printResult(UndefinedFunction('test'));

src/basics.ts

@@ -9,11 +9,11 @@ function addTemplate(n1: number, n2: number, showResult: boolean, phrase: string
 
 const number1 = 5;
 const number2 = 2.8;
-const printResult = true;
+const printResultTemp = true;
 const resultPhrase = 'Result is: ';
 // resultPhrase = 0;  //error -> 타입 추론으로 resultPhrase는 string이다. 따라 0이라는 number타입을 할당할 수 없다.
 
-addTemplate(number1, number2, printResult, resultPhrase);
+addTemplate(number1, number2, printResultTemp, resultPhrase);
 
 const person: {
   name: string,

src/union-aliases.ts.ts

@@ -0,0 +1,31 @@
+type Combinable = number | string;
+type ConversionCustom = 'as-number' | 'as-text';
+
+function combine(
+  n1: Combinable,
+  n2: Combinable,
+  resultConversion: ConversionCustom,
+) {
+  let result;
+  if (typeof n1 === 'number' && typeof n2 === 'number' || resultConversion === 'as-number') {
+    result = +n1 + +n2;
+  } else if (typeof n1 === 'string' && typeof n2 === 'string') {
+    result = n1 + n2;
+  } else {
+    result = n1.toString() + n2.toString();
+  }
+  // if (resultConversion === 'as-number') {
+  //   return +result;
+  // } else {
+  //   return result.toString();
+  // }
+}
+
+const combineAges = combine(20, 30, 'as-number');
+console.log(combineAges);
+
+const combinedStringAges = combine('20', '30', 'as-number');
+console.log(combinedStringAges);
+
+const combineNames = combine('Max', 'Anna', 'as-text');
+console.log(combineNames);

tsconfig.json

@@ -1,25 +1,25 @@
 {
- "compilerOptions": {
-   "target": "es5",
-   "lib": [
-     "dom",
-     "dom.iterable",
-     "esnext"
-   ],
-   "allowJs": true,
-   "skipLibCheck": true,
-   "allowSyntheticDefaultImports": true,
-   "strict": true,
-   "forceConsistentCasingInFileNames": true,
-   "noFallthroughCasesInSwitch": true,
-   "module": "commonjs",
-   "outDir": "dist",
-   "rootDir": "src"
- },
- "include": [
-   "src/**/*"
- ],
- "exclude": [
-   "node_modules"
- ]
+"compilerOptions": {
+  "target": "es5",
+  "lib": [
+    "dom",
+    "dom.iterable",
+    "esnext"
+  ],
+  "allowJs": true,
+  "skipLibCheck": true,
+  "allowSyntheticDefaultImports": true,
+  "strict": true,
+  "forceConsistentCasingInFileNames": true,
+  "noFallthroughCasesInSwitch": true,
+  "module": "commonjs",
+  "outDir": "dist",
+  "rootDir": "src"
+},
+"include": [
+  "src/**/*"
+],
+"exclude": [
+  "node_modules"
+]
 }