[App.tsx] export type Todo = { id: string; title: string; content: string; isDone: boolean; }; function App() { const initialState: Todo = { id: uuid(), title: '제목1', content: '내용1', isDone: false, }; //데이터 : 배열 안 객체 const [todos, setTodos] = useState([initialState]); return ( My Todo List [InputForm.tsx] import { Todo } from '../App'; type Props = { todos: Todo[]; setTodos: React.Dispatch; }; f..

function App() { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const inputTitle = (e: React.InputHTMLAttributes) => { setTitle(e.target.value); }; return ( 제목 ) 1. 오류 input 태그 onChange 이벤트 발생시, 타입 작성 : React.InputHTMLAttributes "InputHTMLAttributes 형식에 target 속성이 없습니다." 2. 해결 (1) input 태그의 타입 : onChange? 뒤에 있는 것 (2) 타입뒤에 Handler는 제외해야함 => 결론 : input 태그의 타입은 ..

(1) 내 코드 function solution(strings, n) { let arr=[]; let answer = []; //n번째 인덱스를 단어 앞에 붙여주기 strings.forEach(x =>{ x = x.charAt(n) + x; arr.push(x); }); console.log(arr); //앞글자에 따라 다시 정렬하기 arr.sort(); //앞글자 (n번째인덱스로 붙인 알파벳 1개) 제거 for( let i = 0 ; i s1[n] === s2[n] ? s1.localeCompare(s2) : s1[n].localeCompare(s2[n])); } 1) 내부 인덱스를 가지고 비교 2) 내부 character 가 같으면 전체 string 을 비교 3) 내부 character 가 다르면 내..

★ 재상 튜터님의 TS + React Cookbook ★ (1) 함수에서 TS 사용하기 function sum(a: number, b: number): number { return a + b; } function objSum({ a, b }: { a: number; b: number }): string { return `${a + b}`; } 1) sum ( 타입 지정 해주기) : return 의 타입 지정 2) 객체의 타입 지정시 묶어서 지정. (2) 비동기 함수에서 TS 사용하기 type Person = { id: number; age: number; height: number }; async function getPerson(): Promise { const res = await fetch(`htt..

공식 매뉴얼 https://www.typescriptlang.org/docs/ 공식 튜토리얼 https://www.typescriptlang.org/docs/handbook/intro.html 온라인 책 https://radlohead.gitbook.io/typescript-deep-dive/getting-started

1.프로그램 세팅 (1) 터미널(cmd) 실행 : npm init -y : tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true (2) package.json 수정 : script 항목 "scripts": { "start": "tsc && node ./dist/index.js", "build": "tsc --build", "clean": "tsc --build --clean" }, (3) src 폴더 생성 > index.ts파일 생성 2. 인터페이스 & 데이터 정의 (index.ts) (1) 역할 enum enum Role { LIBRARI..