React/React with Typescript (4) 썸네일형 리스트형 React & Typescript - 시작 create-react-app은 기본적으로 타입스크립트를 지원한다. 그러나 프로젝트를 만들때 명령어가 다르다. 별거 없다. 기존의 npx create-react-app project-name 뒤에 --typescript만 넣어주면 된다. 자 이제 typescript를 react에서 사용할 준비가 완료 되었다. 이제 vscode로 가서 폴더를 열어보면, 짠 tsx, ts 파일들로 바뀌었다. 자바스크립트를 사용하는 리액트앱에서는 js 파일만을 사용해도 문제가 없었는데, 타입스크립트를 사용하는 리액트앱에서는 tsx 파일로 작성을 해야한다. 그렇게 만들어본 첫번째 함수형 컴포넌트이다. Greetings는 React.FC (functional Component)라는 타입을 가진 객체이고, 이 객체에 들어가는 것은.. Typescript - Generics Generics 는 타입스크립트에서 함수, 클래스, interface, type alias 등을 사용할 때 여러종류의 타입에 대해 호환을 맞춰야 하는 상황에서 사용하는 문법이다. 사용 할 때는 라는 표현을 사용하게 된다. 위를 보면 a에 어떤 값이 들어오던, b에 어떤 값이 들어오던, 를 통해 유추를 한 후, 그것에 관련된 값을 다시 리턴한다. 즉 parameter 타입을 any로 가져오는 것처럼 실행시킬 수 있는 것인데, any와 generics 의 차이점은 parameter를 any로 넣는다면 다음에 그 함수를 쓰거나 그 함수의 결과값을 쓰거나 할 때 any로 떠서 헷갈릴 수 있는데, generics를 쓴다면 이미 parameter로 예를 들어 string이 들어간 상태라면, 추후에 문자열이 들어간 .. Typescript - interface, type alias interface는 implement를 통해 class에 부여된다. interface는 getArea 라는 함수를 갖고 있고, class Circle 또는 Rectangle은 그 요소들을 포함해야하니, 안에 getArea라는 함수를 꼭 포함해주어야 한다. 이것을 어떤식으로 사용할 수 있을까? interface를 통해서 class들을 배열로 넣어줄 수 있다. 예를 들어, circle과 rectangle이라는 변수에 클래스 선언을 각각 해주자. shapes라는 변수는 Shape라는 interface를 지닌 클래스 객체들을 담는 리스트이다. 따라서 안에 circle과 rectangle이 들어가는 것은 허용되지만, 이런식으로 다른 타입의 값을 넣어주면 에러가 난다. 그러면 이제 이 shape 변수를 통해 무얼 .. Typescript 기초 JavaScript는 weakly typed language 이기 때문에, 변수에 어떤 값을 담던 상관이 없다. 가령, 아래 코드는 전혀 문제될 것이 없는 코드이다. value라는 변수에 어떤 값을 담던, JS에서는 변수에 type이라는 것이 지정되어있는 것이 아니기 때문에, 언제든 다른 type의 값으로 설정을 해주어도 상관이 없다. 어떻게 보면 자유로운 변수의 사용이지만, 어떻게 보면 또 오류가 나오는 원인이 되기도 한다. 예를들어 배열인줄 알고 대입을 해보았더니 null이어서 에러가 난다거나, 숫자인줄 알고 연산을 했다가 string이어서 에러가 난다거나, 여러 에러의 원인이 될 수 있는 것이다. 자바스크립트의 가장 큰 문제중 하나는 코드가 일단 실행된 이후에야 자신이 실수를 했는지 안했는지 알 수.. 이전 1 다음
