Typescript - 함수와 메서드

Typescript 함수와 메서드를 공부하고 기록합니다.

---

함수 선언문

 

타입 스크립트 함수 선언문은 자바스크립트 함수 선언문에서 매개변수와 함수 반환 값에 타입 주석을 붙이는 형태이다. 변수 때와 마찬가지로 함수 선언문에서도 매개변수와 반환 값에 대한 타입 주석을 생략할 수는 있으나 타입이 생략되어 있으면 함수의 구현 의도를 알기 어렵기 때문에 바람직하지 않다.

 

function 함수이름(매개변수1: 타입1, 매개변수2: 타입2): 반환값 타입{
	함수  몸통
}
 
function add(a:number, b:number):number{
	return a+b
}

 

void 타입

 

값을 반환하지 않는 함수는 반환 타입이 void이다. void 타입은 함수 반환 타입으로만 사용 가능하다.

function print(name:string):void{
	console.log(`name: ${name}`)
}

 

함수 시그니처

 

함수의 타입을 함수 시그니처라고 한다.

매개변수가 없으면 단순히 ( )로 표한한다. ( ) => void는 매개변수도 없고 반환 값도 없는 함수 시그니처이다.

(매개변수1 타입, 매개변수2 타입)=>반환값 타입
 
ex)
const print: (string) => void = function(name:string):void {}

 

타입 별칭

 

타입 스크립트는 type이라는 키워드를 제공한다. type 키워드는 기존에 존재하는 타입을 단순히 이름만 바꿔서 사용할 수 있게 해 준다. 이런 기능을 타입 별칭이라 한다.

함수 시그니처를 명시하면 매개변수의 개수나 타입, 반환 타입이 다른 함수를 선언하는 잘못을 미연에 방지할 수 있다.

type 새로운 타입 = 기존 타입
 
type stringNumberFunc = (string,number) => void
const f: stringNumberFunc = function(a:string,b:number):void {}

 

undefined 관련 주의 사항

 

undefined는 모든 타입 중 최하위 타입이다. 따라서 undefined를 고려해 코드를 작성해야 한다.

 

interface INameable{
	name: string
}
 
function getName(o: INameable){
	return o != undefined ? o.name : 'unknown name'
}
 
const n = getName(undefined)
console.log(n) // unknown name
console.log(getName({name:'Min'}) // Min

 

선택적 매개변수

 

함수의 매개변수에도 물음표를 붙여 선택적 매개변수를 표현할 수 있다.

function f(arg1:string, arg2?: number): void {}

 

함수 표현식

 

함수 이름을 제외한 function(a, b) {return a+b}와 같은 코드를 함수 표현식이라 한다.

 

일등 함수

 

프로그래밍 언어가 일등 함수  기능을 제공하면 '함수형 프로그래밍 언어'라고 한다. 일등 함수란, 함수와 변수를 구분하지 않는다는 의미다.

 

익명 함수

 

연산자 우선순위를 신경써 함수 표현식의 시작과 끝 부분을 소괄호로 묶어서 컴파일러가 알 수 있게 해야 한다.

const a =(function(a,b){return a+b})(1,2) // 3

 

실행문과 표현식 문

 

중괄호 여부에 따라 실행문 방식과 표현식 문 방식으로 달라진다.

 

const M =(a:number,b:number):number =>{return a+b} // 실행문 방식 몸통
const N =(a:number,b:number):number => a+b // 표현식 문 방식 몸통

 

default 매개변수

 

(매개변수: 타입 = 매개변수 기본값)
 
type: Person = {name:string,age:number}
const Me = (name:string, age:number =10):Person =>({name,age})

 

색인 키와 값으로 객체 만들기

{[key]: value} 형태의 타입을 색인 기능 타입이라 한다.

type KeyType={
	[key:string]: string
}
 
 
const makeObject = (key: string, value: string): KeyType=>({[key]: value})
console.log(makeObject('name','Min')) // {name:'Min'}

 

function 함수와 this 키워드

 

function 키워드로 만든 함수는 Function이란 클래스의 인스턴스, 즉 함수는 객체다. 따라서 객체지향 언어에서 인스턴스는 this 키워드를 사용할 수 있으므로 타입 스크립트에선 function 키워드로 만든 함수에 this 키워드를 사용할 수 있다.

반면에 화살표 함수에는 this 키워드를 사용할 수 없다.

class A{
 value: number =1
 method: ()=>void= function():void{
 	console.log(`value:${this.value}`)
    }
}
 
A.method() // value: 1