본문 바로가기

웹/TypeScript

[Typescript] 디자인 패턴을 적용해보다
웹/TypeScript 2024. 11. 26. [Typescript] 디자인 패턴을 적용해보다 디자인 패턴 활용 했던 것디자인 패턴을 활용해서 분기처리를 해본 경험을 써봅니다.간단히 설명하면 데이터를 받아오고 가공해서 xlsx 시트에다가 넣는 작업을 하는 함수를 만들었을 때 생겼어요.문제는 데이터에 있었어요. 처음에는 고정된 타입의 데이터가 온다고 생각했는데 또 다른 타입 형식으로 데이터를 받고 처리해야 하는 상황이였어요. 기존에 사용하는 타입 형식 과 또 다른 타입 형식2가지를 if문으로 분기처리하면 간단히 처리되었을 거에요. 하지만 저는 여기서 불안감을 느꼈어요. “데이터 형식을 여러게 만들어 달라하면 어떻하지?” 라는 생각이 들더라구요. 함수로 들어오는 데이터 형식이 많아 지면 많아질 수록 if 문이 많아질태고 나중에는 읽기 더 어려워질 거에요. 그래서 gpt, claude 한태 더 좋은 방..
[Typescript] typescript이 컴파일 되는 기준과 d.ts파일
웹/TypeScript 2024. 11. 25. [Typescript] typescript이 컴파일 되는 기준과 d.ts파일 타입스크립트를 쓰다 라이브러리를 만들어 보고싶다 라는 마음에 컴파일 되는 과정이 궁금해졌어요. 그리고 다른 라이브러리에 있는 d.ts파일에 대해 궁금해져서 찾아본 글이에요. 🟦 컴파일이 되는 과정gpt에게 일단 물어봤어요.tsconfig.json 파일을 보고 컴파일을 시작한다고 해요. 컴파일 할 때 cjs, mjs 정하는 기준은 module 옵션에 있었어요.tsconfig.json의 "type": "module" 설정 시, 모든 .js 파일은 ES 모듈로 간주되며, 이 경우 require를 사용할 수 없고 import를 사용해야 합니다.TypeScript 컴파일러의 "module" 옵션을 ES 모듈로 설정하면, 컴파일된 JavaScript 코드가 ES 모듈 형식으로 출력됩니다.만약 TypeScript를..
typescript에서 …(전개 연산자)을 string에 쓴다면
웹/TypeScript 2023. 4. 26. typescript에서 …(전개 연산자)을 string에 쓴다면 string을 강제로 object로 만들고 …(전개 연산자)를 쓴다면 어떻게 될까요? const str11: string = '태스트 입니다'; const obj22 = { ...str11, // TS2698: Spread types may only be created from object types. test: ' test', }; console.log(obj22); typescript 에서 이렇게 쓰면 에러가 납니다. object types만 전개 연산자를 사용할 수 있다네요. 근데 js 에서는 가능하죠, 그래서 js처럼 string 타입이 아닌 object 타입으로 만들어줍니다. 🟩 object 타입으로 변환 후 전개연산자 적용 const str11: unknown = '태스트 입니다'; const..
[Typescript] react, typescript에서 변수를 다른 파일에서 사용할 때 만난 TS1184: Modifiers cannot appear here 오류
웹/TypeScript 2023. 3. 23. [Typescript] react, typescript에서 변수를 다른 파일에서 사용할 때 만난 TS1184: Modifiers cannot appear here 오류 const CompanyTable = () => { const companyApi = "http://localhost:3030/order-sheets"; }; export default CompanyTable 여기에 있는 CompanyTable 안에 있는 companyApi 변수를 다른 파일에서 사용하려고 바로 export를 걸어봤습니다. 하지만 TS1184: Modifiers cannot appear here. 이렇게 오류가 납니다. 여기에 Modifier(제한자)가 여기 나타날 수 없다고 합니다. export 문이 함수 바디 내부에 위치하고 있기 때문입니다. export 문은 모듈의 최상위 수준에서만 사용할 수 있습니다. 🟩 왜 export문은 모듈의 최상위에서만 사용할 수 있을까요? export 문..
웹/TypeScript 2023. 2. 1. Typescript에서 string key로 객체 접근하기 Typescript에서 string key로 객체 접근하기 interface Person { name: string, age: number, } const testFunction = (testObj:Person, objectName: string) =>{ console.log(testObj); // { name:'minho', age:25 } } constmin= { name: 'minho', age: 25}; testFunction(min, 'age'); 위와 같은 상태에 있습니다. testFunction()을 호출했을 때 저는 매개변수로 들어온 testObj의 name만 필요한 상황입니다. 어떻게 할까요? 물론 [testObj.name]() 을 하면 됩니다...
웹/TypeScript 2022. 12. 8. ✅ [Typescript] ts-node와 node는 뭐가다를까요? ✅ ts-node와 node는 뭐가다를까요? 기존 자바스크립트를 웹이 아닌 콘솔에서 실행하기 위해서는 NodeJs 설치 후 node (자바스크립트).js 를 통하여 실행했었습니다. 타입스크립트 파일 또한 내부에 자바스크립트 문법으로만 작성을 한다면 node (타입스크립트).ts를 통하여 실행이 가능합니다. 하지만 타입스크립트 문법으로 작성된 .ts 파일은 node를 통해 실행이 되지 않는데 이유는 node는 타입스크립트를 해석하지 못하기 때문입니다. .ts 즉 타입스크립트 파일을 콘솔환경에서 node와 같이 실행하기 위해서는 아래와 같은 과정이 필요하다 👉 ts-node Install 터미널에 아래 명령어 실행 npm install -g ts-node 글로벌 환경으로 ts-node를 설치합니다. 👉 Ty..
웹/TypeScript 2022. 12. 8. ✅ Typescript에서 Json 파일을 불러오고 싶을 때 ✅ Typescript에서 Json 파일을 불러오고 싶을 때 To import a JSON file in TypeScript: tsconfig.json 파일에가서 resolveJsonModule 옵션을 true로 한다. tsconfig.json 파일에가서 esModuleInterop 옵션을 true로 한다. Vscode 를 껏다 킨다. Json 파일을 import 해본다. { "compilerOptions": { "esModuleInterop": true /* import 코드 변환 */ "resolveJsonModule": true /* json 파일을 import하는 환경 설정*/, }기본적으로 TypeScript의 esModuleInterop이 false입니다. 기본적으로 TypeScript는 Co..
Jest로 typescript 테스트 코드 만들어보기
웹/TypeScript 2022. 11. 29. Jest로 typescript 테스트 코드 만들어보기 ✅ Jest로 typescript 테스트 코드 만들어보기 테스팅 도구인 jest를 사용하면 javascript, typescript파일에서 작성한 코드를 테스트 할 수 있습니다 jest와 Mocha라는 테스트 프레임워크가 있다고 합니다. Jest는 추가 종속성이 필요하지 않은 단일 독립 테스트 프레임워크로 작동하도록 되어 있습니다. 반면에 Mocha는 제대로 작동하기 위해 함께 통합된 여러 라이브러리가 필요합니다. jest가 배우기 쉽다고 하여 jest로 테스트를 진행해보기로 하겠습니다. 🔷초기 설정 👉 jest를 위한 라이브러리 설치하기 npm i jest @types/jest ts-jest typescript -D jest 단위 테스트 프레임워크 @types/jest jest 의 타입스크립트 버전 t..
웹/TypeScript 2022. 11. 15. [TypeScript] Typescript에서 momentjs 대신 day.js 사용하기 Typescript에서 momentjs 대신 day.js 사용하기 🟩dayjs 설치하기 npm install dayjs npm을 통해서 설치합니다. 🟩불러오기 import dayjs from 'dayjs' // ES 2015 import를 통해서 가져옵니다. ES2015부터 된다고 나와있습니다. const dayjs = require('dayjs') require를 통해서 가져올 수 있습니다. 🟩한국 시간으로 맞추기 import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; import timezone from 'dayjs/plugin/timezone'; dayjs.extend(utc); dayjs.extend(timezone); dayjs는 타임존과..

티스토리툴바