TypeScript7 [TypeScript]JS react -> TS react 리팩토링 자바스크립트로 작성된 프로젝트를 타입스크립트로 변환하는 과정. 기존 작업한 리액트 프로젝트 : React, webpack, babel로 구성되어있음. 마이그레이션 진행 전 폴더를 따로 백업해두고 새로 레파지토리와, 폴더를 만들어서 진행함. 참고한 블로그! https://projooni.tistory.com/entry/%EA%B8%B0%EC%A1%B4-Git-Repository%EB%A5%BC-%EB%B3%B5%EC%82%AC%ED%95%98%EC%97%AC-%EC%83%88%EB%A1%9C%EC%9A%B4-Repository-%EB%A7%8C%EB%93%A4%EA%B8%B0 기존 Git Repository를 복사하여 새로운 Repository 만들기 보통 Git Repository를 복사할 때 fork를.. 2023. 10. 25. [TypeScript]JS -> TS 리팩토링하며 겪은 오류 오류 메세지 : Cannot use JSX unless the '--jsx' flag is provided.ts(17004) const Container: IStyledComponent 오류 원인 : TypeScript가 JSX 확장자 파일 인식을 못해서. 해결 방법 : jsx 속성을 추가한다. 오류 메세지: Argument of type 'ProductItem | undefined' is not assignable to parameter of type 'ProductItem'. Type 'undefined' is not assignable to type 'ProductItem' 오류 원인 : 정의되지 않은 값이 들어올수 있다고 TS에게 정의를 하지 않아서, 알 수 없는 타입을 전달하는 과정에서 생김 해.. 2023. 10. 24. [TypeScript]TS쓰는 법 간단설명 변수, 함수 만들 때 타입지정하면 끝임. 뻥이다. (새로 프로젝트 셋팅하는 것 기준.) 1. 터미널열고 npx create-react-app 프로젝트이름 --template typescript !!! 2. 파일 확장자명은 JSX문법을 쓴다면 .tsx 일반파일은 .ts 3. JSX표현하는 타입은 ex) let 박스 :JSX.Element = 4. component만들 때 타입지정은 함수니까 파라미터와 return 타입 지정하면됨. 파라미터는 항상 props이기 때문에 props가 어떤 타입일지 지정하면됨. ex) type AppProps = { name: string; }; function App (props: AppProps) :JSX.Element { return ( {message} ) } props.. 2023. 4. 17. [TypeScript]변수에 타입 담기, readonly type 이! 렇 ! 게! object 타입에 두 개 이상의 타입이 들어가는 경우 type 키워드를 사용해서 변수로 타입을 지정해서 할당하는것이 훨씬 편하다. 변수에 안담는 다면 위의 식은 아래와 같이 표현할 수 있다. 그런데! type변수를 union type으로 합칠 수 있다. 혹은! & 연산자로 object타입을 합칠 수 있다. interface type말고 interface를 이용해서 Object에 타입 지정을 해줄 수도 있다!! type과 다른점은 중복선언(중복 속성은 안됨)이 가능하다는 점!! 위와 같이 합쳐진다.혹은 extends(종속)나 재정의도 가능.// extends쓸때 중복속성이 발생하면 에러로 잡아줌. type가 더 엄격하다고 보면 됨. 따라서 외부 라이브러리 같은 경우에 inter.. 2023. 4. 16. [TypeScript] TS와 JS+엄격모드 차이점, 공통점 자바스크립트로 코드 짜는데 ... 타입스크립트 잘못썼으니까 고치라고 에러가 엄청 떠서 참 애를 먹었다..참나... 저 좀 내버려두세요! 배포할 때 자바스크립트에 엄격모드를 적용하는데 이때 에러 고치면서 타입스크립트 빨리 배우고싶다는 마음이 간절했음.. 드디어 타입스크립트를 배우고있는데 갑자기 궁금해서 찾아본.. 자바스크립트 엄격모드와 타입스크립트의 공통점과 차이점... 공통점 코드 작성 시 더 엄격한 문법 규칙을 적용하여 오류 발생 가능성을 줄인다. 기존에는 무시되었던 몇 가지 오류들이 예외를 발생시킨다. 차이점 엄격 모드는 자바스크립트에서만 사용되며, 타입스크립트에서는 타입 체크를 사용하여 더 안정적인 코드를 작성함 엄격 모드는 코드 내에 use strict 구문을 추가하여 사용하며, 타입스크립트는 파.. 2023. 3. 15. [TypeScript] 클래스, 인터페이스, 타입 간단 설명 Class/클래스는 객체 지향 프로그래밍에서 사용하는 개념으로써, 객체의 속성과 메소드를 정의하는데 사용된다. 클래스 는 객체를 생성할 수 있는 생성자(Constructor)함수와 함께 사용되며, 클래스의 인스턴스는 객체를 나타낸다. class Person { private name: string; private age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } const john = new Person('John', 30); joh.. 2023. 3. 15. [TypeScript]Call Signature, Generic Type https://www.typescriptlang.org/docs/handbook/2/functions.html#call-signatures Documentation - More on Functions Learn about how Functions work in TypeScript. www.typescriptlang.org 호출 시그니쳐!! 함수를 정의하는 방식 중 하나로, 함수의 매개변수와 반환값의 타입을 명시하는 방법 function add(x: number, y: number): number { return x + y; } 이 함수의 Call Signature는 (x: number, y: number) => number 이는 함수가 받는 매개변수가 number 타입이고, 함수가 반환하는 값도 numb.. 2023. 3. 10. 이전 1 다음
