한 입 크기로 잘라먹는 타입스크립트(TypeScript)대시보드

강의를 듣다보니 궁굼한 내용이 있어서 문의 드립니다. typeacript가 컴파일러를 통해 javascript로 변환되고javsscript가 컴파일러를 통해 바이트 코드로 변환되고..질문 내용바이트코드는 노드js가 해석하는 컴퓨터 언어 파일인가요? 웹브라우저가 해석하는 파일인가요?typeacript와 webpack 라이브러리 관련해서둘다 필수 라이브러리인데 같이 사용할때 설정 파일의 차이점을 모르겠습니다.웹펙을 사용하는 프로젝트인경우 자바스크립트 버전을 변경해서 번들링을 하게 되는데, 웹펙을 사용하면 이때 typeacript의 target 자바스크립트 버전은 무의미 하다고 봐도 되나요 ?typescript config 옵션 중에 모듈 관련된 옵션들이 있는데 웹펙을 사용하면 모듈 옵션은 무의미 하다고 봐도 되나요 ? 답변해주신 내용중에 typescript로 cra 실행 시 기본 컴파일 설정값이 컴파일을 하지 않게 되어 있고, babel 별도 설정을 통해 javascript 컴파일을 한후 런타임을 한다 하셧는데 그러면 typescript는 vscode 자체에서 타입 체크 정도의 기능한 한다고 이해해도 될가요?babel 설정을 하지 않은 프로젝트에서 타입스크립트 프로젝트를 웹 브라우저에 띄울 수 있나요 ?

안녕하세요, 강의 정말 잘 듣고 있습니다. 핵심적인 부분을 쉽게 설명해주셔서 타입스크립트에 적응하는 데 도움을 많이 받고있고, 정말 감사드립니다.질문드리고 싶은 건 tsconfig.json 옵션에 대해서입니다. 강의에서 설명해주신 옵션들 외에도 다른 옵션들이 있고, 프로젝트마다 조금씩 다르게 사용하게 되잖아요.moduleDetection은 각 파일에 모듈 시스템 키워드(export, import)를 최소 하나 이상 사용해 해당 파일을 전역 모듈이 아닌 로컬(독립) 모듈로 취급되도록 만든다고 강의에서 설명해주셨는데요.이번에 isolatedModules라는 옵션을 알게 되었는데, 모듈을 독립적으로 컴파일하는 것을 강제한다고 하더라구요.moduleDetection은 모듈 시스템 키워드를 사용해서 모듈을 독립적으로 취급되도록 하고, isolatedModules는 모듈 시스템 키워드를 자동으로 사용할 수 있게 해주지는 않지만, 얼핏 보기에 두 옵션을 사용했을 때 기대할 수 있는 효과가 비슷하다고 보이는데요.제가 이해한 내용이 맞는지, 혹시 이에 대해서 추가적인 내용을 알려주실 수 있으신지 궁금해서 질문을 드리게 되었습니다.좋은 강의 준비해주셔서 다시 한번 감사합니다!

let num2 = 10 as unknown;은 어떻게 가능한건가용? 10은 unknown의 다운 캐스팅이라서 안되는거 아닌가용?

tsx도 비슷한 설정이 필요한가요?

혹시 확장프로그램 어떤걸 다운 받아야 강의처럼 줄맞춤이 되나요??ㅠㅠ

안녕하세요.5분 25초 경의 코드를 똑같이 작성했습니다.그런데 callback(arr[i])부분에서'T' 형식의 인수는 'never' 형식의 매개 변수에 할당될 수 없습니다.ts(2345)라는 에러가 발생하는데 정상적인가요...?const arr = [1, 2, 3]; const newArr = arr.map((it) => it * 2); function map<T>(arr: T[], callback: (item: T) => T) { let result = []; for (let i = 0; i < arr.length; i++) { result.push(callback(arr[i])); } return result; }

tsx 오류 없이 실행이 안됩니다ㅠㅠ별 다른 메시지가 뜨지 않고 단지 실행이 안됩니다ㅠㅠ어떤걸 확인하면 좋을까요..? 설치도 진행한 상태입니다.. { "name": "section2", "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "section2", "version": "1.0.0", "license": "ISC", "dependencies": { "@types/node": "^20.11.17" } }, "node_modules/@types/node": { "version": "20.11.17", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.17.tgz", "integrity": "sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==", "dependencies": { "undici-types": "~5.26.4" } }, "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" } } } { "name": "section2", "version": "1.0.0", "description": "", "main": "index.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "@types/node": "^20.11.17" } }  { "compilerOptions": { "target" : "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "moduleDetection": "force", "skipLibCheck": true, }, "ts-node": { "esm": true }, "include": ["src"] }

