[노마드 코더] 타입스크립트 - #3 FUNCTIONS

✔️ call signatures (function signature)

• 함수 위에 마우스를 올렸을 때 보게되는 것
• 함수를 어떻게 호출해야하는 것인지 알려준다.
  • 인자, 반환 타입을 알려준다.

//기존 방식
const add: Add = (a: number, b: number) => a + b
.
.
.
//call signatures 타입 만들기
type Add = (a: number, b: number) => number;

// 이제 타입스크립트한테 타입이 number라고 말해줄 필요가 없다.
const add: Add = (a, b) => a + b

• 함수를 props로 전달할 때 유용하게 사용할 수 있다.
• 타입을 먼저 생각하고 나서 코드를 구현한다.

❗️화살표 함수에서 {,}를 사용하게 되면

• 함수 내부 내용으로 처리되기에 반환값이 없는 void로 처리된다.

// 1. const add:Add = (a,b) => a+b 를 함수로 풀면 다음과 같게 된다.
function add(a, b) {
	return (a+b)
}

// 2. const add:Add = (a,b) => {a+b} 를 함수로 풀면 다음과 같게 된다.
function add(a, b) {
	a+b;
}

출처[chfhr0202님 댓글] : https://nomadcoders.co/typescript-for-beginners/lectures/3673

✔️ overloading(오버로딩)

• 패키지나 라이브러리들은 오버로딩을 많이 사용한다.
• 함수가 여러개의 call signatures를 가지고 있을 때 발생한다.

type Config = {
	path: string,
	state: number
}

type Push = {
	(config: Config): void,
	(config: string): void
}

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

• 파라미터의 갯수가 달라도 된다
  • 다른 개수의 파라미터를 가지게 되면, 나머지 파라미터도 타입을 지정해 줘야한다.

// 파라미터의 갯수가 달라도 된다
type Add ={
	(a:number, b:number): number,
	(a:number, b:number, c:number): number, 
}

// c는 선택사항이다. (옵션과 같은 것)
// c는 선택사항이기에 옵셔널(?)을 해줘야한다. (타입을 지정해야한다.)
const add:Add=(a, b, c?:number) => {
if(c) {
	return a+b+c
}
	return a+b
}

// 매개변수가 2개든, 3개이든 오류는 나지 않는다.
add(1,2)
add(1,2,3)

✔️ polymorphism(다형성)

• 여러가지 구조, 형태를 가지는 것

poly

• 많은, 다수의
• many, several, much, multi

morphos (morphic)

• form(형태), structure(구조)

concrete type

• number, boolean, void 등 지금까지 배운 타입

✔️ 제네릭(generic)

• 타입의 placeholder 같은 역할 (타입스크립트에게 타입을 유추하도록 알려준다.)
• 내가 작성한 코드의 타입 기준으로 변경(call signature를 생성)해준다.
• 단일이 아닌 다양한 타입을 적용할 수 있게해준다.
• <,> 기호를 사용한다.

type SuperPrint = {
 	<T>(arr: T[]): T 
}
  
const superPrint: SuperPrint = (a) => {
	a[0]
}

// 여러 타입이 존재하고, 반환해야는 값이 다를 때 제네릭을 사용한다.
const a = superPrint([1, 2, 3, 4])
const b = superPrint([1, 2, ‘3’, ‘4’])
const c = superPrint([1, 2, false, true])

제네릭을 더 추가할 수도 있다.

• 타입스크립트는 제네릭을 처음 인식했을 때와
• 제네릭의 순서를 기반으로 제네릭의 타입을 알게 된다.

// 제네릭을 더 추가할 수도 있다.
type SuperPrint = {
 	<T, M>(arr: T[], b:M): T 
}
 
const a = superPrint([1, 2, 3, 4], ‘’)
const b = superPrint([1, 2, ‘3’, ‘4’], 4)
const c = superPrint([1, 2, false, true], false)

//함수로도 제네릭을 사용할 수 있다.
function superPrint<T>(a: T[]) {
	return a[0]
}

❗️여기서 any를 사용하지 않는 이유이기도 하다.

• any와의 큰 차이점은 any는 타입스크립트로 부터 보호를 받지 못한다는 점이다.

❗️but, 제네릭을 사용해 직접 call signature를 만든 일은 거의 없다.

• 라이브러리를 만들거나, 다른 개발자가 사용한 기능을 개발하는 경우 제네릭이 유용하다.

• 제네릭을 사용해 타입을 생성할 수도 있고,
• 어떤 경우 타입을 확장할 수도 있다.

type Player<E> = {
	name: string
	extraInfo: E
}

type JieunExtra = {
	favFood: string
}

type JieunPlayer = Player<JieunExtra>

const jieun: JieunPlayer = {
	name: jieun,
	extraInfo: {
		favFood: ‘kimchi’
	}
}

// type들 끼리 상속(재사용)을 할 수 있다.
const lynn: Player<null> = {
	name: ‘lynn’,
	extraInfo: null
}

// 리액트에서도 사용된다.
const [isCount, setIsCount] = useState<number>(0)
const [isTxt, setIsTxt] = useState<string>('')

✏️ 마치며

#2는 괜찮았는데 #3 넘어가니 몇몇 부분은 다시 공부해야겠다.
그래도 왜 any를 사용하면 안되고 any대신 제네릭을 사용하는지 알 수 있었다.

리액트에서 useState사용할 때 쓰던 <number> 등이 제네릭이였다는 점도 알게되었다.

강의 영상
https://nomadcoders.co/typescript-for-beginners/lectures/3673