※ cmd에 아래의 명령어 작성 (리액트 타입스크립트 설치) → npx create-react-app ts-react --template typescript - 리액트 타입스크립트의 확장자는 tsx다 !!! 1. 자식 컴포넌트에 props를 넘겨주는 방법 1) 부모 컴포넌트에 자식 컴포넌트에게 넘겨줄 props 작성 - App.tsx import './App.css'; import Hello from './components/Hello'; function App() { return ( ); } export default App; 2) 자식 컴포넌트에 interface생성 후 각각의 props 타입을 지정 3) 받아온 props를 구조분해할당 후 interface 타입명으로 지정 - Hello.tsx in..
함수 오버로드 이름은 같고 매개변수 타입과 반환 타입이 다른 여러 함수를 만들 수 있다. 다양한 구조의 함수를 생성하고 관리할 수 있다. 리턴 되는 타입이 여러 개일 때 선언부까지 작성해야 한다. 예제 > interface Add { a: string, b: number } function add(a: string, b: string): string; function add(a: string, b: number): Add; // b자리에는 string 또는 number타입이 올 수 있다. // 리턴문에는 string 또는 interface로 지정한 Add타입이 올 수 있다. function add(a: string, b: string | number): string | Add { return { a: a..
함수 타입 선언의 this 바인딩 메소드들 : call, apply, bind 1. call() : 함수안에 사용되는 this의 값을 지정해 줄 수 있다. function showName() { console.log(this.name); } showName(); // 이 때 this는 window를 바라보고 있다. → 여기서 showName함수를 호출할 때 call을 써서 this를 원하는 값으로 지정해보자 const green = { name: "green", age: 26 } const blue = { name: "blue", age: 30 } function showName() { console.log(this.name); } showName.call(green); // 이 때 this는 green..
자바스크립트와의 가장 큰 차이점 - JS는 동적 언어 : 프로그램 구동 중 타입이 다이나믹하게 변경됨 - TS는 정적 언어 : 프로그램을 작성할 때 타입을 정의 해주어야 함 ▶ 타입스크립트의 장점 버그를 줄이고, 유지 / 보수가 쉬우며 질 좋은 코드 작성에 용이 강력한 타입으로 대규모 개발에 용이 자바스크립트 라이브러리와의 편리한 사용 개발 도구에서의 강력한 지원 ▶ 프론트엔드 프레임워크와 타입스크립트 리액트(React) : 리액트와 타입스크립트는 호완성이 좋은편 (간단한 옵션 추가만으로 사용할 수 있도록 지원) 뷰(Vue) : 뷰2.0 부터 타입스크립트 사용가능, 뷰3.0 부터 공식 지원 앵귤러(Angular) : 버전 2 부터 타입스크립트 기반으로 만들어짐, 타입스크립트 권장 타입스크립트 사용하기 ↓..