<div id="readability-page-1" class="page"><p><time>2021. 8. 14. 16:31</time>
                    <span>
                        
                                                    <a href="#comment" onclick="Utils.smoothScroll(this);return false">
                                
                            </a>
                        
                                                    <span id="title_daumlike">
                                
                                <span id="mobile-reaction"></span>
                                
                            </span>
                                            </span>
                </p><div>
                    <pre id="code_1598116102101" data-ke-language="javascript" data-ke-type="codeblock"><code>// 타입 생략 (비추천. 특히 함수에서는 타입을 꼼꼼히 달아두자.)
let test1 = (a, b) =&gt; {
  return a + b;
};

// 타입 주석
let test2 = (a: number, b: number): number =&gt; {
  return a + b;
};

// 함수 시그니처 이용. type 키워드를 이용해 타입 별칭 만듦
type addNumber = (arg2: number, arg1: number) =&gt; number;

let test3: addNumber = (a, b) =&gt; {
  return a + b;
};
</code></pre>

<p data-ke-size="size16">함수 시그니쳐 부분을 보시면, 어떤 인자를 받고, 무엇을 리턴하는지를 type으로 만들어 놓은 후 함수에 할당만 하면 되는, 간편한 방법을 보실 수 있습니다. 일일히 타입을 지정하는 것보다 훨씬 빠릅니다.</p>
<pre id="code_1598116242217" data-ke-language="javascript" data-ke-type="codeblock"><code>type addNumber = (arg2: number, arg1: number) =&gt; number;</code></pre>

<h4 data-ke-size="size20"><b>기본값</b></h4>
<p data-ke-size="size16">일반 함수처럼 파라미터를 정의하는 곳에 값을 할당하면 기본값이 됩니다.</p>
<pre id="code_1598120793678" data-ke-language="javascript" data-ke-type="codeblock"><code>interface IPerson {
  name: string;
  age: number;
}

export const makePerson = (name: string, age: number = 10): IPerson =&gt; {
  const person = { name, age };
  return person;
};

console.log(makePerson("jack", 23));
console.log(makePerson("mary"));</code></pre>


<h4 data-ke-size="size20"><b>객체 반환하기</b></h4>
<p data-ke-size="size16">다음과 같이 객체를 반환하려고 하면 오류를 냅니다. 왜냐하면 컴파일러는 {}를 객체가 아닌 복합 실행문으로 인식하기 때문입니다.</p>
<pre id="code_1628926052694" data-ke-language="javascript" data-ke-type="codeblock"><code>const makePerson = (name: string, age: number = 10): IPerson =&gt; {name, age};</code></pre>

<p data-ke-size="size16">쉽게 말해서, JS에서 () =&gt; {} 처럼 함수형 화살표를 사용했을 때 {}는 객체가 아니라 무언가를 실행하라는 실행문입니다.&nbsp;</p>
<p data-ke-size="size16">따라서 객체를 리턴하기 위해서는 <span data-darkreader-inline-bgcolor=""><b>() =&gt; ()</b></span> 로 표시해줘야 합니다. JS를 생각해보면 당연한 사실인데 종종 잊어버릴 때가 있습니다.</p>
<pre id="code_1628926061159" data-ke-language="javascript" data-ke-type="codeblock"><code>const makePerson = (name: string, age: number = 10): IPerson =&gt; ({name, age});</code></pre>


<h4 data-ke-size="size20"><b>매개변수에 비구조화 할당문 사용하기</b></h4>
<p data-ke-size="size16">파라미터에 비구조화 할당문을 사용할 수 있습니다만, <b><span data-darkreader-inline-bgcolor="">쉽게 보면 그냥 파라미터에 객체를 넣을 수 있다</span></b>고 봐도 무방합니다.</p>
<pre id="code_1598121390125" data-ke-language="javascript" data-ke-type="codeblock"><code>interface IPerson {
  name: string;
  age: number;
}

export const makePerson = ({ name, age }: IPerson): IPerson =&gt; ({
  name,
  age,
});

console.log(makePerson({ name: "jack", age: 23 }));
</code></pre>

<h4 data-ke-size="size20"><b>객체 만들기</b></h4>
<p data-ke-size="size16">이건 기능이라기보다 팁, 혹은 아이디어에 가깝습니다만&nbsp; [ ] 를 통해 객체의 키값을 만들어 줄 수 있다는 점을 눈여겨봅시다.</p>
<p data-ke-size="size16">typescript에서의 mapped&nbsp; type에서의 어노테이션과 비슷함을 알 수 있습니다.</p>
<pre id="code_1598121699109" data-ke-language="javascript" data-ke-type="codeblock"><code>const makeObject = (key, value) =&gt; ({ [key]: value });

console.log(makeObject("name", "darren")); // { name: 'darren' }
console.log(makeObject("item", "gun")); // { item: 'gun' }</code></pre>


<h4 data-ke-size="size20"><b>this</b></h4>
<p data-ke-size="size16">메서드 사용시 this를 잘 활용하시면 됩니다. 아시다시피 화살표 함수는 사용하면 안됩니다.</p>
<pre id="code_1598124274759" data-ke-language="javascript" data-ke-type="codeblock"><code>class A {
  value = 1;

  method() {
    return console.log(`value : ${this.value}`);
  }
}

const a = new A();
a.method();
</code></pre>

<h4 data-ke-size="size20"><b>this를 활용한 메서드 체인</b></h4>
<p data-ke-size="size16">return을 this로 하면 메서드 체인을 구현할 수 있습니다.</p>
<pre id="code_1598124564423" data-ke-language="javascript" data-ke-type="codeblock"><code>class Calc {
  constructor(public value: number = 0) {}

  add(value: number) {
    this.value += value;
    return this;
  }
}

