Typescript
-
Typescript - 예제코드1Typescript 2023. 4. 19. 23:56
예제코드1(씹뜯맛즐) 우리가 이제까지는 메서드에 기능들을 추가하면서 여러가지 기능들을 만들거나 객체들을 만들어 왔다. 물론 구동은 되지만 솔직히 말해서 한달뒤에 당신이 당신 코드를 보고 해석할 수 있겠는가? 그리고 이런 방식으로 코드를 구현할 경우 클라이언트나 당신의 상사가 기능 추가해줘! 할때 바로 추가가 가능하겠는가? 할수야 있겠지만 공수가 더 들어가게 된다. 따라서 우리는 이제 바로 메서드를 추가하기 보다. 다른 방식을 통해 문제를 해결해보는 과정을 거쳐보도록 하자. 이제 할인을 하는 코드를 만들어 보려고 하는데 어떻게 하면 코드 구현이 가능할까? 물론 여기서 조건문을 쓰면 쉽잖아? 라고 하는 사람들이 있을 것이다. 근데 조건문을 쓰는것도 좋지만 조건문을 쓰지않고 문제를 해결하는 방법도 한번 구현해..
-
TypeScript - InterfaceTypescript 2023. 4. 19. 21:27
interface 아까 우리가 사용했던 object에 대해서 살펴보자. let user: object; user = { name: "xx", age: 30, }; console.log(user.name); 이렇게 코드가 작성되어 있다면 어떻게 실행될 것 같은가? object에는 특정 속성값에 대한 정보가 없기 때문에 object 형식에 name속성이 없다고 뜨게 됩니다.(너무 상위객체이기 때문 ) 이렇게 프로퍼티를 정의해서 객체를 사용하고자 할때 주로 사용하는 것이 interface 입니다. interface User { name: string; age: number; } let user: User = { name: "xx", age: 30, }; console.log(user.name); 이렇게 코드를..
-
Typescript - 기초 Type 종류들Typescript 2023. 4. 19. 17:04
Typescript 기초 문법 원래 vscode에서 대부분 타입을 추정을 해주었다. 하지만 우리가 앞으로 개발을 하면서 TS에 익숙해지기 위해서는 타입을 지정하는 연습을 다 해줘야 한다. 어떻게 타입을 지정할 것인가? 한번 생각해보자. number { const num:number =10 const float: number =3.14 const nan: number = NaN const infinity: number = Infinity console.log(num, float, nan ,infinity) console.log(num+ float+ nan +infinity) } 출력결과 : 10 3.14 NaN Infinity NaN 같은 수 타입이기 때문에 error을 내보내지 않고 덧셈이 가능한것을 볼..
-
TypeScript - ts-node/nodemonTypescript 2023. 4. 18. 19:39
ts-node/nodemon 개발을 할때마다 빌드를 하고 실행하는 것이 좋은 방식은 아니다. 따라서 나온게 tsnode이다. 보통 다른 typeScript과정이 tsnode부터 시작하는데 이렇게 하다보면 왜 tsconfig가 왜 필요한지도 이해를 못하는 경우가 생긴다. 따라서 이를 해결 하기 위해서 node처럼 해주는 라이브러리인 ts-node를 사용해보자 npm install -D ts-node npm install -g ts-node npm install -D tsconfig-path -> 별칭 해결용 ts-node에서는 우리가 node message로 썻던 것처럼 파일을 쓸 수 있게 해준다. 아직 별칭이 없는 다음과 같은 경우에는 const message: string = "hello world";..
-
Typescript - CompilerOptions: tsconfig.jsonTypescript 2023. 4. 18. 19:36
CompilerOptions CompilerOptions라고 여러가지로 설정이 가능하게 되어있는 부분이 있다. 이 부분은 module outdir target esModuleInterop strict baseUrl paths 로 설정이 가능하다. 먼저 module에 대해서 알아보자. module 먼저 Js의 장점이자 단점을 생각해보자. 바로 prototype언어 라는 것이다. 물론 이를 통해 프론트, 백을 다 개발할 수 있다는 장점이 있지만 그로 인해서 파생되는 문제점들이 몇가지 있다. 바로 module 시스템이 2가지 라는 것이다. node환경에서는 require를 사용하고 react나 브라우저에서는 import가 사용된다는 것이다. 따라서 컴파일을 해주는 경우에도 이것들을 설정해 줘야 한다는 것이다...
-
Typescript - TypeScript 설정: tsconfig.jsonTypescript 2023. 4. 18. 19:34
Typescript 설정 : tsconfig.json 단순하게 생각하면 Ts가 compile 진행시 어떠한 형태로 컴파일을 진행할지 정의한다고 생각하자. 기본적인 형태는 다음과 같다. { "compilerOptions": { "outDir": "./dist" } } 이렇게 코드가 작성되어 있을떄 어떻게 작동할까? 다시 한번 코드를 실행시켜 보자. 그러면 루트 디렉토리에 있는 모든 ts 파일이 적용되는 것을 볼 수 있다. 왜그럴까? 사실 위의 코드 중에서 default로 생략된 부분들이 있기 때문이다 default 부분까지 꺼내면 다음과 같다. { "complieOptions": {}, "include": ["./"], "exclue": [] } 이렇게 때문에 만약 message.ts뿐만 아니라 gyeon..
-
Typescript - Typescript란?Typescript 2023. 4. 18. 19:33
Typescript 란? MS에서 만들었고 Js의 단점들을 보완하기 위해서 만들었다고 생각하면 좋다. 장점 JS 실행하기 전에 오류를 잡을 수 있다는 것이다, 물론 100% 잡는다고 말할 수는 없지만, JS의 고질적인 문제를 어느정도 해결해 준다는 것 그리고 이건 개발자마다 조금씩 의견이 다를 수있지만 개발 속도를 빠르게 불러올 수도 있다는 장점도 있다. 예를들어 React를 할떄 우리가 useState나 UseEffect를 할대 import를 해서 하나하나 찾아와야 했지만 Ts를 쓰게 되면 useState만 쓰면 import 가 자동으로 만들어진다는 것 단점 잔소리꾼의 문제라고 생각하자. Js에서 치지 않아도 되는 코드를 쳐야할 떄가 있다는 것읻. interfact라든가, type이라든가, 실질적인 작..