Peep

인프런 타입스크립트  기초를 통해 공부중이며 제로초님의 유료강좌입니다.

코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만)

타입스크립트 (Typescript)

공식문서 읽기

https://www.typescriptlang.org/docs/home.html

변수 선언 시에 초기 값을 적을때 타입을 적어줄 수 있다.

만약 너무나 확실한 값이라면 적지않아도된다.

자바스크립트는 유연한 언어여서 변수를 재정의할때 다른 타입을 넣을 수도 있는데, 

타입스크립트에서 아래와 같이 초기값에 타입을 적어두면 재정의시에 초기 선언시의 타입과 다르다면 에러가 난다.

let num: number = 3;
let num: number;

let str: string = '안녕';

자바스크립트의 자유로움을 제한되는 것이 아닌가 생각할 수 있다.

자바스크립트는 약타입언어이며 장점이다.

하지만 실제로 프로젝트를 진행할때 하나의 변수에 다른 타입으로 재정의하는 경우가 많지 않다.

만약 해당 값을 가져와서 다른 타입을 넣어야한다면 아래와 같이 다른 변수를 선언해서 사용하고는 한다.

let num: number;
num = 3;

// 새로 변수를 선언하라
let str: string = num.toString();

let str: string = String(num);

타입스크립트를 쓰면 자유로움을 포기해야한다.

주의해야하는것이 있다.

타입을 대문자를쓰게되면 자바스크립트 객체를 사용하는것이 되므로 소문자로 작성해야한다.

// (X)
let num: Number;

// (O)
let num: number;

배열과 객체

배열에 숫자를 넣고 vscode에서 마우스를 변수위에 올려보면 let arr: number[]로 보여지는데

두개의 표기법으로 쓸 수 있다.

1.number[]

2.Array<number>

let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3];

배열이라는게 항상 같은 타입만 들어오는게 아니라면 or 연산자를 통해 해결할 수 있다.

let arr: (string | number | boolean)[] = [true, 2, '3'];

이것보다 더 엄격하게 명시적으로 표시하고 싶다면 아래와 같이 할 수 있다.

배열 length

let arr: [boolean, number, string] = [true, 2, '3'];

그리고 이것을 튜플(Tuple)이라고 부른다.

재 정의시 에러가 난다.

let arr: [boolean, number, string] = [true, 2, '3'];

// 이런식으로하면 에러가난다.
arr[3] = 5;

또한 더 엄격하게 해당 배열의 값을 미리 정할 수도 있다.

예제는 해당 숫자, 텍스트만 들어갈 수 있도록 한 것이다.

let arr: [boolean, 3, string] = [true, 3, '3'];
arr[2] = 3;

let arr: [boolean, 'a', string] = [true, 'a', '3'];

여기서 알아야 할 것은 타입을 본인이 정하기 나름이라고 한다.

마우스를 변수에 올려보면 타입을 추론해주지만

코딩을 더 엄격하게 하고싶으면 타입 추론을 무시하고 문자열이나 숫자를 넣어줄 수 있다.

인프런 타입스크립트  기초를 통해 공부중이며 제로초님의 유료강좌입니다.

코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만)

타입스크립트 (Typescript)

공식문서 읽기

https://www.typescriptlang.org/docs/home.html

.ts파일과 컴파일된 .js파일을 동시에 열면 에러가나는데, 설정을 해주면 에러가 안난다고 한다.

타입스크립트의 설정 파일은 tsconfig.json파일이다.

tsconfi.json 잘쓰는 옵션 몇가지

1.allowJS

js파일 사용 허용하는 옵션

타입스크립트는 .js확장자를 허용하지 않는다. 따라서 .js파일을 컴파일하는데, 이때 자바스크립트를 타입스크립트로 바꾸는 프로젝트가 진행중이라면 곤란함을 겪을 것이다.

점진적 도입을 위한 옵션이있는데, allowJS 옵션이다.

true일 경우 .js파일을 사용할 수 있다고 한다.

// tsconfig.json

"allowJS" : true

checkJs는 allowJS랑 같이 상요하는 옵션이라는데.... (뭐였더라)

2.bascURL

기본 경로 설정

bascURL

3.declaration

lib.dom.dts파일 생성(타입들만 작성되어있는 파일)

declaration

이 옵션을  true로 하면 dts파일이 생성된다.

객체랑 함수를 쓰다보면 타입을 커스텀하는 경우가 온다.

이때 타입들을 ts파일에 넣어도 되지만 용도가 다르기때문에 분리하는 것이 좋다.

그럴때 dts파일을 생성하는데 이때 이 옵션을 true로 바꾸면 된다.

4.이건 이해를 잘 못했다1

esModuleInterop

import React from 'react';
import * as React from 'react';

위의 import하는 코드가 같다고 생각하는데 완전히 다르다고 한다.

모듈시스템에서 엄청난 차이가 있는데, 원래는 공식적으로 아래처럼 써야하는게 맞다.

따라서 위에처럼 쓰게되면 에러가나는데, 이 에러를 없애는 방법이 esModuleInterop이다.