안녕하세요 강의 도움 많이 받고 타입스크립트 + 리액트 조합으로 서비스 만들고 있습니다. 강의에 테스트코드 관련 내용은 없어 무관한 질문 죄송합니다 ㅠjest로 테스트 코드를 작성하려고 하는데 설정에 무슨 오류가 있는지 도무지 테스트가 되지 않습니다.. 여러 블로그 글이랑 챗 gpt참고해서 수정해도 안되는데 혹시 타입스크립트에서 jest 쓰려면 다른 설정을 해줘야 하는건가요?도움 주시면 감사드리겠습니다 ..

function func(value: number | string | Date | Person) { if (typeof value === "number") { console.log(value.toFixed()); } else if (typeof value === "string") { console.log(value.toUpperCase()); } else if (value instanceof Date) { console.log(value.getTime()); } else if (typeof value === "Person") { console.log() } }Person 타입은 위에와 다르게 typeof를 사용하면 안 되는 이유가 있을까용?

type Post = { title: string; author?: string; }; let post: Post = { title: "한입", author: "이정한", }; const len: number = post.author!.length; console.log(len);안녕하세요 강의를 듣다가 질문이 있어서 남깁니당Non Null 타입은 선택적 프로퍼티에 값이 존재할 때만 사용할 수 있는건가요? post 객체에 author 프로퍼티를 정의하지 않고 파일을 실행하니 오류가 납니다!

타입스크립트로 리액트를 시작할 때 이 명령어를 사용하지 않고 영상처럼 하는 이유가 있을까용?npx create-react-app 디렉토리명 --template typescript

터미널에 src/index.ts 이렇게 작성해서 index.js파일이만들어졌습니다. 그런데 index.js파일이 빈파일입니다.아무런 내용이 없는데, 왜그런걸까요..?ㅠㅠㅠ

안녕하세요, 강의 너무 잘 듣고 있습니다. 감사합니다!접근 제어자 강의 내용 중 궁금한 내용이 생겨서 문의드립니다.아래의 내용을 보면, const keyword 로 만든 인스턴스에서 필드값을 변경할 수 있는데, const keyword 는 상수여서 변경이 불가능해야 하는 것이 아닌가요?해당 내용에 대해 참고할 수 있는 자료가 있다면 공유해 주시면 진심으로 감사하겠습니다! const employee = new Employee("이정환", 27, "developer"); employee.name = "홍길동"; employee.age = 30; employee.position = "디자이너";

type PromiseUnpack<T> = T extends Promise<infer R> ? R : never; type PromiseA = PromiseUnpack<Promise<number>>; // number타입 type PromiseB = PromiseUnpack<Promise<string>>; // string타입안녕하세요 선생님. 8:40~부터 나오는 실습코드입니다.타입스크립트의 타입 정의에 관해 헷갈리는 개념이 있습니다.PromiseUnpack<Promise<number>>에서 Promise는 정의해주지 않았는데 갑자기 나오는 이유가 궁금합니다.type Promise = 블라블라이게 없어서 궁금합니다. Promise라는 타입을 정의해준 적은 없지만 '그런 타입이 존재하는구나' 라고 타입스크립트에서 추론이 되어 Promise의 타입 정의 없이 예시로 코드를 작성하신 것일까요??  

해당강의 따라하던중compilerOptions 에서 target 을 ES5로 했을때는 아무오류 없이 js 파일도 잘 나오는데요, ESNext로 하고 컴파일하면 오류가 나와요. 하지만 동일하게 js파일은 생성이 되요.node_modules/@types/node/globals.d.ts:396:25 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?396 : typeof import("undici-types").FormData; 제가 뭘 따로 설치하거나 하진 않고 강의만 따라했다고 생각했는데 한번만 봐주세요!  