const calc = new Calc();

console.log(calc.add(3).add(5));
</code></pre>

<h4 data-ke-size="size20"><b>void</b></h4>

<p data-ke-size="size16">일반적으로 명시적으로 return해주는 값이 없으면 void라고 하며, 딱히 함수에 명확한 정의를 내리기 애매한 경우 () =&gt; void를 곧 잘 타이핑하곤 한다.</p>

<p data-ke-size="size16">그러나 함수에서 () =&gt; void라는 타입을 할당한 경우와 직접적으로 void를 리턴값으로 명시한 경우가 다르니 조심하자.</p>
<pre id="code_1628933828901" data-ke-language="javascript" data-ke-type="codeblock"><code>type voidFunc = () =&gt; void

// void 반환은 강제가 아니라, 다른 모든 타입을 반환할 수 있음을 의미한다.
const myFunc: voidFunc = () =&gt; {
  return 'hello'
}

// 그러나 리터럴하게 함수 리턴값을 void로 정의한다면 말 그대로 아무 것도 반환해서는 안된다.
const myFunc2 = (): void =&gt; {
  return 'hello' // Type 'string' is not assignable to type 'void'.
}</code></pre>

                                                            
                    
					
                    
                    
                </div></div>

HotHandCoding

DarrenKwon

// 타입 생략 (비추천. 특히 함수에서는 타입을 꼼꼼히 달아두자.)
let test1 = (a, b) => {
  return a + b;
};
// 타입 주석
let test2 = (a: number, b: number): number => {
  return a + b;
};
// 함수 시그니처 이용. type 키워드를 이용해 타입 별칭 만듦
type addNumber = (arg2: number, arg1: number) => number;
let test3: addNumber = (a, b) => {
  return a + b;
};
 
함수 시그니쳐 부분을 보시면, 어떤 인자를 받고, 무엇을 리턴하는지를 type으로 만들어 놓은 후 함수에 할당만 하면 되는, 간편한 방법을 보실 수 있습니다. 일일히 타입을 지정하는 것보다 훨씬 빠릅니다.
type addNumber = (arg2: number, arg1: number) => number;
 
기본값
일반 함수처럼 파라미터를 정의하는 곳에 값을 할당하면 기본값이 됩니다.
interface IPerson {
  name: string;
  age: number;
}
export const makePerson = (name: string, age: number = 10): IPerson => {
  const person = { name, age };
  return person;
};
console.log(makePerson("jack", 23));
console.log(makePerson("mary"));
 
 
객체 반환하기
다음과 같이 객체를 반환하려고 하면 오류를 냅니다. 왜냐하면 컴파일러는 {}를 객체가 아닌 복합 실행문으로 인식하기 때문입니다.
const makePerson = (name: string, age: number = 10): IPerson => {name, age};
 
쉽게 말해서, JS에서 () => {} 처럼 함수형 화살표를 사용했을 때 {}는 객체가 아니라 무언가를 실행하라는 실행문입니다. 
따라서 객체를 리턴하기 위해서는 () => () 로 표시해줘야 합니다. JS를 생각해보면 당연한 사실인데 종종 잊어버릴 때가 있습니다.
const makePerson = (name: string, age: number = 10): IPerson => ({name, age});
 
 
매개변수에 비구조화 할당문 사용하기
파라미터에 비구조화 할당문을 사용할 수 있습니다만, 쉽게 보면 그냥 파라미터에 객체를 넣을 수 있다고 봐도 무방합니다.
interface IPerson {
  name: string;
  age: number;
}
export const makePerson = ({ name, age }: IPerson): IPerson => ({
  name,
  age,
});
console.log(makePerson({ name: "jack", age: 23 }));
 
객체 만들기
이건 기능이라기보다 팁, 혹은 아이디어에 가깝습니다만  [ ] 를 통해 객체의 키값을 만들어 줄 수 있다는 점을 눈여겨봅시다.
typescript에서의 mapped  type에서의 어노테이션과 비슷함을 알 수 있습니다.
const makeObject = (key, value) => ({ [key]: value });
console.log(makeObject("name", "darren")); // { name: 'darren' }
console.log(makeObject("item", "gun")); // { item: 'gun' }
 
 
this
메서드 사용시 this를 잘 활용하시면 됩니다. 아시다시피 화살표 함수는 사용하면 안됩니다.
class A {
  value = 1;
  method() {
    return console.log(`value : ${this.value}`);
  }
}
const a = new A();
a.method();
 
this를 활용한 메서드 체인
return을 this로 하면 메서드 체인을 구현할 수 있습니다.
class Calc {
  constructor(public value: number = 0) {}
  add(value: number) {
    this.value += value;
    return this;
  }
}
const calc = new Calc();
console.log(calc.add(3).add(5));
 
void
 
일반적으로 명시적으로 return해주는 값이 없으면 void라고 하며, 딱히 함수에 명확한 정의를 내리기 애매한 경우 () => void를 곧 잘 타이핑하곤 한다.
 
그러나 함수에서 () => void라는 타입을 할당한 경우와 직접적으로 void를 리턴값으로 명시한 경우가 다르니 조심하자.
type voidFunc = () => void
// void 반환은 강제가 아니라, 다른 모든 타입을 반환할 수 있음을 의미한다.
const myFunc: voidFunc = () => {
  return 'hello'
}
// 그러나 리터럴하게 함수 리턴값을 void로 정의한다면 말 그대로 아무 것도 반환해서는 안된다.
const myFunc2 = (): void => {
  return 'hello' // Type 'string' is not assignable to type 'void'.
}

func in TS (1) : 함수 시그니처, type(타입 별칭), void

댓글