함수도 타입 지정이 가능하다고 배웠다. 변수의 타입 리턴값의 타입을 지정할수있는데 너무 길어지면 type alias 를 사용해서 넣을수 있다.
하지만 type alias에 함수 type을 저장해서 사용할수도 있다.
위 이미지 처럼 사용할수있는데 type문법을 사용해서 변수가 받을 타입 => 뒤에는 리턴 타입을 지정할수있다.
함수 type alias 를 부착하려면 함수 표현식을 사용해야한다.즉 함수를 정의하는 다른 방법을 써야한다는것이다. 이렇게 함수 표현식을 사용해서 함수 type을 지정할수 있다.그럼 굳이 변수 타입 리턴 타입을 지정할 필요가 없다.
참고
function A (){ } ->이런 형식은 함수 선언문
let A = function(){ } -> 이런 형식은 함수 표현식
함수 타입지정하는법을 배웠는데 위 그림처럼 objcet안에도 함수를 만들수 있다. 그렇다면 저 함수는 어떻게 사용하는가?
이처럼 object에 접근한후 함수를 호출하면 사용할수있다.그냥 일반 자료와 똑같다. 그저 object안에 함수가 실행될뿐이다.
그렇다면 저 안에있는 함수에는 타입을 어떻게 지정할까?
이런식으로 타입을 지정하지 않으면 에러가 발생한다. 함수는 항상 예측 가능한 값을 넣고 뺄수 있어야 좋은함수로 여겨진다. 그렇기 때문에 타입을 꼭 지정하라고 권유하는걸수도 있다.이제 아래 숙제를 풀면 되는데 그전에 숙제를 위한 콜백함수에 대해 설명해보자.
콜백함수
함수안에 함수가 들어가는것을 콜백함수라고 한다.전문적으로 말하면 함수가 실행되고 나서 바로 실행하는 함수를 콜백함수라고 한다.
let 회원정보 = {
name : 'kim',
age : 30,
plusOne (x){
return x + 1
},
changeName : () => {
console.log('안녕')
}
}
회원정보.plusOne(1);
회원정보.changeName();숙제1) 위 코드에서 회원정보라는 변수에 타입지정 알아서 해보십시오.
-
plusOne이라는 속성은 함수여야하고, 숫자를 넣어서 숫자를 뱉는 함수여야합니다.
-
changeName이라는 속성은 함수여야하고, 아무것도 return하면 안됩니다.
-
type 키워드를 쓰든 말든 알아서 합시다.
나의 풀이
type 회원정보 ={
name : string,
pluseOne :(a:number)=>number,
changeNmae :() => void
}
let 회원정보2:회원정보 ={
name:'kim',
pluseOne(a){return a+1},
changeNmae(){}
}
센세 풀이
type Member = {
name : string,
age : number,
plusOne : ( x :number ) => number,
changeName : () => void
}
전 이렇게 했다고 합니다.
진짜 되는지 확인하려면 위에서 만든 let 회원정보에 Member 타입 집어넣어보셈
에러안나면 성공입니다. 숙제2) 다음 함수2개를 만들어보고 타입까지 정의해보십시오.
-
cutZero()라는 함수를 만듭시다. 이 함수는 문자를 하나 입력하면 맨 앞에 '0' 문자가 있으면 제거하고 문자 type으로 return 해줍니다.
-
removeDash()라는 함수를 만듭시다. 이 함수는 문자를 하나 입력하면 대시기호 '-' 가 있으면 전부 제거해주고 그걸 숫자 type으로 return 해줍니다.
-
함수에 타입지정시 type alias를 꼭 써보도록 합시다.
물론 문자제거 하는 방법을 모른다면 구글검색이 필요합니다.
나의 풀이
type Cut = (a:string) => string;
type Dash = (a:string) => number;
var cutZero:Cut= function (a){
if(a.charAt(0)==='0'){
return a.substring(1);
}else{
return a;
}
}
var removeDash:Dash=function (a){
if(a.includes('-')){
return Number(a.replaceAll('-',''));
}else{
return Number(a);
}
}
console.log(cutZero('0;A0VC'))
console.log(removeDash('-23-20-30-3'))센세 풀이
type CutType = (x :string) => string
let cutZero :CutType = function (x){
let result = x.replace(/^0+/, "");
return result
}
function removeDash(x :string) :number{
let result = x.replace(/-/g, "");
return parseFloat(result)
}
한개만 type alias 써봤는데 나머지도 써보십시오.
cutZero는 파라미터 입력하면 첫 글자 0을 제거해주고 return,
removeDash는 파라미터 입력하면 - 대시제거해주고 return 하라고 썼습니다.
/어쩌구/ 이건 정규식문법인데 정규식은 글자에서 원하는 글자를 찾는 식일 뿐입니다. 처음본다면 검색해보도록 합시다.
그리고 removeDash는 return 하기 전에 숫자로 변형했습니다.
숙제3) 함수에 함수를 집어넣고 싶습니다.
숙제2에서 만든 함수들을 파라미터로 넣을 수 있는 함수를 제작하고 싶은 것입니다.
이 함수는 파라미터 3개가 들어가는데 첫째는 문자, 둘째는 함수, 셋째는 함수를 집어넣을 수 있습니다. 이 함수를 실행하면
-
첫째 파라미터를 둘째 파라미터 (함수)에 파라미터로 집어넣어줍니다.
-
둘째 파라미터 (함수)에서 return된 결과를 셋째 파라미터(함수)에 집어넣어줍니다.
-
셋째 파라미터 (함수)에서 return된 결과를 콘솔창에 출력해줍니다.
이 함수는 어떻게 만들면 될까요?
둘째 파라미터엔 cutZero, 셋째 파라미터엔 removeDash 라는 함수들만 입력할 수 있게 파라미터의 타입도 지정해봅시다.
나의 풀이
function Funct(a:string,b,c){
var re = b(a);
return c(re);
}
console.log(Funct('010-1111-2222', cutZero, removeDash));센세 풀이
function 만들함수(a, func1, func2){
let result = func1(a);
let result2 = func2(result);
console.log(result2)
}
만들함수('010-1111-2222', cutZero, removeDash) //1011112222 출력잘됨
자바스크립트 3줄 이상 못읽는 초보는 타입스크립트부터 보면 혼절합니다.
그래서 타입지정없이 먼저 짜보는 것도 좋은 선택입니다.
그래서 저는 코드를 어떻게 짰냐면
1. 만들함수에 입력한 a라는 파라미터를 func1() 함수에 집어넣습니다.
2. 집어넣은 결과를 result에 저장합니다.
3. 그걸 다시 func2() 함수에 집어넣습니다.
4. 최종결과를 콘솔창에 출력했습니다.
이제 타입지정하면 끝임
우선 파라미터 3개에 타입 지정을 해보겠습니다.
type 함수타입1 = (a :string) => string;
type 함수타입2 = (a :string) => number;
function 만들함수(a :string, func1 :함수타입1, func2 :함수타입2){
let result = func1(a);
let result2 = func2(result);
console.log(result2)
}
만들함수('010-1111-2222', cutZero, removeDash) //1011112222 출력잘됨
첫 파라미터는 당연히 문자 들어올 수 있다고 쓰면 되겠고
둘째 파라미터는 cutZero같은 함수가 들어와야합니다. 그래서 함수타입을 alias로 만들어봤습니다.
셋째 파라미터는 removeDash같은 함수가 들어와야합니다. 그래서 함수타입을 alias로 만들어봤습니다.