안녕하세요 js -> ts 마이그레이션 문의드립니다!거의 다 작업된 js문법으로 만들어진 개인 프로젝트가 있습니다.이 강의로 ts 공부하면서 차근차근 적용해보려고 하는데 코드 양이 꽤 되어서 시간이 오래 걸릴 것 같아 여러 방법중에 고민이 있습니다.여러 방법을 생각해봤는데 한번 봐주시면 감사하겠습니다! 기존 main브랜치에서 계속 커밋하면서 파일 한개 한개씩 차근차근 ts로 바꾸기 -> ts마이그레이션과 함께 구직활동을 병행하려고 하는데, 회사 입장에서는 지원자의 코드가 어떤 파일은 ts이고, 어떤 파일은 js이고 뒤죽박죽이라 마이너스가 될까봐 걱정입니다. 마이그레이션 하다가 꼬일까봐 걱정되어 ts전용 브랜치를 따로 파서 작업 -> 만약 마이그레이션 작업 외에 기능이 추가되거나 버그를 수정하는 코드가 추가된다면, ts브랜치로만 진행 (추후에 ts브랜치가 문제없이 완성된다면 ts브랜치가 main브랜치가 됌)기타 의견이미 몇달동안 만든 프로젝트를 ts로 바꾸려니 고민이 많아서 선생님의 의견이 궁금합니다! 제가 적어놓은 방법이 맞는지도 잘 모르겠습니다.. 도움 주시면 감사하겠습니다.

안녕하세요:) 질문이 있어서 찾아왔습니다 ㅠㅠ...타입스크립트로 리액트 프로젝트를 할 떄 로컬스토리지를 사용할 경우 문제가 발생하여 질문드립니다. 아래코드는 유저와 컴퓨터의 점수를 담고 있는 State입니다.이 State의 초기값은 로컬스토지리에서 가지고 올 수 있는 값이 없다면 userScore과 computerScore에 숫자 0을 초기값으로 부여하고, 가지고 올 수 있는 값이 있다면 로컬스토리지에서 가지고 옵니다. const [score, setScore] = useState<{ userScore: number; computerScore: number; }>( !JSON.parse(localStorage.getItem("score")) ? { userScore: 0, computerScore: 0, } : JSON.parse(localStorage.getItem("score")) ); 오류 발생...아래 코드 부분에서 string | null 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다. 라는 오류가 발생합니다.localStorage.getItem("score") getItem을 ctrl + 클릭하여 코드를 들어가 본 결과반환값? 을 string | null 유니온 타입을 가지고 있습니다.  getItem(key: string): string | null; json.parse에서 parse부분을 ctrl + 클릭하여 코드를 들어가 본 결과parse에 key값은 string만 받을 수 있게 되어 있습니다.parse(text: string, reviver?: (this: any, key: string, value: any) => any): any; 제 개인적인 의견은 getItem의 반환값 타입이 string | null 이지만 parse에서 key값은 string만 가능하기 때문에 문제가 발생하는 것 같습니다. 이 오류를 하루동안 계속 찾아봤는데 정보가 너무 부족했습니다. 그나마 사람들이 말씀하시는 답변의 코드는JSON.parse(localStorage.getItem("score") || "{}") 이렇게 하라고 하셨는데 저 코드를 넣어버리니 로컬스토리지에 value값에 처음으로 담기는 값은 {} 이거였습니다... 그래서 저는 다르게 생각해서 `` 와 ${} 이거를 사용하기로 했습니다. 이것도 결국 문자열이라고 배웠기 때문입니다.let str = `${}` 그래서 최종적으로 나온 코드는 아래 코드처럼 바꾸는 거였습니다. 문제 없이 돌아가기는한데 이렇게 써도되는지 의문이 드네요... 혹시 다른 방법이 있을지 궁금합니다.JSON.parse(`${localStorage.getItem("score")}`)

