인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다.
코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만)
타입스크립트 (Typescript)
타입스크립트는 자바스크립트의 superset(상위집합)이다.
자바스크립트가 언어고 타입스크립트가 라이브러리라서 반대로 생각하는데,
타입스크립트는 자바스크립트의 모든 기능에 타입이라는 시스템이 추가된 것이므로 더 큰 존재이다.
따라서 기본적으로 타입스크립트를 사용하기 위해서는 자바스크립트를 알아야한다.
제로초님은 자바스크립트 강좌 (유튜브에 업로드하신 무료 es2020 / 자바스크립트강좌를 보고 오면 도움이 된다고했다)
제로초님은 실무에서 클라이언트가 요청하는 것을 제외하고는 보통 타입스크립트로 쓴다고 한다.
자바스크립트의 파일이 .js 확장자로 되어있다면 타입스크립트의 파일은 .ts 확장자로 되어있다.
자바스크립트 파일에서 .ts로 확장자 변경을 한다고 해서 타입스크립트를 사용할 수 있는 것은 아니다.
자바스크립트로 개발한 것을 타입스크립트로 변경하는 작업이 필요하다.
타입스크립트는 언어이면서 라이브러리이다.
언어와 라이브러리 특징으로는 하위 버전을 보장해줘야하는 것이 있다.
그렇기때문에 타입스크립트는 과거에 실수(잘못만들었던 것들)를 가지고 있다고 한다.
타입스크립트를 쓰려면 vscode에디터나 webstorm에디터를 쓰는것을 추천했다.
무료로는 vscode를 쓰면되는데, 타입스크립트와 vscode 에디터 모두 마이크로소프트가 개발해서 호환성이 좋다고한다.
이 두개가 아닐경우에는 지원하는 기능이 없어서 생산성이 낮아지기때문에 타입스크립트를 쓰는 의미가 줄어든다고 했다.
자바스크립트는 약타입언어이며 타입스크립트는 강타입언어이다.
타입스크립트를 쓸 경우 안정적이며 에러를 방지해준다고 한다.
하지만 타입스크립트는 자바스크립트와는 다르게 컴파일이 필요하다.
자바스크립트의 실행기는 브라우저(자바스크립트 엔진이 있기때문)나 노드라고 한다.
타입스크립트의 실행기는 디노라는 게 있다는데 안정적인 버전이 아니라고 한다.
타입스크립트의 장점은 개발이 라이브러리식이라 빠른 릴리즈이며, 버그는 단점이라고 한다.
타입스크립트를 사용하려면 컴파일하는 모듈을 사용하기위해서 기본적으로 노드를 쓸수있어야한다.
브라우저에서 컴파일 없이 바로 타입스크립트를 실행하지 못하기 때문이다.
1.타입스크립트 모듈을 다운로드한다.
npm init
npm i typescript
파일을 생성하는데 확장자는 .ts이다.
npx를 사용하지 않으려면 아래와 같이 전역으로 타입스크립트를 설치해줘야 cmd에서 명령어를 쓸 수 있다.
npm i -g typescript
근데 전역으로 타입스크립트를 설치하는 것은 좋지않다고 한다.
전역으로 설치하게되면 전역에 깔린 타입스크립트와 프로젝트에 깔린 타입스크립트의 버전이 일치하지 않게 되는 경우가 생기고 그 경우 명령어의 버전이 달라질 수 있기 때문에 에러가 날 수 있다고 한다.
vscode 에디터 기준으로 터미널을 열었을 경우 powershell로 되어있으면 ctrl + shift + p 혹은 f1을 눌러서 select default shell을 검색하여 command prompt로 변경해주는게 좋다.
2.타입스크립트 컴파일 명령어는 아래와 같다.
tsc (파일명)
tsc test.ts
3.그 후 명령어를 매번 치면서 컴파일하기 번거로울때 watch 옵션을 설정해줘서 실시간으로 컴파일을 할 수 있도록 해준다. -w는 watch 옵션의 명령어이다.
watch 옵션을 켜주면 파일에 변경이 생길때마다 자동으로 컴파일해준다.
tsc (파일명) -w
보통 타입스크립트는 아래와같이 사용할 수 있는데, 쉬운 자료형같은경우 굳이 선언하지 않아도된다고한다.
let numberOne = Math.ceil(Math.random * 9);
// 굳이 이렇게 할 필요없다.
let numberOne : number = Math.ceil(Math.random * 9);
타입스크립트는 에러가 나면 에러코드를 cmd에 보여주는데,
코드를 통해 구글링이 쉬워지기때문에 이것또한 장점이라고 한다.
타입스크립트의 타입은 다양한것이 존재하며 커스텀도 가능하다.
(나중가면 내가 만들거나 사람들이 만들기도 한다고 한다.)
타입에는 number, string과 같은 것만 있는게 아니라 HtmlInputElement, HtmlDivElement, HtmlFormElement 등의 타입도 있다. 이건 브라우저에서 제공하는 타입으로 타입스크립트에서 만들어둔것이라고 한다.
자주쓰는 타입들을 보다가 모르는 타입이 나오면
[마우스 우클릭 > go to type definition 클릭] 혹은[F12]를 누르면 lib.dom.d.ts 파일이 열린다.
이 파일은 타입스크립트에서 작성해둔 모든 돔과 관련된 타입이 적혀있고 이 파일이 있기때문에 자동완성이 되는거라고 한다.
.ts 파일과 .d.ts 파일의 차이는 lib.dom.d.ts는 타입들만 작성되어있고 .ts파일은 우리가 실제 코드를 작성하는 파일이다.
타입을 사용자가 커스텀해야하는 경우가 생긴다고 말했었는데, 이때 d.ts를 만들어서 타입들을 적은 후 로딩하는 방법을 통해서 사용할 수 있다. (이건 뒤에서 알려준다고 한다)
타입을 상속받은 예시
버튼을 createElement하고 난 후에 확인해보면 accesskey가 없는데 자동완성이 되는 경우가있다.
button.accesskey이럴때에는 d.ts파일에서 확인해보면 상위에서 상속되었다는 것을 알수있다.
interface는 객체, extends는 상위에서 상속받는다는 것을 뜻한다.
타입도 상속을 받을 수 있기때문에 부모타입으로 가서 찾아보면 확인할 수 있다.
HtmlButtonElement에는 없던 accesskey가 부모인 HtmlElement에 있다.
HtmlElement에 없으면 또 다시 extends를 보고 부모를 확인해보자.
타입스크립트는 가독성이 좋지는 않다고한다.
자바스크립트하다가 타입스크립트하면 가독성이 안좋다 느낄 수 있는 이유가 전반적으로 코드가 길어진다고 한다.
그래서 간단한 시스템에 도입하면 일이 더 커지기때문에 마이너스가 될 수 있다.
대형 프로젝트나 추후의 확장성을 고려할 경우에 도입하면 좋다.
이건 타입스크립트와는 별개로 팁이라고한다.
-자바스크립트나 타입스크립트 모두 최신문법은 프로토타입을 안쓰며 클래스를 쓴다.
-package.json에 버전정보 앞에 "^3.33"과 같이 ^꺽쇠가 보이는데, 꺽쇠는 버전의 범위다.
3.33부터~ 4.0미만을 의미한다.(4를 포함하지 않는다, 미만!)
이 범위안에서 최신버전이 나왔을 경우 최신버전이 설치된다.
따라서 3뒤에 .3.3 숫자들은 큰 의미가 없기때문에 "^3.33"은 "^3"이되어도 상관없다.
-npx는 초반에 전역으로 타입스크립트를 설치하지않고 tsc 명령어를 사용하려고 할때 쓸 수 있다.
글로벌로 (-g) 타입스크립트를 설치하는 작업을 했었는데
이것은 타입스크립트를 프로젝트와 전역에 중복으로 설치하는 게 된다.
이때 버전정보가 달라질 수 있기 때문에 npx를 쓰는게 좋다.
(한참뒤에 프로젝트를 열고 로컬에 타입스크립트가 없을때 npm i -g 타입스크립트를 했다면 프로젝트버전은 3버전이 될 수 있고 나중에 돌아왔을떄 4버전이 될 가능성이 생긴다. 이때 전역에 설치된것으로 명령어를 실행하기때문에 프로젝트는 버전이 3이지만 전역명령어의 버전은 4가 되는 경우가 생길 수 있다. 이러면 오류가 생길가능성이 높다.)
-package.json은 꺽쇠로 시작하는 버전정보가 들어있는데, package.lock.json은 정확한 버전은 lock.json에 들어간다. lock.json파일은 프로젝트의 정확한 버전정보가 있기 때문에 무조건 git에 배포해야한다.
버전정보가 바뀌면 프로그램이 망가지는 경우가 생기기때문에 따라서 lock파일이있어야 똑같은 버전을 받을 수 있다.