728x90 반응형 TypeScript6 타입스크립트 Type Aliases Type 'string | string[]' is not assignable to type 'string'. Type 'string[]' is not assignable to type 'string'.ts(2322) 타입스크립트로 작업을 하다가 위와같은 에러가 발생 했습니다. 'string | string[]’ 을 string에 넣을 수 없다는 말인데 이유는 Type Aliases때문입니다. type Fruit = "Orange" | "Apple" | "Banana"; 타입스크립트에서는 위와 같이 타입을 만들 수 있습니다. Fruit 에는 "Orange" 또는 "Apple" 또는 "Banana”을 넣을 수 있습니다. type Fruit = "Orange" | "Apple" | "Banana"; let f.. 2022. 5. 29. 대소문자 변환 웹툴 대소문자 변환기 텍스트에 포함되어 있는 영문 텍스트를 대문자나 소문자로 한꺼번에 변환시켜주는 웹툴입니다. 한글을 포함한 텍스트를 입력해도 영어만 변경되기 때문에 편리하게 사용할 수 있습니다. 입력창에 타이핑 문장을 타이핑하거나 원본 텍스트를 Ctrl+C (복사), Ctrl+V(붙여 넣기) 해서 입력할 수 있습니다. https://xn--yq5bk9r.com/blog/text-case-converter 대소문자 변환 대문자에서 소문자로, 소문자에서 대문자로 변경 xn--yq5bk9r.com 대문자로 변환 (UpperCase) 모든 영문 텍스트를 대문자로 변환시킵니다. 사용자의 문장에 전부 대문자로 작성하는 것은 독자들에게 텍스트가 두드러져 보이는 데 도움이 될 수 있습니다. '대문자로 변환' 사용하면 머리.. 2022. 5. 5. 리액트 타입스크립트 array map - 셀프 개발자 코딩 부트캠프 function App() { let names:Array = ["사과", "고구마", "오렌지"]; let nameList = names.map(name => ({name})); return ( {nameList} ); } export default App; array 를 render 부분에서 보여줄 수 있다. map 은 c# linq에 있는 select 와 비슷하다. c# 에 있는 extension method같은 기능이 typescript에 있다면 위와 같은 상황에서 편할것 같다. 귀찮아서 조사는 안해봄. https://jinibh.tistory.com/711 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; functio.. 2022. 3. 15. 리액트 타입스크립트 useRef - 셀프 개발자 코딩 부트캠프 useRef를 이용하면 DOM을 직접 참조할 수 있다. import { createRef } from "react"; function App() { let refInput = createRef(); function handleClick(e:React.MouseEvent) { refInput.current?.focus(); } return ( Click!! ); } export default App; 버튼을 클릭하면 input에 포커스 된다. import { createRef } from "react"; function App() { let refDiv = createRef(); return ( ); } export default App; div 를 참조할수도 있다. https://jinibh.tistor.. 2022. 3. 15. 리액트 타입스크립트 onClick, onChange 코드 - 셀프 개발자 코딩 부트캠프 import { useState } from "react"; function App() { let [value, setValue] = useState(""); function handleChange(e:React.ChangeEvent) { setValue(e.target.value); } function handleClick(e:React.MouseEvent) { alert(value); } return ( Click!! ); } export default App; https://jinibh.tistory.com/711 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; function App() { let [number, set.. 2022. 3. 15. 리액트 타입스크립트 props 값 전달하기 - 셀프 개발자 코딩 부트캠프 부모가 자식 컴포넌트 에게 값을 넘겨줄때 사용한다. App.tsx import MyComp from './MyComp'; function App() { let name = "리액트"; return ( {name} ); } export default App; 위와같이 부모가 자식에게 보내줄 수 있다. type MyCompProps = { title: string, num: number; } // typescript에서는 propTypes를 지정 안해도 될것 같다. const defaultProps = { title : "Default Title", num : 0 }; // props라는 이름은 아무렇게나 지정도해 상관 없는것 같다. 바꿔도 잘 동작한다. const MyComp = (props:MyCompP.. 2022. 3. 15. 이전 1 다음 728x90 반응형
