[typescript] 함수

"변수 ?: 타입" 의 의미
ㄴ> 변수 : 타입 | undefined와 같음

string + number (가능)
number + number (가능)
(string | number) + number (불가능) => 유니온 타입은 타입이 확실하지 않다고 처리해서 더하기 연산 불가

function add (x :number | string) {
	if(typeof x === 'number'){  //narrowing : 애매한 유니온타입의 연산시 미리 검사해줘야 함
    	console.log(x + 1);
        }
     }

 

매개변수, 리턴값에 대한 타입지정 / 매개변수를 옵셔널하게 지정할 때 

//함수 

function addCalc (num1:number, num2:number):number {//():타입은 리턴값에 대한 타입
	return num1 + num2;
}

function AddCalc (num1:number, num2:number):void { //리턴 값이 없으면 void로 설정
	console.log(num1 + num2);
}

function hello1(name?: string){ //?:타입 으로 지정하면 해당값은 있어도 되고 없어도 됨
                                //name은 undefined이거나 string이어야 함 
	return `hello, ${name || "world"}`; //optional지정
}

hello1(); //매개변수 name가 ?:으로 optional하지 않으면 매개변수 입력 안했을 때 에러남
          //즉, optional하지 않는 한 ts는 지정된 파라미터는 꼭 입력해줘야 에러안남 

function hello2(name="world"){  //name의 기본값을 줘서 optional하게 이용도 가능 , 타입은 hello1과 동일하게 설정됨
	return `hello, ${name}`; 
}

//아래와 같이 옵셔널한 매개변수가 필수 매개변수 앞에 올수 없음 
//function person (age?: number, name:string){...}
//굳이 하고 싶다면 아래와 같이 표기할 것 => 하지만 필수 매개변수가 앞에 오는것이 논리적임
function person (age : number | undefined, name: string ):string{
	//타입의 옵셔널은 ||아니고 |로 표기주의
	if(age !== undefined){
		return `hi, ${name}. You're ${age}`;
	} else {
		 return `hi, ${name}.`;
	}
}

 

매개변수 여러개 받기 / this의 타입값 지정 방법 

function add (...nums:number[]){ //숫자로 된 배열
	//...nums은 매개변수의 갯수를 유동적으로 사용가능하고 이를 배열형태로 전달함 
	return nums.reduce((result, num )=> result + num, 0);
}
add(1,2,3,4,5,6,7,8,9,10); //55
add(1,2,3,4); //10

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

const Sam:User = {name :'Sam', age:100};

function showName(this:User){//this의 타입은 매개변수 첫번째 자리에 지정
	console.log(this.name); 
}
const a = showName.bind(Sam); //바인드를 이용해서 showName의 this를 Sam객체로 함
a(); //"Sam"

 

매개변수에 따라 반환값이 달라질 때는 아래와 같이 case에 대해 오버로드 작성해야함

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

function join (name:string, age:number):User  //age가 number이면 User반환
function join (name:string, age:string):string //age가 string이면 string 반환
function join (name:string, age:number | string):User | string {
	//age의 값에 따라 반환값이 달라질때 해당 함수 위에 오버로드 작성해야 함
	if (typeof age === 'number'){
		return {
			name,
			age,
		};
	} else {
		return "나이는 숫자로 입력해 주세요.";
	}
}
const sam :User = join("Sam", 30);
const jane :string = join("Jane", "30");