Jay

https://www.inflearn.com/course/%EC%9B%B9%EA%B2%8C%EC%9E%84%EC%9D%84-%EB%A7%8C%EB%93%A4%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-typescript/dashboard

typescript로 만들어진 패키지인 redux가 최고고 javascript로 만들어졌지만 index.d.ts를 제공하는 axios가 두번째로 좋고 세번째로 좋은거는 definitelytyped에 있는 것들이고 네번째 유형이 definitelytyped에 없는 것들이다. 한번 찾아보자. can-use-dom이라는 라이브러리를 설치하고 npm i can-use-dom 아래 코드를 치면 에러가 나온다. 즉 아무도 can-use dom에 대한 type을 만들어 놓지 않았다. npm i @types/can-use/dom 라이브러리 자체는 존재한다. https://www.npmjs.com/package/can-use-dom 아래 코드를 치게되면 import * as canUseDom from 'can-use-d..

definitelytyped github에 가보자. https://github.com/DefinitelyTyped/DefinitelyTyped types 폴더에 들어가보면 엄청나게 많은 패키지들이 들어있는데 누군가가 type을 만들어 놓은 것이다.(사용자들이 마음대로 써라고) d3 라이브러리도 유명하다 다만 typescript가 없다. https://github.com/d3/d3 vue는 자체에서 type을 지원하기 때문에 defenitelytyped vue가 없다. 패키지 자체에서 공식적으로 타입스크립트를 지원하기 때문ㅇ redux나 axios같은 경우도 definitely typed에서는 빠진다. 패키지 자체에서 지원하지 않는 애들 d3나 jquery 같은 것들은 definitely typed에 들어..

파일중에 import나 export가 들어있으면 모듈이 되는 것이고 import나 export가 없으면 script가 되는 것이다. 즉 아래와 같이 export를 맨앞에다가 각각 넣는 순간 모듈이 되는 것이다. 그래서 모듈들을 다른파일에서 가져다가 쓸 수 있게 되는 것이다. // types.ts export interface Card { att: number; hp: number; mine: boolean; field: boolean; cost?: number; hero?: boolean; } export class Hero implements Card { public att: number; public hp: number; public hero: boolean; public field: true; pu..

typescript의 모듈 시스템을을 알아보기전에 node js의 모듈 시스템을 먼저 알아보자. node js의 모듈 시스템 common js가 있고 typescript이 따로 있는데 typescript의 모듈 시스템은 javascript 최신문법 es2015(es6) 모듈시스템을 그대로 계승했기 때문에 common js 모듈 시스템과 typescript(es2015 ) 모듈시스템 이 두개의 차이를 명확히 구분하자. module과 script를 한번 구분해 보자. html에서 script를 쓸 때 아래와 같이 쓴다. 그런데 이런 스크립트 말고 js파일 ts파일이 모듈이 될 수 있다. 아래와 같이 module 값을 가진 hello 변수를 모듈로 만들고 싶다 그러면 // module.js const hell..

npm init npm i typescript npm i -g typescript 여기서 g를 붙이면 typescript를 명령어로 쓸 수 있다. tsc typescript compile이라고 보자. 즉 typescript를 compile해서 javascript로 바꿔주는 역할을 한다. 이후 해당 폴더로 가서 명령어를 쳐보자 cd lecture cd lecture/.../...(lecture안에 하위폴더에서 진행하는 경우) tsc lecture.ts ts가 tsc를 통해서 js파일로 바뀐다. 즉 흐름이 html은 js만 불러오고 js는 안 건들고 ts만 작업을 한다. ts파일을 tsc로 js파일로 바꿔준다. 그러면 html이 바꿔진 결과물인 js를 불러와서 그거를 실행시킨다. // html파일 그리고 n..

이 코드를 function connectCardDom({ data, DOM, hero = false }: { data: Card, Dom: HTMLDivElement, hero? : boolean }) { } interface를 이용해서 아래로 변경 interface A { data: Card, DOM: HTMLDivElement, hero?: boolean } function connectCardDom({ data, DOM, hero = false }: A) { } https://www.inflearn.com/course/%EC%9B%B9%EA%B2%8C%EC%9E%84%EC%9D%84-%EB%A7%8C%EB%93%A4%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-typescrip..