본문 바로가기

JavaScript/TypeScript

타입스크립트 함수

반응형
function add2(num1: number, num2: number):number {
    console.log(num1+num2);
    return num1+ num2;
}
function add3(num1: number, num2: number):void {
    console.log(num1+num2);
}
function isAdult2(key:number):boolean{
    return age>19;
}

//인터페이스처럼 함수의 매개변수도 옵셔널로 지정 가능 (optional parameter; 선택적 매개변수)
function hello(name?:string){
//function hello(name:string){
    return `Hello, ${name||"world"}`;
    //name이 없으면 world 
}
const result =hello();
const result2 =hello("sam");
//name이 없으면 world라고 되어있지만, 타입명시 필요 
//const result1 =hello(12);
//-> (name?:string) : undefined or string

//매개변수에 기본값 정의 가능
function hello2(name ="world"){
    return `Hello, ${name}`; 
}

//이름, 나이를 받아서 문자열 출력
function hello3(name:string, age?: number): string{
//function hello3(age?: number,name:string): string{
//-> 선택적 매개변수가 앞에 오면 에러 발생
    if(age !== undefined){
        return `Hello, ${name}. You are ${age}.`;
    }else{
        return `Hello, ${name}`;
    }
}

//필수가 아닌 매개변수가 앞에 오게 하려면 (유니언 타입 이용)
function hello4(age: number|undefined, name:string): string{
    if(age !== undefined){
        return `Hello, ${name}. You are ${age}.`;
    }else{
        return `Hello, ${name}`;
    }
}
//number나 undefined 가능 -> 단 명시적으로 undefined 전달
console.log(hello4(undefined, "sam"));


//나머지 매개변수
function add4(...nums : number[]){
    return nums.reduce((result, num) => result +num, 0);
}
//개수가 매번 바뀔 수 있는 매개변수 -> 전달된 매개변수를 배열로 나타내게 한다.

//타입스크립트에서의 this
interface User5{
    name: string;
}

const Smith: User5 ={
    name:'Smith'
} 



//this는 사용하는 방법에 따라 달라진다. -> bind
function showName(){
    //console.log(this.name);
    //this의 타입이 명시되지 않아서 에러발생
        
}

//this의 타입을 명시하는 방법: 함수의 첫번째 매개변수자리에 this:타입 명시
function showName2(this:User5){
    console.log(this.name);
        
}
//매개변수 있을 경우
function showName3(this:User5, age:number, gender:'m'|'f'){
    console.log(this.name, age, gender);
        
}

const a4 = showName.bind(Smith);
const a5 = showName2.bind(Smith);
const a6 = showName3.bind(Smith);

a4();
a5();
a6(30,'m');
//this다음부터 순서대로 매개변수로 적용된다.

//인터페이스 - 함수 (검증기)

//동일한 매개변수라도 타입을 다르게 줄 수 있는 특징을 가진 자바스크립트
//전달받은 매개변수의 타입에 따라서 함수의 반환형이 달라진다. -> 함수 오버로드
function join(name:string,age:string):string;
function join(name:string,age:number):User;
function join(name:string,age:number|string):User | string{
    if(typeof age ==="number"){
        return{
            name,
            age
        };
    }else{
        return "나이는 숫자로 입력해주세요."; 
    }
}
//User 객체 혹은 string를 리턴하는 함수

//함수오버로드 적용전 (sam이 객체를 반환할지 문자열을 반환할지 타입 명시가 불확실하므로)
const sam: User|string =join("Sam", '1');
const jane: User|string =join("Jane", 30);
//함수오버로드 적용후
const sam2: string =join("Sam", '1');
const jane2: User =join("Jane", 30);
console.log(sam);
console.log(jane);
console.log(sam2);
console.log(jane2);

 


bind(항상 this로 받을 변수)
:함수의 this 값을 영구히 바꾼다.

function update(birthYear, occupation){
   this.birthYear = birthYear;
   this.occupation = occupation;
}

const updateMike = update.bind(mike);

//항상 mike의 프로퍼티를 바꾸는 메서드
updateMike(1980, "police);
반응형