관리 메뉴

프로그래밍 삽질 중

front부분(axios 있는 것) index.html 파일 내 js를 ts로 변환(진행중) 본문

과거 프로그래밍 자료들/프로젝트

front부분(axios 있는 것) index.html 파일 내 js를 ts로 변환(진행중)

평부 2022. 9. 23. 23:05

 

* 목표

- 이전에 배포했던 영단어 version 2(자바스크립트(js))를 타입스크립트로(ts) 변환하는 것이 목적

 

* 첫 번째

▶ interface 사용

문제점 : 대다수 함수에 사용된 매개변수(english, korean, type, status(간간히))가 모두 string 값이나 interface로 사용 시 js로 변환하면 사라짐

▶ 제네릭을 이용해보자 생각함

 

▶ ts에서 이벤트 사용하기

문제점1 : js 내 document.querySelector는 ts에서 인식되지 않음

▶ 해결책 : https://stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement

 

The property 'value' does not exist on value of type 'HTMLElement'

I am playing around with typescript and am trying to create a script that will update a p-element as text is inputted in a input box. The html looks as following: <html> <head> ...

stackoverflow.com

▶ 해결책2 : http://daplus.net/typescript-htmlelement%EC%9C%A0%ED%98%95%EC%9D%98-%EA%B0%92%EC%97%90-value%ED%8A%B9%EC%84%B1%EC%9D%B4-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4/

 

[typescript] 'HTMLElement'유형의 값에 'value'특성이 없습니다. - 리뷰나라

typescript를 가지고 놀고 있으며 입력 상자에 텍스트가 입력 될 때 p 요소를 업데이트하는 스크립트를 만들려고합니다. html은 다음과 같습니다. <html> <head> </head> <body> <p id="greet"></p> <form> <input id="na

daplus.net

▶ 해결책 3: https://www.typescripttutorial.net/typescript-tutorial/type-casting/

 

Type Casting

Summary: in this tutorial, you will learn about type castings in TypeScript, which allow you to convert a variable from one type to another type. JavaScript doesn’t have a concept of type casting because variables have dynamic types. However, every varia

www.typescripttutorial.net

 

문제점2 : js 내 event.target.dataset.type을 ts에서 인식하게 하고 싶으면?

▶ 해결책 1 : https://stackoverflow.com/questions/40676343/typescript-input-onchange-event-target-value

 

Typescript input onchange event.target.value

In my react and typescript app, I use: onChange={(e) => data.motto = (e.target as any).value} How do I correctly define the typings for the class, so I wouldn't have to hack my way around the t...

stackoverflow.com

 

▶ 해결책 2 : https://stackoverflow.com/questions/49631688/property-dataset-does-not-exist-on-type-eventtarget

 

Property 'dataset' does not exist on type 'EventTarget'

When trying to access the dataset on a button after a click, I get this^ error. linkProvider = (ev: React.SyntheticEvent<EventTarget>) => { console.debug('ev.target', ev.target.dataset[...

stackoverflow.com

 

* 문제점 : 'string | undefined' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다. 'undefined' 형식은 'string' 형식에 할당할 수 없습니다.

▶ type의 값이 'string | undefined' 두 가지로 나옴
▶ 타입가드로 'string'만 적용되게 할 것

 

* 문제점 :

TypeScript : Uncaught ReferenceError: exports is not defined

https://dev-minju.tistory.com/143

 

TypeScript : Uncaught ReferenceError: exports is not defined

문제 정의 : 코딩애플 Ts 강의 import/export 파트 따라 하는데 발생. 내 기억으로는 내가 뭐 따로 세팅한거 없고 pure 환경이었던 걸로 기억한다. type만 따로 빼서 기존의 컴포넌트에 import 하려 했는데

dev-minju.tistory.com

 

index:1 Uncaught TypeError: Failed to resolve module specifier "axios". Relative references must start with either "/", "./", or "../".

 

'axios' 모듈을 찾을 수 없습니다. 'moduleResolution' 옵션을 'node'로 설정하거나 'paths' 옵션에 별칭을 추가하려고 하셨습니까?

▶ 현재 여기서 계속 막히는 중

https://stackoverflow.com/questions/55886312/syntaxerror-import-declarations-may-only-appear-at-top-level-of-a-module-using

 

SyntaxError: import declarations may only appear at top level of a module. Using express, no webpack

I am trying to import a npm module in the front end script. It is saying modules must be on top level to import but it is at the top level from what I can tell. Maybe my web server is messing with my

stackoverflow.com