[TypeScript] Section 2. TypeScript 기초(2)

📍 함수 타입

✅ parameter의 타입을 정의하는 방식

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

sum(10, 20); 

✅ 함수의 반환 값에 타입을 정의하는 방식

function sum2(): number {
  // return '민서';
  return 10; 
}

🚨 return 값으로 숫자를 넣어주지 않으면 경고 발생 !

✅ 함수에 타입을 정의하는 방식

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

+) 타입 지정 말고도 자바스크립트 함수 선언과 차이점이 있다면?

타입스크립트에서는 파라미터를 제한하는 특성을 가진다!
즉 파라미터의 개수가 선언된 것과 맞아야 에러 없이 실행된다 ~

// 자바스크립트
function sum(a+b) {
	return a+b;
}

// -> 에러 없이 10과 20만 파라미터로 받고 30을 return해준다.
sum(10,20,30,40,50); 

같은 코드를 타입스크립트에서 작성한다면?

// 타입스크립트
function sum(a: number, b: number): number {
	return a+b;
}

sum(10,20); // ⭕️  

// Expected 2 arguments, but got 5 에러 발생 !
sum(10,20,30,40,50); // ❌
// Expected 2 arguments, but got 1 에러 발생 !
sum(10); // ❌

---

📍 옵셔널 파라미터 (선택적 파라미터)

추가적으로 들어올 수 있는 파라미터에 대해서 ?를 넣어서 선언한다.
?를 넣어서 선언할 경우 해당 파라미터를 써도 되고 안 써도 된다는 것을 의미하게 된다.

function log(a: string, b?: string) {
	...
}

log('hellow world'); // 파라미터를 하나만 작성하여도 에러가 발생하지 않는다 !
log('hello ts', 'abc'); 

📍 기본 초기화 매개변수

함수를 정의할 때 매개변수에 미리 초기화 값을 할당하여 사용 가능하다.
함수 호출 시 해당 매개변수를 생략한다면 초기화값이 할당된다 !

function honeyWeb( name: string, bestStudy = 'TacoStudy') {
    return name + " " + bestStudy;
}


honeyWeb('seojin') // 'seojin TacoStudy'
honeyWeb('minseo', undefined); // 'minseo TacoStudy'
honeyWeb('hoeun', 'reactStudy'); // 'hoeun reactStudy'
honeyWeb('hyein', 'TacoStudy', 'simsimsStudy'); // ❌

---

📍 인터페이스

인터페이스는 두개의 시스템 사이에 상호 간에 정의한 약속 혹은 규칙을 포괄하여 의미한다. 혹은 객체의 껍데기 또는 설계도라고 할 수 있다.

(api를 가져와서 api의 데이터 모양(구조)이 어떻다 라는 것을 인터페이스로 정의할 때 많이 사용된다고 한다 !)

🤔 인터페이스 사용의 장점

1. 오탈자 방지
2. 가독성 좋은 코드
3. 협업 시 상호간의 약속으로 동일한 규칙이 적용된 코드 작성 가능

인터페이스를 왜 사용해야 하는지 코드를 통해 직관적으로 확인해보자 !

아래 코드에서는 반복되는 타입들과 관련된 코드를 중복해서 작성하고 있다.

let todoItems: {id: number; title: string; done: boolean;}[];

function fetchTodoItems(): {id: number; title: string; done: boolean;}[] {
	...
};
  
function addTodoItems(todo: {id: number; title: string; done: boolean;}): void {
	...
};

이렇게 반복되는 타입들을 인터페이스로 정의하고 사용할 수 있다.

interface Todo {
  id: number; 
  title: string; 
  done: boolean;
}

let todoItems: Todo[];

function fetchTodoItems(): Todo[] {
	...
};
  
function addTodoItems(todo: Todo): void {
	...
};

---

📍 인터페이스 활용하기

✅ 변수에 인터페이스 활용

interface User {
  age: number;
  name: string;
}

let seojin: User = {
  age: 25,
  name: '서진'
}

✅ 함수에 인터페이스 활용

interface User {
  age: number;
  name: string;
}

// 이 함수는 항상 User 인터페이스 형식을 준수하는 데이터만을 파라미터로 받겠다 !
function getUser(user: User) {
  console.log(user);
}

const tacoLeader = {
  name: '혜인',
}

const tacoGirl1 = {
  name: '호은',
  age: 22
}

getUser(tacoGirl1);  // ⭕️

// age 속성 없어서 에러 발생 !
getUser(tacoLeader); // ❌

🚨 인터페이스를 준수하지 않는 값을 파라미터로 넣으면 에러 발생!

✅ 함수의 스팩(구조,규칙)에 인터페이스 활용

// SumFunction을 타입으로 가지는 함수들의 규칙은 이렇다! 라고 정의하기
interface SumFunction {
  // (인자: 인자 타입 정의): 반환타입 정의
  (a: number, b: number): number;
}

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

---

✅ 배열 인덱싱

숫자로 인덱싱된 배열과 유사하게 동작

interface StringArray{
  // 배열의 Index(number 타입)에 접근할 때 해당 인덱스에 위치한 값은 string type이다.
  [index: number]: string;
}

let arr: StringArray = ['a', 'b', 'c']; // ⭕️

arr[0] // 'a'

// string 타입을 지정해야 하는데 Number를 지정하면 에러 발생
arr[0] = 10; // ❌ 

🚨 인터페이스를 준수하지 않는 타입을 지정하면 에러 발생

✅ 객체 인덱싱

문자열로 인덱싱된 객체와 유사하게 동작

interface StringRegexDictionary {
  // [key의 타입: string]: value의 타입: 정규표현식
  [key: string]: RegExp;
}

let obj: StringRegexDictionary = {
  cssFile: /\.css$/, // ⭕️
  jsFile: /\.js$/, // ⭕️
}

// RegExp 타입 지정해야 하는데 string 지정하면 에러 발생
obj['tsFile'] = '다현'  // ❌

🚨 인터페이스를 준수하지 않는 타입을 지정하면 에러 발생

✅ 인덱스 시그니쳐

속성의 이름을 지정하지 않고 타입만 정해두고 사용하기!
-> 자동완성이 적용되지 않으니 지정할 속성이 확실하지 않을 경우에만 유동적으로 사용할 것!

interface Closet {
	type: string;
	size: number;
	[property : string ] : string | number;
}


let myCloset: Closet {
	type: 'pants',
	size: 'S',
	color: 'black', 
	when: 2023
}

📍 인터페이스 확장 (상속)

interface HoneyWeb {
  name: string;
  age: number;
}

interface TacoGirls extends HoneyWeb{
  language: string;
}

let subin: TacoGirls = { // ⭕️
  name: '수빈',
  age: 22,
  language: 'ts'
}

// HoneyWeb을 확장 받았기 때문에 HoneyWeb의 속성도 모두 가지고 있어야 함!
let sooyeon: TacoGirls = {
  language: 'ts' // ❌
}

🚨 확장한 인터페이스의 속성들을 모두 포함하지 않으면 에러 발생