월드스토리의 코딩 나라

useState에서의 generic은? • 초기값에 대한 type을 generic을 이용해서 설정• 물론 setState 이용해서 state를 변경할 때에도 generic으로 정해준 type으로만 변경 가능!• 하지만 typescript 가 타입 유추를 알아서 잘 합니다.• 기본적으로는 useState를 사용할 때 generic을 쓰지 않아도 괜찮아요. • state의 값이 null 일 수도 있고 아닐 수도 있을 때, 반드시 generic으로 union type 전달!   useRef에서의 generic은? 1.  초기 값에 대한 type을 generic으로 작성2. DOM 객체에 접근하기 위한 useRef의 generic에는, type에 HTMLElement 타입 이용 event 객체의 typeclic..

React with Typescript 1. create-react-app을 이용해 TypeScript를 사용하는 방법 npx create-react-app 프로젝트 이름 --template typescript 2. 기존 프로젝트에 typescript 를 적용하는 방법1. typescript를 template으로 설정할 시 함께 설치되는 모듈을 install한다.npm install typescript @types/node @types/react @types/react-dom @types/jest2. js & jsx 파일을 ts, tsx 파일 변경하면 적용이 가능하다.3. tsconfig.json 파일 생성 (compilerOptions 안의 “jsx”: “react-jsx” 추가) - jsx init ..

TypeScript의 Generic 타입 위처럼 다양한 타입을 반환하는 함수가 있을 때, 모든 데이터 타입을 쓰거나, any를 사용한다면 TypeScript를 사용하는 목적이 모호해지는 문제가 발생한다.그래서, Generic이라는 타입을 java에서 가져와쓰게 되었는데? Generic이란?함수를 선언할 때가 아니라, 호출할때 데이터 타입을 지정하게 하기 위한 문법으로 정의가 가능하다. 즉, 타입의 변수화라고 보면  된다는 거다. 그래서 어떻게 사용하냐?function arrLength2(arr:T[]):number{ return arr.length } arrLength2(["a"]); arrLength2([1, 2, 3, 4]); • 함수를 호출할 때 매개변수로 들어갈 데이터 타입을 설정• 타입을 함..

typescript의 함수 선언• 선언시에 타입설정, 호출할 땐 기존처럼 매개변수 타입셜정과 함수의 return 타입에 따라 함수 전체 타입을 설정할 수 있다.단, 이미 알고 있는 타입 외에도 never와 void라는 함수 리턴 타입을 설정할 수 있다. typescript 함수 선언 방식 1. 파라미터와 리턴 타입을 선언하는 기본 형식 function sum(a : number, b: number) : number {return a + b;} 2. 화살표 함수를 이용한 타입 선언 const sum = (a: number, b : number) : number => {return a + b;}const sum = (a: number, b: number) : number => a+b;//한줄의 간단한 연산의..

Tuple• Js에서는 배열과 같습니다.• 순서와 개수가 정해져 있는 배열 (요소의 길이와 타입 고정)• 일반 배열과 다른 점은 배열의 각각의 타입에 모두 type을 지정해줘야 합 니다!• 순서와 규칙이 있는 배열이 있다면 Tuple을 이용!• readonly를 설정하면 const를 사용하지 않더라도 읽기만 가능한 data type이 됨  Enum (열거형)• 숫자 열거형과 문자 열거형• 값들에 미리 이름을 정의하고 사용하는 타입• enum의 value 값으로는 문자열 혹은 숫자만 허용되며, 선언 이후로는 내용을 추가, 삭제할 수 없다.• 값을 넣지 않고 선언한다면 숫자형 Enum 가장 위의 요소부터 0으로 할당돼서 1씩 늘어나게 된다. any어떤 타입이든 상관없이 오류가 나지 않으며, Typescrip..

TypeScript 란?• JavaScript 의 기본 문법에 자료형 체크하는 기능을 추가한 것 • 자바스크립트가 자의적으로 type 해석을 하고 코드를 실행시켰을 때, 의도와 다른 방식으로 쓰이지 않도록 방지=> 실행하지 않더라도 코드 상의 에러를 알려줌 TypeScript의 특징 타입의 지정변수나 함수를 만들어 줄 때, 타입까지 명시하여 선언함으로써 프로젝트의 안정성을 높인다.ts파일의 사용웹 브라우저는 ts파일을 읽을 수 없기에 js로의 변환 과정을 반드시 필요로 한다. TypeScript의 사용 방법 1. TypeScript는 별개의 언어이기 보단 라이브러리 모듈에 가깝다.npm install -g typescript2. 파일 설치가 잘되어 있는지 version을 확인한다.tsc -v3. type..