<div id="readability-page-1" class="page"><div><h2 id="1-선택적-매개변수">1. 선택적 매개변수</h2>
<pre><code>function hello(name?: string) {
    return `hello, ${name}`;
}

console.log(hello())</code></pre>
<ul>
<li>여러 매개변수를 쓸 때 주의점<br>
<img src="https://velog.velcdn.com/images/2taesung/post/7c0b7c22-6732-4967-8d7f-7a5d5e177bd9/image.png"></li>
</ul>
<p>=&gt; 선택적 매개변수는 필수 매개변수 앞에 있으면 안된다.</p>
<p><img src="https://velog.velcdn.com/images/2taesung/post/5d4cc765-7615-49ea-b8ea-ec9503ae5d78/image.png"></p>
<p>앞뒤로 섞여도 소용 없음</p>
<p>=&gt; 굳이 쓰겠다면 undefined을 통해 명시적으로 변수를 넣어주어야함</p>
<pre><code>function hello(name: string | undefined, age: number) {
    return `${name}, ${age}`;
}

console.log(hello(undefined, 1))</code></pre>
<h2 id="2-default-매개변수-js와-동일">2. default 매개변수 (js와 동일)</h2>
<pre><code>function hello2(name='태성') {
    return `hello, ${name}`;
}

console.log(hello())</code></pre>
<p><img src="https://velog.velcdn.com/images/2taesung/post/92adeb64-ccd4-4906-9eaa-bf1ca984d3de/image.png"></p>
<p>=&gt; 매개변수 안에 특정한 값을 넣어주기 때문에<br>
=&gt; 이를 통해서 타입을 제공해줄 수 있는듯</p>
<h2 id="3-전개구문">3. 전개구문</h2>
<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax">https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax</a></p>
<pre><code>function add(...nums: number[]) {
    return nums.reduce((result, num) =&gt; result + num, 0);
}

console.log(add(1, 2, 3));
console.log(add(1, 2, 3,4, 5, 6));</code></pre>
<h2 id="4-this-처리">4. this 처리</h2>
<pre><code>interface User {
    name: string;
}

const Sam: User = {name: 'Sam'};

function showName(this: User, age:number) {
    console.log(this.name, age);
}

const a = showName.bind(Sam);
a(1);</code></pre>
<p>=&gt; 앞의 this가 있더라도 뒤에 전달된 매개변수가 있다면 그것들부터 인식 시작.</p>
<h2 id="5-function-overloading">5. Function Overloading</h2>
<p><a href="https://www.tutorialsteacher.com/typescript/function-overloading">https://www.tutorialsteacher.com/typescript/function-overloading</a></p>
<p><img src="https://velog.velcdn.com/images/2taesung/post/c03c9619-cbbc-4380-a803-529179fa210c/image.png"></p>
<p>=&gt; 함수 안에서는 분명히 type에 따라 분기처리가 되어있는데<br>
=&gt; ts는 주어진 타입을 체크하기 때문에<br>
=&gt; return 값이 User(Object)일지 String 일지 확신할 수 없게 됨 </p>
<pre><code>interface User {
    name: string;
    age: number;
}
function join(name: string, age: number): User;
function join(name: string, age: string): string;
function join(name: string, age: number | string): User | string {
    if (typeof age === "number") {
        return {
            name,
            age,
        };
    } else {
        return '나이는 숫자로 입력';
    }
}

// console.log(join('ts', 1));
// console.log(join('ts', 'dd'));

const sam: User = join("Sam", 30);
const jane: String = join("Jane", "30");</code></pre></div></div>

2taesung.log

Taesung Lee

1. 선택적 매개변수
function hello(name?: string) {
    return `hello, ${name}`;
}
console.log(hello())
여러 매개변수를 쓸 때 주의점
=> 선택적 매개변수는 필수 매개변수 앞에 있으면 안된다.
앞뒤로 섞여도 소용 없음
=> 굳이 쓰겠다면 undefined을 통해 명시적으로 변수를 넣어주어야함
function hello(name: string | undefined, age: number) {
    return `${name}, ${age}`;
}
console.log(hello(undefined, 1))
2. default 매개변수 (js와 동일)
function hello2(name='태성') {
    return `hello, ${name}`;
}
console.log(hello())
=> 매개변수 안에 특정한 값을 넣어주기 때문에 
=> 이를 통해서 타입을 제공해줄 수 있는듯
3. 전개구문
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
function add(...nums: number[]) {
    return nums.reduce((result, num) => result + num, 0);
}
console.log(add(1, 2, 3));
console.log(add(1, 2, 3,4, 5, 6));
4. this 처리
interface User {
    name: string;
}
const Sam: User = {name: 'Sam'};
function showName(this: User, age:number) {
    console.log(this.name, age);
}
const a = showName.bind(Sam);
a(1);
=> 앞의 this가 있더라도 뒤에 전달된 매개변수가 있다면 그것들부터 인식 시작.
5. Function Overloading
https://www.tutorialsteacher.com/typescript/function-overloading
=> 함수 안에서는 분명히 type에 따라 분기처리가 되어있는데
=> ts는 주어진 타입을 체크하기 때문에 
=> return 값이 User(Object)일지 String 일지 확신할 수 없게 됨 
interface User {
    name: string;
    age: number;
}
function join(name: string, age: number): User;
function join(name: string, age: string): string;
function join(name: string, age: number | string): User | string {
    if (typeof age === "number") {
        return {
            name,
            age,
        };
    } else {
        return '나이는 숫자로 입력';
    }
}
// console.log(join('ts', 1));
// console.log(join('ts', 'dd'));
const sam: User = join("Sam", 30);
const jane: String = join("Jane", "30");

[ts] 함수

댓글