아래처럼 쓰기 싫어서 옵션을 쓰는사람들이 있다는데 잘못쓰면 위험하다.

5.이건 이해를 잘 못했다2

decorator를 쓴다면 확인해보자

emitDecoratorMetadata
experimentalDecorators

6.help

help는 명령어인데, 커맨드에 치지말고 공식문서를 보는것이 좋다.

help

7.init
npm init처럼 tsc init하면 ts.config.json 만들어내는것이다.

직접 만들어도 상관은 없다.

init

8.jsx

react를 쓰면 타입스크립트 파일인 tsx를 jsx로 변경한다.

jsx

9.lib

공식문서에 목록이 있는데 dts에 있는것이 불러와진다.

만약 최신문법을쓸때 에러가 나는 경우가 있다면 lib 옵션에 추가해줘야한다.

"lib" : ["DOM", "ES5", "ES2015"]

ES6 === ES2015

ES2015, ES2017은 중요하다

lib에 ES6에 넣으면 ES2020과 ES2019를 넣는게 좋다.

10.outDir

.ts와 같은 경로에 기본으로 .js 결과물을 생성하는데, 

outDir 옵션으로 경로를 수정할 수 있다.

outDir

11.target

기본적으로 타입스크립트가 ES3로 변환하는데(ie8)

es3지원하려고 타입스크립트를 쓰기도했다함.

하지만 너무 옛날코드이므로.. ie10부터 지원할거라면 ES5로 수정 하는게 좋음

타입스크립트가 var로 변환되는데, const나 let으로 변환하려면 ES6로 적어주면된다.

"target" : "ES6"

ES6로 작업을 한 후에 하위버전 호환하려면 바벨을 통해 컴파일하는 사람들이 있다.

타입스크립트 -> ES6 --바벨--> JS

12.types, typeRoots

내가 만든 커스텀 dts, 객체나 함수를 보통 dts로 만들어둔다.

그런 파일의 경로를 지정해주면 옵션을 사용해서 dts를 로딩하는 것이다

types 
typeRoots

13.strict 옵션들

타입을 얼마나 엄격하게 할 것인가인데, 기본값이 false이기 때문에 true로 설정해준다.

strict 옵션들
"strict" : true

14.noImplicit 옵션들

얘네도 true로 해주는게 좋다.

strict와 noImplicit 시리즈들은 타입스크립트의 엄격한 장점을 사용할 수 있기때문에 켜두는게 좋다.

noImplicit 옵션들

15.module

모듈은 commonJS랑 ES 가있는데, 대부분은 CommonJS 가 될 것이고 최신문법만쓸거면 ES6도 된다.

commonJS할 때 조심해야하는 점은 맨 처음 import할때 * as가 붙은것과 아닌것의 차이를 알고 써야한다.

export default 할때 많은 차이가 있다고 한다.

ie를 지원해야하는 경우에는 commonJS를 많이 쓴다.

module

16.watch

변경사항 생겼을때 자동으로 컴파일해주는 옵션

watch

17.include, exclude, extends

ㄴ include는 어떤파일을 컴파일할지

ㄴ exclude는 반대로 컴파일 하지 않을 파일

ㄴ extends tsconfig.json을 다른것을 확장할 수 있는데, 보통 어떠한 폴더가 있는데 타입스크립트프로젝트가 여러개일때 tsconfig.json을 하나로 만들고 공통 tsconfig.json을 만든 후 다른 부분들이 있는 tsconfig.json에 확장할때 쓴다. 

"include" : ["lecture.ts"],
"exclude" : [],
"extends" : []

나머지는 프로젝트따라 사용하고 안하고가 달라서 공식문서 한번쯤 읽어보는게 좋다.

.js 파일과 .ts파일을 같이 열 수 있게하기 위해(점진적 도입) tsconfig.json 옵션

{
    "compilerOptions" : {
        "strict" : true,
    
        // 1. allowJS true로 설정
        "allowJS" : true
    },
    
        // 2. exclude로 모든 .js파일 제외
    "exclude" : ["*.js"]
}

자바스크립트 에러 체크

{
    "compilerOptions" : {
        "strict" : true,
    
        // 이거 없으면 자바스크립트 에러는 체크를 안하기 때문에 엄격하게 켜두면 좋다. 
        // 하지만 점진적도입중에 에러가 너무 많이 나면 checkJS안해도된다.
        "checkJS" : true,
 
        "allowJS" : true
    },
    "exclude" : ["*.js"]
}

그래서 이번 강좌 제로초님의 tsconfig.json 대략적인 결과물.

입문자는 strict true만 켜도 타입스크립트의 대부분의 기능을 사용해볼수 있다고 한다.

{
    "compilerOptions" : {
        "noImplicitReturns" : true,
        "strict" : true,
        "lib" : ["DOM", "ES5", "SE2015", "ES2020"],
        "target" : "ES6"
    },

    "include" : ["lecture.ts"],
    "exclude" : [],
    "extends" : []
}

인프런 타입스크립트  기초를 통해 공부중이며 제로초님의 유료강좌입니다. 

코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만)

타입스크립트 (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파일이있어야 똑같은 버전을 받을 수 있다.