TypeScript5 Vite에서 React-JavaScript를 React-TypeScript로 마이그레이션하기 Vite로 프로젝트의 시작을 프레임워크 React, JavaScript로 선택한 프로젝트를 TypeScript로 변환해보자.먼저 기본적인 JavaScript파일들을 TypeScript로 변환하는 과정은 본인은 아래와 같은 순으로 변환한다. 1. tsconfig.json / tsconfig.node.json / vite.config.ts 등 설정파일 생성,작성하기( 나는 프로젝트를 본인 환경에서만 사용해서 tsconfig.json만 파일을 추가해서 작업했다. 기존 js 설정파일은 삭제)2. main.jsx를 먼저 tsx로 바꾸고 타입 추가하기3. 파일명 바꾸기 ( 파일 하나씩 진행하기, 여러개를 한번에 바꾸고 진행하게되면 오류가 많음 )4. 파일명을 바꿨을때의 타입오류를 추가해주면서 오류 .. 2024. 6. 29. TypeScript 시작하기 VScode 환경에서 폴더를 하나 만들고 터미널을 통해 폴더내부로 진입하여 아래의 명령어를 입력하여 설치를 한다. npm init npm i @types/node npm i typescript -g 여기까지 설치가 되었다면 타입스크립트 컴파일러가 설치되었는지 확인하기 위하여 아래의 코드를 입력한다. tsc -v 만약 Windows 환경에서 작업중에 파일을 로드할 수 없다는 오류가 뜬다면 PowerShell의 실행정책에 스크립트가 차단되었을때 발생하는 오류이기 때문에 해결하기 위해 Windows 검색창에 Windows PowerShell을 입력하고 마우스 우클릭을 통해 관리자 권한으로 실행시키자. Get-ExecutionPolicy 위의 명령어를 입력했을때 Restricted 또는 undefined가 뜨면.. 2023. 6. 6. Typescript 리터럴, 유니온(or연산) 교차(and연산) 타입 정리 const name1 = "kim"; let name2: string | number = "um"; // "|" 사용해서 분기한게 유니온 교차타입이라고함 자바스크립트에선 let 으로 선언한 변수에 문자열을 넣고 추후에 number타입으로 바꿀 수 있지만 타입스크립트에서 문자열, 넘버타입의 변수를 둘다 넣고싶으면 위와 같이 명시를 해두어야 한다. interface Car{ name : "car"; // "car"부분을 타입이라고 함. color : string; start(): void; } interface Mobile{ name : "mobile";// "mobile"부분을 타입이라고 함. color : string; call() : void; } //두개의 인터페이스를 설정하고 함수를 만드는 상황. .. 2023. 5. 3. Typescript 함수 정리 및 예시 ***필수매개변수 보다 선택적 매개변수가 함수 인자 순서로 구성되면 오류가 남 => 매개변수 순서구분? 아래는 코드는 예시 function hello(age?: number ,name : string) : string{ if(age !== undefined){ return `Hello ${name} your age is ${age}` } else{ return `Hello ${name}`; } } console.log(hello("kim", 30)); console.log(hello("kim")); 선택적 매개변수를 앞에 사용하기 위해선 아래와 같이 명시적으로 undefined 값을 넣어줘야함. function hello(age: number | undefined ,name : string) : stri.. 2023. 5. 3. 이전 1 2 다음
