[새싹(SeSAC) 프론트엔드] day45 221216

 

📍제네릭

: 작성된 코드를 다양한 타입의 객체에 대해 재사용하는 객체지향 기법

➡️ 하나의 코드로 숫자, 문자열 등 처리 가능

 

function App() {
  const arr1 = [10, 20, 30];
  const arr2 = ["10", "20", "30"];
  const arr3 = [true, false, true];
  function printArr(arr: number[]): void {
    console.log(arr);
  }

  printArr(arr1);

  function printArr2(arr: (string | number)[]): void {
    console.log(arr);
  }
  printArr2(arr2);

  function printArr3(arr: (number | string | boolean)[]): void {
    console.log(arr);
  }
  printArr3(arr3);

  return <div className="App"></div>;
}

 

하나의 함수가 다양한 타입을 전달받기 위해서는 함수 선언부에 들어올 수 있는 타입을 모두 명시해야 함 

➡️ (number | string | boolean)[]) 와 같이 일일이 타입을 쓰지 않기 위해 제네릭 사용 

 

 

◼️ 사용방법

function 함수이름 <T> (매개변수 : T타입) : 반환값 타입 {
    //코드
}

function printArr <T> (arr: T[] ) : void {
    console.log(arr);
}

 

 

* 사용해보기 

const arr1 = [10, 20, 30];
const arr2 = ["10", "20", "30"];
const arr3 = [true, false, true];
  
  
function printArray<T>(arr: T[]): void {
	console.log(arr);
}

printArray<number>(arr1); //(3) [10, 20, 30]
printArray<string>(arr2); // (3) ['10', '20', '30']
printArray(arr3); //(3) [true, false, true]

** 함수 호출 시 타입 생략 가능

 

 

* 인터페이스에서 사용하기 

  interface UserInterface2<T> {
    name: string;
    age: T;
    phone: T;
  }

  // const user133: UserInterface2<T> = {
  //   name: "kim",
  //   age: 31,
  //   phone: "204949",
  // };

  const user11: UserInterface2<string | number> = {
    name: "kim",
    age: 31,
    phone: "204949",
  };

  console.log(user11);
  console.log(typeof user11.age);
  console.log(typeof user11.phone);

 

 

*클래스에서 사용하기 

  class User<T> {
    constructor(public name: string, public age: T, public phone: T) {}
  }
  const userTest1: User<number> = new User("kim", 20, 821000000000);
  console.log(userTest1);

  const userTest2: User<string> = new User("kim", "20", "821000000000");
  console.log(userTest1);

 

 

 

  const pracArr1 = [1, 2, 3, 4, 5];
  const pracArr2 = ["a", "b", "c"];

  function printArray<T>(arr: T[]): void {
    const result = arr.reverse();
    console.log(result);
  }
  printArray(pracArr1);
  printArray(pracArr2);

 

 

(+) 소문자 <t>로 해도 제네릭이 될까 ... ?

  const pracArr1 = [1, 2, 3, 4, 5];
  const pracArr2 = ["a", "b", "c"];

  function printArray<t>(arr: t[]): void {
    const result = arr.reverse();
    console.log(result);
  }
  printArray(pracArr1);
  printArray(pracArr2);

잘 되긴 한다 .. 

 

 

 

타입스크립트로 todos 만들기 

React.FC 

  type FC<P = {}> = FunctionComponent<P>;

 

<Todos /> : 타입이 컴포넌트 

 

 

 

 const submitHandler = (e) => {
    e.preventDefault();
  };

event 에 타입을 지정해주지 않으면 에러가 남!!

 

  const submitHandler = (e: React.FormEvent) => {
    e.preventDefault();
  };

object, ant 뭐 이런타입을 지정하는 것이 아니라 React.FormEvent라고 명시해주면 해결됨 

 

 

 

input 창 값을 onChange 함수로 받아오기 

  const changeHandler = (e: React.FormEvent<HTMLInputElement>) => {
    setText(e.currentTarget.value);
  };

 

*타입스크립트를 사용하지 않을때는 

  const changeHandler = (e) => {
    setText(e.target.value);
  };

 

e ➡️ 

 

 

 

 

props 타입 설정하기 

<{ onAddTodo : () => 반환값타입}

<{ onAddTodo : (매개변수 : 타입) => 반환값타입 }>

<{ onAddTodo : (item : string) => void}>

 

매개변수 item이 있으므로 컴포넌트 InserTodo의 매개변수를 아래와 같이 작성할 수 있음 

const InsertTodo: React.FC<{ onAddTodo: (item: string) => void }> = (props) => {
  const [text, setText] = useState("");

  const submitHandler = (e: React.FormEvent) => {
    e.preventDefault();
    if (text.trim() !== "") {
      props.onAddTodo(text);
      setText("");
    }
  };

  const changeHandler = (e: React.FormEvent<HTMLInputElement>) => {
    setText(e.currentTarget.value);
  };

  return (
    <div>
      <form onSubmit={submitHandler}>
        <h3>할일추가</h3>
        <input type="text" onChange={changeHandler} />
        <button type="submit">추가</button>
      </form>
    </div>
  );
};

 

 

never [] 

: 이제 빈 배열만 가능하다 -> 값이 갱신이 되지 않는다 

https://ui.toast.com/posts/ko_20220323

타입스크립트의 Never 타입 완벽 가이드

 

https://yamoo9.gitbook.io/typescript/types/never

never 타입 - TypeScript Guidebook

 

 

 

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅(금)