3주차 TypeScript Study 에서는 함수와 인터페이스 에 대해 배웠습니다
스터디 내용을 복습하면서 인터페이스가 사용되는 경우를 더 알아보았습니다

🧢 함수

🥣 타입스크립트에서의 함수

함수는 타입스크립트로 크게 다음 3가지 타입을 정의할 수 있다

• 함수의 파라미터(매개변수) 타입
• 함수의 반환 타입
• 함수의 구조 타입

👕 함수의 기본적인 타입 선언

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

💡 TIP
함수의 반환 값에 타입을 정하지 않을 때는 void 사용

🪣 함수의 인자

타입스크립트에서는 함수의 인자를 모두 필수값으로 간주한다.
따라서, 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야한다
매개변수의 갯수 만큼 인자를 넘기지 않아도 되는 자바스크립트의 특성과 반대된다
만약 이러한 특성을 살리고 싶다면 ? 를 이용하면 된다

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 타입 에러 없음

🧵 함수의 매개변수

🥚 기본 초기화 매개변수

함수나 메서드의 매개변수에 기본값을 할당하는 기능

function myName( firstName: string, lastNmae = 'hwang') {
	return firstName + " " + lastName)
}

myName('subin'); // 'subin hwang'
myName('subin', undefined); // 'subin hwang'
myName('subin', 'hwang', 'kim'); // 에러 : 매개변수 과다

☁️ 나머지 매개변수

함수에 동적인 수의 인수를 전달하고 그들을 배열로 처리, 전개 연산자 를 사용한다

function sum(a:number, ...nums: number[]): number {
	let totalOfNums = 0;
	for (let key in nums) {
		totalOfNums += nums;
}
	return a + totalOfNums;
}

🧊 인터페이스

💎 인터페이스란?

일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용한다
인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다

🧞‍♂️ 변수와 인터페이스

인터페이스는 변수의 타입으로 사용할 수 있다.
이때 인터페이스를 타입으로 선언한 변수는 해당 인터페이스를 준수해야 한다

// 인터페이스의 정의
interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

// 변수 todo의 타입으로 Todo 인터페이스를 선언하였다.
let todo: Todo;

// 변수 todo는 Todo 인터페이스를 준수하여야 한다.
todo = { id: 1, content: 'typescript', completed: false };

🐋 함수와 인터페이스

인터페이스는 함수의 타입으로 사용할 수 있다.
이때 함수의 인터페이스에는 타입이 선언된 파라미터 리스트와 리턴 타입을 정의한다

// 함수 인터페이스의 정의
interface SquareFunc {
  (num: number): number;
}

// 함수 인테페이스를 구현하는 함수는 인터페이스를 준수하여야 한다.
const squareFunc: SquareFunc = function (num: number) {
  return num * num;
}

console.log(squareFunc(10)); // 100

❄️ 클래스와 인터페이스

클래스 선언문의 implements 뒤에 인터페이스를 선언하면 해당 클래스는 지정된 인터페이스를 반드시 구현하여야 한다.
인터페이스를 구현하는 클래스의 일관성을 유지할 수 있는 장점을 갖는다.

// 인터페이스의 정의
interface ITodo {
  id: number;
  content: string;
  completed: boolean;
}

// Todo 클래스는 ITodo 인터페이스를 구현하여야 한다.
class Todo implements ITodo {
  constructor (
    public id: number,
    public content: string,
    public completed: boolean
  ) { }
}

const todo = new Todo(1, 'Typescript', false);

console.log(todo);

🦆 덕 타이핑 (Duck Typing)

TypeScript는 해당 인터페이스에서 정의한 프로퍼티나 메소드를 가지고 있다면 그 인터페이스를 구현한 것으로 인정한다. 이것을 덕 타이핑 (duck typing) 또는 구조적 타이핑(structural typing)이라 한다.

interface IPerson {
  name: string;
}

function sayHello(person: IPerson): void {
  console.log(`Hello ${person.name}`);
}

const me = { name: 'Hwang', age: 22 };
sayHello(me); // Hello Hwang

💦 선택적 프로퍼티

인터페이스의 프로퍼티가 선택적으로 필요한 경우 프로퍼티명 뒤에 ?를 붙인다

interface UserInfo {
  username: string;
  password: string;
  age?    : number;
  address?: string;
}

🛼 인터페이스 상속

extends 키워드를 사용하여 인터페이스를 상속받을 수 있다

interface Person {
  name: string;
  age?: number;
}

interface Student extends Person {
  grade: number;
}

const student: Student =  {
  name: 'Hwang',
  age: 22,
  grade: 3
}