안녕하세요. 이정환 강사님:)타입스크립트 강의를 듣고, 리액트에 적용하고 있는중 궁금한 사항이 생겨 질문을 올립니다.오늘도 많은 자료들을 찾아보고, 고민하는 시간도 가져봤는데 궁금증이 풀리지 않아서 글을 남깁니다 ㅠㅠ... 이미지 파일 import 질문리액트에서 이미지 파일(jpg, png 등...)을 사용할 떄는 크게 2가지 방법이 있다고 들었습니다.public폴더에 image폴더를 관리할 것인가, src폴더에 image폴더를 관리할 것인가에서 시작합니다. public 폴더에서 image폴더 관리아래 코드처럼 index.html에서 기준이 되어 절대경로로 바로 불러오기 편합니다.<img src="../image/이미지파일1.png"> src폴더에서 image폴더 관리아래 코드처럼 절대경로로 불러온 파일을 이미지파일1에 담아 src속성안에 객체로 형태로 전달해 사용합니다.import 이미지파일1 from "../image/이미지파일1.png" <img src={이미지파일1}> 위에 예시 이외에 많은 방법들이 존재하겠지만 제가 조사한 결과 두개가 대표적이며, 코드만 놓고 봤을때는 "public에서 관리하는게 편한거 아니야?" 라고 생각할 수 있지만 각각의 장단점이 있더라구요. 과연 어디에서 관리하는게 맞을까요? 라고 질문을 드리고 싶고 추가적으로 아래 코드에서 질문이 하나더 있을 예정입니다... (어디에서 관리하는게 좋을까? 참고사이트)https://velog.io/@rimo09/React-Create-react-app-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C%EB%A5%BC-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-4%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95 src폴더에서 image폴더 관리 ... 타입스크립트 적용우리는 src폴더에서 이미지 관리를 하며 타입스크립트를 적용할 떄 2가지를 신경 써줘야 할 것 같습니다. 첫번쨰는 확장자이고, 두번쨰는 타입입니다. 아래코드를 확인해봐주시면 감사하겠습니다.import 이미지파일1 from "../image/이미지파일1.png" import 이미지파일2 from "../image/이미지파일2.png" import 이미지파일3 from "../image/이미지파일3.png" type Item = { [key: string]: { name: string; src: ?(어떤 타입이 들어가야 할까요?); alt: string; }; }; const item: Item = { image1: { name: "이미지1입니다.", src: 이미지파일1, alt: "이미지1", }, image2: { name: "이미지2입니다.", src: 이미지파일2, alt: "이미지2", }, image3: { name: "이미지3입니다.", src: 이미지파일3, alt: "이미지3", }, }; 위에 예시를 보면 타입스크립트가 아니기 떄문에 오류를 발생시키지 않고 있지만... 처음 저렇게 import해서 불러온다면 경로에서 오류를 발생시킵니다. 그것은 png, jpg같은 확장자를 인식하지 못하기 떄문인데요 그래서 저희는 가장 최상위 루트 폴더에 d.ts파일안에 확장자를 추가해주고 시작해야합니다. 그 후 import한 이미지파일들을 객체에 담아서 사용하고 싶을 경우 const item과 같이 작성할 수 있을것 같습니다. 이제 우리는 item의 타입을 정해줘야하는데 저같은 경우 인덱스 시그니처 문법을 사용했습니다. 그러면 src의 타입은 뭐라고 해줘야할까요? 타입 추론으로 두어도 상관은 없지만 어떤 타입으로 추론했는지 마우스를 올려보니 any...타입으로 추론하더라구요... 이것이 저의 두번쨰 질문이였습니다. (확장자 오류 해결방법 참고사이트)https://velog.io/@gabdol/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95 타입추론 어디까지? 질문다음 질문입니다... 질문이 너무 많아서 죄송합니다ㅠㅠ...보통 저희가 수업에서 배울 떄 정말 많은 타입을 정해줬어야 합니다... 변수, 함수, 리액트에 적용한다면 Hook까지도요... 하지만 타입스크립트에는 타입추론 기능이 있기떄문에 모든곳에 다 적용할 필요는 없다고 배웠는데 과연 어디까지 그게 적용이 될지 궁금합니다... 아래코드를 확인해주시면 감사하겠습니다.const randomItem = (): string => { // 아이템 key 배열 let itemKey: string[] = Object.keys(item); // 랜덤 숫자 출력 let randomNumber: number = Math.floor(Math.random() * itemKey.length); // 아이템 key배열 중 랜덤 숫자에 해당하는 인덱스 아이템을 반영한다. return itemKey[randomNumber]; }; 위에 예시는 item이라는 객체에 key를 배열에 담아서, 랜덤 숫자에 해당하는 아이템을 반환하는 함수입니다.함수에 반환타입 string부터 함수 안에 모든 변수들에 타입을 지정해주었는데 안써줘도 코드에는 문제가 생기지 않았습니다. 과연 어디까지 써주고 안써줘도 되는지 알 수 있을까요?? useState Hook 타입질문이제 마지막 질문입니다... 여기까지 읽어주셔서 감사합니다 ㅠㅠ저희는 useState가 동일한 값을 가질떄 객체로 담아서 사용하는 방법을 배웠습니다.const [Item, setItem] = useState({ userItem: null, // string 값이 들어올 예정 computerItem: null, // string 값이 들어올 예정 }); 위에 코드처럼 Item이라는 변수안에는 user와 computer에 해당하는 동일한 string값을 가지고 처음에는 빈값인 null값을 가집니다. 그러면 useState에 제네릭을 사용해줘야하는데 아래 코드처럼 작성해주면 되는 걸까요? const [item, setItem] = useState<string | null>({ userItem: null, // string 값이 들어올 예정 computerItem: null, // string 값이 들어올 예정 }); 그리고 만약 useState값을 로컬스토리지에서 가져와야 할 경우 어떻게 해줘야할지도 궁금합니다.아래코드는 useState에 삼항연산자를 작성한 형태입니다. 로컬스토리지에서 가지고 올 값이 없다면 null값을 반영하고 있다면 로컬스토리지값을 가지고 오는건데 아래같은 경우에는 타입을 어떻게 지정해주면 좋을까요? const [item, setItem] = useState( !JSON.parse(localStorage.getItem("item")) ? { userScore: null, computerScore: null, } : JSON.parse(localStorage.getItem("item")) ); 질문이 너무 많았습니다... 감사합니다 ㅠㅠ

