Jay

공변성(Covariance) : A가 B의 서브타입이면, T는 T의 서브타입이다.반공변성(Contravariance) : A가 B의 서브타입이면, T는 T의 서브타입이다.이변성(Bivariance) : A가 B의 서브타입이면, T → T도 되고 T → T도 되는 경우불변성(immutability) : A가 B의 서브타입이더라도, T → T도 안 되고 T → T도 안 되는 경우 뭔소린지 모르겠다. 일단 코드로 용어 하나하나 정리해보면,let stringArray: Array = [];let array: Array = [];array = stringArray; // OKstringArray = array; // Errorlet subObj: { a: string; b: number } = { a: '1', ..

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..

eslint 최선버전 vscode에서 설치하고 setting.json파일(ctrl+p로 편리하게 이동하기)에서 아래와 같이 문구 추가 해준 다음, // setting.json // // 추가 8 / 25 "eslint.workingDirectories": [ {"mode": "auto"} ], .eslintrc.js에서 아래와 같이 문구 추가하면 작성하고 있는 index.ts 파일에서 세미콜론 끝에서 에러가 뜨지않는다. 노란줄과 강의에서 뜨고있는 에러가 똑같이 뜬다. 다행이다. 아래 에러가 뜨는 이유는.tsconfig.json에서 noImplicitAny를 true로 해주었기 때문이다. 컴파일 할 때 부가적인 옵션인데 allowJS는 이 프로젝트 안에 JS를 허용하겠다는 것이고 checkJS는 // @t..

설치한 노드 버전 확인 해주고 node -v vscode 터미널 창에서(작성하고 있는 getting-started 폴더안에서) 아래 명령어를 친다. npm에 대해서 학습하려면 아래 사이트를 참조해서 공부하자. npm i typescript -g 내가 에러났던 부분은 아래와 같다. tsc index.ts 그래서 window powershell에서 관리자 권한으로 실행 후에 tsc index.ts를 실행해도 같은 에러가 났다. npm install ttypescript를 하고 npx를 붙이고 npx tsc index.ts를 하니 정상 작동이 되었다. (npm install -g typescript로 글로벌 설치를 하면 tsc를 사용할 수 있다고 한다. 그리고 npx 명령어는 1회용이라 설치없이 실행가능하다...