Frontend Study - 2/Typescript (6) 썸네일형 리스트형 Typescript : 리액트 + 타입스크립트 복습 (2) useState의 타입, event의 타입. useState의 타입 useStat는 초기값을 지정해주면 자동으로 타입이 할당된다. 아래와 같이 Generics타입을 통해 지정해 줄 수 있지만 꼭 필요한 경우가 아니면 해주지 않아도 무방하다. const [name, setName] = useState() 그럼에도 사용하면 좋은 2가지 상황이 있다. 1) 상태가 null일 수도 있고 아닐 수도 있을때, union타입을 통해 지정해 주는 것이 좋다. 아래와 같이 작성한다면 user라는 state값에 들어올 수 있는 값은 User type을 가진 데이터 혹은 null값이 올 수 있게 된다. const [user, setUser] = useState(null); // later... setUser(newUser); 2) 복잡한 구조를 가진 객체나 배열일 경.. Typescript : 리액트 + 타입스크립트 복습 (1) 함수형 컴포넌트의 타입, 프롭스의 타입, useRef 타입. 1. 리액트 함수형 컴포넌트 타입지정 const App: React.FC = () => { return ( ); }; 함수 컴포넌트에 React.FC 타입을 지정하는 모습이다. FC 는 Functional Component의 약자. 선언형 함수에는 적용이 되지 않는다. 표현형 함수에만 적용이 된다. 전달 받는 props가 있고, 그 props의 타입을 변수로 지정한 뒤에 입힐 때는 아래와 같이 할 수 있다. //todo.tsx export interface Todo { id: number; todo: string; isDone: boolean; } //SingleTodo.tsx import { Todo } from "../types/todo"; interface Props { todo: Todo; tod.. Typescript : Tuple type array 자료의 타입을 지정할 때, const arr : number[] = [1,2,3] 위와 같이 지정해 주었었다. tuple type을 통해서 보다 엄격하게 타입을 지정해 줄 수 있다. 인덱스 값에 맞춰서 어떤 순서에는 어떤 타입만 오게 할 수 있다. const arr : [number, string] = [3, "글자"] 0번 인덱스에는 number, 1번 인덱스에는 string 타입만 올 수 있다. 위와 같이 사용하는 것이 tuple type이다. - 옵션 지정이 가능하다. 다만 마지막 인덱스 값부터 지정을 해주어야 한다. 중간 값에만 옵션을 지정했다고 하면 그 뒤부터는 엄격하게 인덱스 관리를 할 수 없기 때문이다. (2번째 값만 옵션이라면 값의 유무에 따라 3번째 값이 2번째 값이 되어버릴 .. Typescript : 복습정리 - 3 (Rest parameter 타입지정, Generic, 리액트+ 타입스크립트) Rest 파라미터의 타입지정 function test (…x : number[]) { console.log(x) } test(1,2,3,4) Rest 파라미터를 사용하면 array타입으로 저장이 되기 때문에 array형식으로 타입을 지정해 주어야 한다. spread operator와 다르다! spread operator는 배열 혹은 오브젝트 괄호를 벗겨주는 역할을 한다. Destructuring 문법을 사용한 파라미터 작성 const person = { student: true, age: 20 }; const test = ({ student, age } : {student : boolean, age : number} ) => { console.log(student, age); }; test(person).. Typescript : 복습정리 - 2 (함수의 타입, interface, class의 타입지정) *함수의 타입 표현방법 function test(x : string) : number { } 이것을 type alias를 통해 관리할 수 있다. type testType = (x : string ) => number; 같은 의미가 되는 것이다. 사용하려면 함수 표현식으로 사용해야 한다. type testType = (x : string) => void let test : testType = function(name) { console.log(name) } 타입스크립트로 HTML 변경과 조작 시 주의점. const title = document.querySelector(“#title); if (title instances Element) { title.innerHTML = “hello” } —>> narr.. Typescript : 복습정리 - 1 (타입스크립트의 설치, any와 unknown의 차이, Narrowing, Literal Type, Union Type..) 자바스크립트는 동적언어이다. 자유도가 높은 언어이며 타입이 렌더링 되면서 정해진다. 이러한 점은 규모가 큰 프로젝트가 될 수록 단점으로 작용한다. 유지보수에 어려움을 겪는다. 타입을 엄격하게 동적->정적으로 관리하기 위해 타입스크립트를 사용한다. 타입스크립트에서는 타입이 잘못되었을 경우 그 부분이 잘못되었다고 구체적으로 알려주고, 오타교정도 가능하다. 리액트 + 타입스크립트의 설치 1) 기존의 React프로젝트에 타입스크립트 설치하기. 작업폴더경로에서 터미널을 오픈한 뒤, npm install --save typescript @types/node @types/react @types/react-dom @types/jest or yarn add --save typescript @types/node @type.. 이전 1 다음