안녕하세요:) 타입스크립트로 리액트 프로젝트를 만들려고 시작하던중 "수업이외에 실무에서는 어떤식으로 많이 사용할까?" 라는 생각에 유튜브등 영상을 시청하면서 궁금한 사항이 생겨 질문을 남깁니다. 리액트를 타입스크립트로 시작하는 방법을 배웠습니다. (공식 홈페이지 명령어입니다.)아래 코드를 입력할 경우 타입스크립트 기본세팅으로 리액트 프로젝트가 생성됩니다.npx create-react-app my-app --template typescript (수업방식으로 시작) App.tsx 컴포넌트(시작점) 파일을 살펴봅니다. 아래 코드는 초기세팅입니다.import React from 'react' const App = () => { return ( <div>App</div> ) } export default App (실무에서 사용한다는 영상) App.tsx 컴포넌트(시작점) 파일을 살펴봅니다.아래 코드는 초기세팅에 React.FC를 함수타입에 지정하고 시작합니다. import React from 'react' const App:React.FC = () => { return ( <div>App</div> ) } export default App 궁금한 사항React.FC는 타입스크립트에서 함수에 사용하게 만들어둔 함수 타입입니다.React.FC를 지양하는 사람도 존재하고 지향하는 사람도 존재하는데 과연 어떤걸 사용하는게 맞을까요?그냥 여쭤보면 생각없이 답만 얻어가는 느낌이라 조사를 조금 했습니다. React.FC는 단점이 존재합니다.React.FC를 사용해줄 경우 props에 자동으로 children props가 존재합니다. 이것은 chidren이 존재한다는 가정하에 사용하기 때문에 타입스크립트를 사용하는 의미가 있을까? 라는 의문을 제기합니다.default Props에 오류가 생깁니다. 현재는 이 오류가 업데이트되면서 많이 사라졌다고는 하는데 default Props는 리액트의 고정 props를 지정해야하는 경우?? 많이 사용해야 하기때문에 갑자기 오류가 나타난다면 이것도 단점이 될 수 있습니다.React.FC를 사용함으로 코드가 쓸대없이 길어집니다. 모든 컴포넌트에 쓸대없이 다 붙여준다면 이것도 단점이 될 수 있겠죠? (타입 추론으로 인해 지정하지 않았던 걸까요?) 이상으로 질문 내용이였습니다. 과연 React.FC를 쓰는것이 맞는건지? 수업내용중 안쓰고 생략한 이유는 타입추론 떄문인건지가 궁금합니다. 긴 내용 읽어주셔서 감사합니다 :)

학생만 사용할 수 있는 함수 goToSchool을 제작할 때 불필요한 타입 좁히기를 피하기 위해서 제네릭을 인터페이스에 활용한다고 하셨는데 처음부터 type을 Student라고 한다면 불필요한 타입 좁히기를 사용할 일이 없지 않나라는 궁금증이 생겨서 질문드립니다. ㅠㅠ <아래와 같은 코드>// 1번 학생을 위한 함수 function goToSchool(user: User) { if(user.profile.type !== "Student") { user.profile // 개발자 console.log("잘못오셨습니다") return } user.profile // 학생 } // 2번 학생을 위한 함수 function goToSchool(user: User) { if(user.profile.type === "Student") { user.profile // 학생 console.log("잘못오셨습니다") } }