TypeScript

TypeScript란 무엇인가 JavaScript의 superset 언어이다. 왜 type일까 정접 타입 (statically Typed)의 특징을 갖는다 하여 타입 스크립트이다. 반대로 JS는 dynamic typed laguage이다. 이게 무슨 뜻이냐? 바로 함

리액트 프로젝트 타입스트립트로 만들기 cra(create-react-app)의 공식문서 중 타입스크립트 추가하기에 들어가서 이렇게 해주면 된다. 또한 ts 템플릿 추가, 업뎃, 삭제를 위해 npx 버전은 항상 최신을 유지하라고 적혀있다. 이제 TS템플릿을 기존 프로

form의 submit에서 받아오는 이벤트 객체에 대한 데이터 타입또한 매개변수이기에 지정을 해줘야하는데 onSubmit, onClick이 각각 따로 존재한다.또한 위와 같이 onSubmit 속에 잘 못된 event 객체를 넣게 된다면 그 또한 에러의 대상이 된다.우리

클릭을 하면 사라지는 코드를 작성해보자가장 말단에 있는 컴포넌트 부터 작업을 해보자.우선 props로부터 넘어온 값은 전부 컴포넌트 옆에 정의를 해줘야하는데 text는 필드값이고 onDelTodo는 메서드라서 위와같이 지정을 해줬다.이때 onDelTodo안의 매개변수에

이 파일은 프로젝트에서 타입스크립트를 사용하는 특정 프로젝트에 추가할 수 있다. 그래서 앞서 포스팅했든 TS=> JS로 컴파일해주는 작업이 필요한데 그 컴파일에 관한 사항을 구성하는 파일이다.target : 작성한 코드를 어떤 JS 버전으로 변환할 건지 결정한다.예전

역시 우선 createContext로 시작해야겠다.또한 앞서 포스팅한 내용처럼 배열 필드값을 초기화할 때 따로 데이터 타입을 써주지 않는다면 never로 초기화 되어버리기 대문에 createContext역시 useState와 같이 데이터 타입을 지정을 해줘야한다.이때

npm i @reduxjs/toolkit : RTK 코드가 들어있는 본체 (TS 포함되어있음)npm i react-redux : React에서 RTK를 연결해주는 코드상기 2개의 library를 설치한다.src 폴더에는 다양한 폴더들이 존재한다. components,

TypeScript의 특징 JS로 구축된 새로운 언어 새로운 추가 기능들과 JS의 이점을 합쳐놓은 더 나은 작업 방식 브라우저에서 실행 불가 "Workarounds" 즉, 개발 중에 조기에 오류를 포착하고 수정할 수 있는 오류 검사 TypeScript를 다른 Fra

다른 언어에는 int, double, float 등등 나뉘어있는데 여기서는 싹다 number type이다.즉, 5 === 5.0 이라는 것이다.문자열 표시에는 ('') ("") (\`\`) 정도가 있는데 이중 가장 마지막인 back-tick은 현대 JS 문법이다. 뭐

VO 모델에 있는 애를 갖고와서 처리할 때 DTO에서 처리를 해야하지만 10000에 1이라도 store에서 처리를 해야할 때에러가 뜨는 것을 확인할 수 있는데 이는 객체로 생성한 값을 연산에 사용하기 때문이다. 물론 연산이 불가능한 것은 아니지만 Typescript에서

Object Type 자, 만약 위와같이 person이라는 객체가 있다고 가정해보자. TS에서는 위 person이라는 객체의 타입을 그냥 Object 타입이 아닌 매우 Concrete 한 객체 타입으로 설정해두었다. 즉, Concrete한 위 타입은 TS가 type

type 키워드로 오직 TS에만 있는 키워드이다. 즉, 이때 type을 선언할 때 JS에 있는 예약어(ex Date)들을 사용하면 안된다. 통상 union type을 지정하거나 object type을 지정하여 사용한다.혹은JAVA에서도 익히 써왔던 void 키워드는 r

Watch Mode 그동안 우리는 tsc .ts 명령어도 수동으로 컴파일해왔다. 하지만 귀찮으니 TS에게 파일을 watch 하도록 설정해보자. 매우 간단하게 워치모드로 바꾸었다. 물론 한계점은 1개의 파일에만 적용된다는 것이다. 그래서 파일 전체에 적용하고 싶다면 아

최상단 strict 옵션을 true로 하여 밑에있는 모든 strict 옵션을 true 하든지 아니면 각각의 옵션을 따로따로 설정할수도 있다.이처럼 파라미터에 any 타입을 넣었을 때 error를 내뿜도록 해주는 것이다.이 옵셥은 기본값이 true이지만 false로 설정

Class constructor 함수 constructor 생성자 함수 => 다른 언어, JAVA, Dart같은 경우에는 생성자 함수가 클래스 이름인 경우가 대부분인데 TS에서는 constructor라고 따로 함수가 존재한다. 이는 최신 문법 ES6 이상에만 있는 함수

이 개념 역시 오직 TS에만 존재하는 개념이다. 물론 class와 같이 대문자로 선언하는 것을 권장한다.그런데 사실 위 코드 정도는 그냥 타입 지정을 해줘도 된다. 굳이 interface를 사용할 이유가 없다는 말이다 그럼 왜 쓸까? => class와 다르게 굉장히 여

type을 & 연산자로 연결하여 새로운 타입을 지정할 수 있다.물론 interface로도 가능하다.만약 당신이 type에 union 타입을 지정하였고 & 연산자를 사용한다면 교집합에 해당되는 부분만 적용된다.위 코드에서 typeof의 값은 어디까지나 runtime 중인

위와 같은 코드가 있다고 해보자. => 이때 .value를 인식을 못 한다 왜? => 사용자는 input값으로 잡아놨지만 TS는 이게 input값이 아닌 HTMLElement로만 알고 있기 때문이다.그럼 어떻게 해결해야할까?바로 사용하고자 하는 변수 앞에 <> 키

Function overloads 위 코드의 문제 무엇일까? 바로 사용자는 분면 string 끼리 합쳐서 string과 관련된 메서드를 사용하려 하지만 IDE는 이렇게 인식하고 있기 때문에 string일 수 있고 또 number일 수 있다. 물론 as 키워드를 사용

generics 오직 ts에만 있고 js에는 없는 개념이다. 2가지 이상의 타입으로 연결되어 지정되며 명시된 타입끼리 상호 유기적인 작용을 한다. 무슨뜻이냐? => names는 아직 값이 지정되지 않았음에도 불구하고 split 메서드가 이상없이 돌아간다는 뜻이다.

Decorator decorator는 메타 프로그래밍에서 매우 유용하다. 그럼 메타 프로그래밍이란 무엇일까? => 소프트웨어 개발 생산성을 향상시키고 코드의 유지 보수성을 향상시킬 수 있는 강력한 도구이다. 즉, 사용자에겐 보여지지 않으며(물론 상황에 따라 보여지게 할

위와같이 decorator factory에 decorator가 있는데 이를 한 번 더 return하면 이제는 class가 정의될 때가 아닌 class를 인스턴스화를 시킬때 작동한다.super() 함수로 원래 존재하는 original class를 저장하고 그리고 기존 클