TypeScript

• About TypeScript

1. 왜 타입스크랩트를 써야하나.
2. TypeScipt 기초
3. 함수 타입을 정의하자
4. interface를 활용하자
5. 타입 별칭이란?
6. 연산자를 이용한 타입 정의 - 유니온 타입
7. enum
8. class
9. generic
10. promise Types
11. todolist 만들어보기
12. 디버깅

목차

REACT.FC

• @types/react의 패키지
• 함수형 컴포넌트의 의미이다. Functional Component
• REACT.FC<>
• <> 제네릭함수를 사용하는 것이다.
• React는 이미 제네릭을 가지고 있다.
• 홀 화살표 함수
• React.FC에 정의된 T 타입을 입력하는 것이다
• 배열정의 string[]

// model

class Todo {
  id: string;
  text: string;
  constructor(todoText: string) {
    this.id = new Date().toISOString();
    this.text = todoText;
  }
}

export default Todo;

• 모델에서 클래스를 정의해준다
• 클래스 안에는 id값과 text값에 대한 타입을 지정해줬다.

// app.jsx

import React from "react";
import Todos from "./components/todos";
import Todo from "./models/Todo";

const App = () => {
  const todos = [new Todo("learn Leact"), new Todo("Learn javascript")];
  return (
    <div>
      <Todos items={todos} />
    </div>
  );
};
export default App;

• class를 통해서 새로운 객체를 만들었다.
• 새로운 객체들은 todos라는 배열에 담긴다.
• 배열은 Todos의 items 프롭스로 전달된다

List 만들기