본문 바로가기

React/TS7

React에서 TypeScript 사용하기 - Component, Hooks 만약, TypeScript에 대해 궁금하시다면 아래 링크를 참조해주세요 typescript-kr.github.io/ TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 기존 React Project에 TypeScript 도입 arincblossom.wordpress.com/2019/11/08/%EA%B8%B0%EC%A1%B4-react-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-typescript-%EB%8F%84%EC%9E%85%ED%95%98%EA%B8%B0/ 기존 React 프로젝트에 TypeScript 도입 + TypeScript로 React 요소 나타내기 기존에 React로 작성된 프로젝트에 T.. 2020. 10. 25.
TypeScript 가이드2 클래스, 제네릭 Class 기존 JS와 다른 점은 프로퍼티를 사전에 선언해야 한다. class Dog { name: string; constructor(name: string){ this.name = name; } bark(word: string){ console.log(`bark ${word}`); } } const dust = new Dog('John'); dust.bark('food'); Class 접근 제한자 접근 제한자에는 public, protected, private가 있으며 프로퍼티 선언시에 생략하면 public이 기본이 접근 제한자가 된다. 프로퍼티 또는 메서드를 제한하는 용도로 쓰인다. public의 경우 클래스 인스턴스, 클래스, 자식 클래스에서 사용할 수 있다. protected는 해당 클래스, 자.. 2020. 10. 21.
TypeScript 가이드 TypeScript는 정적인 언어로 컴파일 시에 JavaScript파일을 생성한다. 또한, JavaScript의 슈퍼셋으로 JavaScript가 가지고 있는 모든 기능을 포함하고 있다. 왜 써야하는가? JS는 동적이다. const, var, let같은 변수 선언 키워드만 보더라도 타입이 없다. 이러한 동적 타입은 팀원과의 협업 뿐만 아니라 심지어 혼자 개발할 때에도 개발에 혼동을 주기가 쉽다. 또한 런타임 에러가 발생하는 요인이기도 하다. 한 예로, 아래와 같은 코드가 있을 때 addTwo라는 함수는 리턴 값으로 string을 반환한다. 하지만 개발자가 함수의 return 값을 숫자 타입으로 생각하고 다음과 같이 log를 출력하면 원하지 않은 결과가 출력된다. function addTwo(one, two.. 2020. 10. 14.