[TIL] Typescript 기초_수요일

유진·2023년 1월 18일

TIL

TIL Today I Learned

목록 보기

55/116

2023.01.18.(수)

TIL Today I Learned

Good: Typescript 타임어택을 제시간에 제출했다. 처음 하는 타입스크립트 과제로 스트레스가 쌓여서 끝내고 스케이트보드를 탔다. 깔끔한 마무리였다.

Bad: 스파르타 코딩 클럽 하면서 제일 걱정하던 일이 있었다. 돈의 유혹이다. 간호사여서 면허증만 있으면 취업이 된다. 작년 6월에 파견 신청을 했었다. 근무 연락이 왔다. 잊고 있었는데 문자 하나로 심장이 두근거렸다. 이런 유혹을 잘 떨어트릴 수 있을 거로 생각했다. 어려워서 매니저님과 동기한테 도움을 요청했다. "잡아주세요!!" 제일 기억에 남는 말은 "공부할 수 있을 때 공부해라." 임용을 준비하면서도 간호사 일을 함께했다. 공부에 집중하지 못해 아쉬웠는데 이번에는 끝까지 가고 싶다.

[ Typescript 타임어택 ]

제출기한 : 제출기한 : 1/18(수) 오후 9시(식사시간 제외 4시간)
해설강의 : 금요일 오전에 녹화 영상으로 업로드 됩니다.
리액트 입문 과제 또는 숙련 과제를 타입스크립트로 리팩토링하기

나는 가장 자신 있는 입문과제로 선택했다. 금요일 해설 강의는 숙련과제로 알려준다고 하여 두 가지 공부를 할 수 있다.
과제물

[ Typescript 기초 ]

Typescript 시작 방법


mkdir 만들고 싶은 이름
cd 만든 파일 명
code . <- vscode 열기

npm init -y <- 프로젝트 초기 설정
npm install typescript 
or 
npm install -g typescript
npx tsc --init

***

touch todos.ts <- 파일 만들기
touch input.ts

*hello.ts
export const todosFunc = () => {
console.log("hello");
};

*hi.ts
import { todosFunc } from "./hello";
const str = "TS";
const hi = () => {
console.log(`Hello $(str)!`);
};
todosFunc();

ts로 만든 것을 js로 바꾸려면

npx tsc
npx create-react-app my-app --template typescript

[ Typescript 리팩토링 오류 ]

전에 만들었던 리액트 입문 과제인 JS를 TS로 바꿔서 시작했다.

오류가 많이 나왔다. 처음 하는 거라 모든 오류가 처음이었다.

그중 가장 어려웠던 거 하나만 적어보자!

* JS - App.jsx 에서 TodoList components 만들어서 넣는 방법!
components 기존 그대로이고 그 안에 있는 파일인 jsx를 tsx로 바꿔주면 된다.

<TodoList isActive={true} todos={todos} setTodos={setTodos} />

*JS -components TodoList.jsx
function TodoList({ todos, isActive, setTodos }) {
  return (
    <>
      <h4>{isActive === true ? "해야 할 것" : "완료된 것"}</h4>
      {todos
        .filter((item) => item.isDone === !isActive)
        .map((item) => {
          return (
            <Todo item={item} isActive={isActive} setTodos={setTodos}></Todo>
          );
        })}
    </>
  );
}

export default TodoList;

이거를 도대체 어떻게 바꿔줄 수 있냐면요!

*TS -App.tsx
<TodoList isActive={true} todos={todos} setTodos={setTodos} tf={tf} />

*TS -components TodoList.tsx

-> 타입 지정해줌.
type TodosItemProps = {
  title: string;
  contents: string;
  isDone: boolean;
  id: string;
};

-> object에 타입을 지정하려면 interface 사용!
interface TodoListProps {
  isActive: boolean;
  todos: TodosItemProps[];
  setTodos: Dispatch<SetStateAction<TodosItemProps[]>>;
  tf: (id: string) => void;
}
function TodoList({ todos, isActive, setTodos, tf }: TodoListProps) {
  return ( 이하 JS 동일!