Typescript

Typescript 기초(1) – Basic Types

T

Typescript Handbook / Developer’s Record 를 참고했습니다. String, Number, Boolean let myName: string = "윤병인" let age: number = 25 let hasGirlFriend: boolean = false Array let list1: number[] = [1, 2, 3] let list2: Array<number> = [1, 2, 3] let list3: Array<string> = ["A", "B", "C"] for…in var arr = ["A", "B", "C"] for(var key in arr) { console.log(arr[key]) // A, B, C 출력 }...

Typescript 마구적기

T

Diff type Diff<T, U> = T extends U ? never : T; type DiffExample = Diff<'a'|'b'|'c'|'d', 'a'|'c'|'f'>; // DiffExample type에는 'b' 혹은 'd'만 들어갈 수 있다. const one : DiffExample = 'b'; const two : DiffExample = 'd'; const three : DiffExample = 'c'; // Error Partial interface IPerson { name: string; age: number; gender: string; } // age가 없기 때문에 에러를 뿜는다 const person : IPerson = { name: "윤병인"...

JSX element type ‘Component’ does not have any construct or call signatures.

J

문제상황 export namespace VC { ... export interface AuthRouteProps extends RouteProps { authenticated: boolean } ... } import React, { FC, ReactElement } from "react"; import { Route, Redirect } from "react-router-dom"; import { VC } from "../../types"; const AuthRoute: FC<VC.AuthRouteProps> = ({ authenticated, render, component: Component, ...rest }): ReactElement => { return ( <Route {...

Create React App없이 React + Typescript 환경설정

C

NPM npm init 이것저것 설치하기 (스크롤을 많이 내리다 보면, 한번에 설치하도록 코드를 작성해 놓았습니다. 일일이 복붙 할 필요 없습니다.) Webpack webpack / webpack-cli webpack을 쓰려면 당연히 필요하니까, webpack과 webpack-cli모듈을 설치해준다. npm install --save-dev webpack webpack-cli webpack-dev-server local 환경에서 편하게 테스트해보려면 필요하다. npm install --save-dev webpack-dev-server typescript typescript -> javascript 변환해주는 typescript모듈이 필요하다. npm install --save-dev typescript...

React Tetris 따라만들면서 배운것들

R

document.hidden 현재 탭이 활성상태인지(보이는지) 체크하는 속성값이다. document.addEventListener("visibilitychange", function() { console.log(document.hidden); }); 위 코드를 console창에 입력하고 해당 브라우저에서 탭을 새로 만들어서 왔다리 갔다리 해보면 log에 true -> false -> true 이런식으로 찍히는걸 볼 수 있다. parseInt parsetInt(string, radix) 두번째 인자인 radix는 해당 string을 몇진수로 해석할건지를 의미한다. parseInt 함수는 특정 radix(진수)값에 따라 문자열 아규먼트 내용의 해석을 하고, 그 영향을 받은 정수 값을 생성합니다...