[TypeScript] FUNCTIONS

call signature

함수를 어떻게 호출해야하는지, 함수의 반환 타입을 알려준다

함수 위에 올렸을 때, 보게 된다

a도 number 이고 b도 number type이면 add 함수는 number type을 반환한다는 것을 유추한다

⬇️ 그러므로 아래와 같이 항상 일일히 type을 작성할 필요 ❌

function add(a:number, b:number) :number {
	return a + b
}

 

call signature 만드는 방법

// 함수 type을 정의한 다음에 코드를 구현한다
type Add = (a:number, b:number) => number
const add:Add = (a, b) => a + b

 

overlading (오버로딩)

함수가 여러개의 call signature를 가지고 있을 때 발생시킨다

✅ 그냥 여러개가 아니라 서로 다른 여러 개의 call signature를 가졌을 때 !

 

call signature 길게 작성하는 방법

➡️ 오버로딩 때문에 이런 작성법이 있는거다

type Add = {
	(a:number, b:numebr) : number
}

example 1. 파라미터 타입이 다른 경우

type Add = {
	(a:number, b:number) : number
	(a:number, b:string) : number
}

const add:Add = (a, b) => {
	if(typeof b === "string") return a
	return a + b
}

example 2. 외부 라이브러리 or 프레임워크를 사용할 경우 

// nextJS
Router.push({
	path: "/home",
	state : 1
})
.push("home")

type Config = {
	path: string,
	state: object
}
type Push = {
	(path: srting) : void
	(config: Config) : void
}

const push:Push = (config) => {
	if(typeof config === "string") console.log(config)
	else {
		console.log(config.path, config.state)
	}
}

example 3. 파라미터의 개수가 다른 경우

// 다른 개수의 파라미터를 가지게 되면 나머지 파라미터도 타입을 지정해줘야 한다
type Add = {
	(a:number, b:number) : number
	(a:number, b:number, c:number) : number
}

// 추가적으로 타입을 줘야하고 선택사항 이라는 것을 알려주어야 한다
const add:Add = (a, b, c?:number) => {
	if(c) return a + b + c
	return a + b
}

 

polymorphism (다형성)

generic (like placeholder) 

call signature를 작성할 때 확실한 타입을 모를 시 generic를 사용한다

➡️ 타입스크립트에게 타입을 유추하도록 한다

// <T> : 기본적으로 placeholder를 사용해서 작성한 코드의 타입 기준으로 바꿔준다
// 타입스크립트는 placeholder 대신 타입스크립트가 발견한 타입으로 대체한다
function superPrint<T>(a:T[]) {
	return a[0]
}
const a = superPrint([true, false, false]) // boolean type array

// placeholder는 call signature를 요구하는 대로 생성한다
// 타입스크립트는 generic을 처음 인식했을 때와 순서를 기반으로 generic의 타입을 알게된다
type SuperPrint = <T, M>(a:T[], b:M) => T
const superPrint:SuperPrint = (a, b) => a[0]
const b = superPrint([true, false, false], "hello") // boolean type array, string

// 에러
// 타입스크립트에 overwrite 했기 때문에 -> 타입을 명시해주어서 에러가 난다
// ⛔️ Cannot redeclare block-scoped variable 'a'.
// ⛔️ Type 'number' is not assignable to type 'boolean'.
const a = superPrint<boolean>([1, 2, 3, 4])

👀 any를 쓰지 않는 이유 : 에러 발생 ❌ 보호해주지 않는다

• generic를 쓸 경우 에러가 발생해 보호받을 수 있다
• generic은 내가 요구한 대로 signature를 생성할 수 있는 도구이다 any와 같은 작업을 하는 것이 아니다 

 

원하는대로 코드를 확장하는 것이 가능하다

타입을 생성하고 생성한 타입을 다른 타입에 넣어서 사용할 수 있다

// 원하는대로 코드를 확장하는 것이 가능하다
// 타입을 생성하고 생성한 타입을 다른 타입에 넣어서 사용할 수 있다
type Player<E> = {
	name:string,
	extraInfo:E
}
type DasomExtra = {
	favPeople:string
}
type DasomPlayer = Player<DasomExtra>

// 설정해놓은 type을 재사용할 수 있다
// 많은 것들이 있는 큰 타입 안에 달라질 수 있는 타입이라면 generic을 사용하면 된다
// 그러면 타입을 많이 재사용할 수 있고 또한 커스텀한 타입을 보낼 때도 사용할 수 있다
const dasom : DasomPlayer = {
    name: "dasom",
    extraInfo: {
        favPeople: "조승우"
    }
}

const kanghee : Player<null> = {
    name: "kanghee",
    extraInfo: null
}

Array가 generic을 받고 있다

 

 

 

⏯️ 참고강의
https://nomadcoders.co/typescript-for-beginners/lobby

Typescript로 블록체인 만들기 – 노마드 코더 Nomad Coders