[typescript] 함수

함수타입선언

매개변수에 타입설정, 리턴값에 타입설정

 

1)인수와 반환 값이 있을 때

let myFunction: (arg1: number, arg2: number) => number;
myFunction = function(x,y){
    return x + y
}
//화살표 함수
myfunction =(x,y) => {
	return x + y
}

let num:number = myFunction(10,20);
console.log(num)
function myFunction2(x: number, y: number): number {
    return x + y
}

 

2)인수와 반환값이 없을 때 void (리턴이 없을때 사용)

function myFunction3() : void {
    console.log("hi");
}

let myFunction4: () => void;
myFunction4 = function(){
    console.log("hi")
}

 

3) interface

interface Add {
    (num1: number, num2: number): number;
}

let myFunction5: Add = function(num1, num2) {
    return num1 + num2
}

 

4) 매개변수가 여러개일 때 (선택적 매개변수가 뒤로 가야함. 앞에 있으면 에러 발생)

function printUser(name: string, age?: number) {
    return `Hello ${name} age ${age}`;
}
printUser("green");

 

5) 함수 옵셔널 매개변수

//함수 옵셔널 매개변수
function showName(name?: string) {
    return` Hello ${name} || 'aaa'`;
}
//두번째 방법
function showName2(name="aaa"){
    return `Hello ${name}`
}

console.log(showName("green"))
console.log(showName());
console.log(showName2("green"))
console.log(showName2())

//Hello green || 'aaa'
//Hello undefined || 'aaa'
//Hello green
//Hello aaa

 

6)함수 나머지 매개변수

//함수 나머지 매개변수
function addArr(...nums:number[]){
    console.log(nums);
}

addArr(1, 2, 3);
addArr(1, 2, 3, 4, 5, 6, 7, 8)


//[ 1, 2, 3 ]
//[1, 2, 3, 4, 5, 6, 7, 8]

 

7) 함수에서 this타입 지정

//함수에서의 this 타입 지정
interface User2 {
    name: string
}

let yellow: User2 = {
    name: "yellow"
}
function printUserName(this:User2){
    console.log(this.name)
}

const myFun = printUserName.bind(yellow)
myFun()

function printUserName2(this:User2, age:number){
    console.log(age, this.name);
}

const myFun2 = printUserName2.bind(yellow);
//전달된 값 30은 this다음 매개변수에 전달됨
myFun2(30);


//yellow
//30 yellow

 

this 참고

2023.01.23 - [javascript 고급문법] - [javascript] this키워드

[javascript] this키워드

 

8)함수 오버로드 (리턴해야할 타입이 다른 타입이 있어야 할 때)

이름은 같고 매개변수 타입과 반환타입이 다른 여러 함수를 만들 수 있음
다양한 구조의 함수를 생성하고 관리할 수 있음

interface Person200 {
    name: string;
    age: number;
}

function join(name: string, age: string): string;
function join(name: string, age: number): Person200 ;  
function join(name:string, age: string | number) : string | Person200 {
    if(typeof age === "number") {
        return {
            name: name,
            age: age
        }
    } else {
        return "나이는 숫자로 입력하세요";
    }
}

const green2: Person200 = join("green", 30);
const blue: string = join("blue", "hi")