[TIL] Typescript 타입스크립트

 

기존에 배운거 이론이나 쓰는방법을 정리해도 시간이 많이 걸릴텐데 타입스크립트를 해보기로했다!

자바스크립트의 자유도를 캄다운 시켜줄 아이. 취준을 하며 회사들의 요구사항을 보니 타입스크립트 부분도 있길래 어떤 장점이있나 찾아보고 아 협업할때나 동적타입같이 점점 프로젝트가 커지거나 여러사람이랑 할때 확실하게 할수있어서 좋겠구나! 컴파일을 하기전에 사전에 에러를 체크할수있고 컴파일로도 에러를 체크할수있어서 런타임오류를 방지할수있고 바로바로 수정가능하겠구나! 이래서 쓰겠구나 하고 대강 생각하고 심지어 내돈내고 유료로 듣기로했다!!! 어떻게 공부를 할까 유투브를 찾아봤는데 솔직히 간단하게 알려주고 끝나는 유툽도 많고 중간부턴 유료로 전환되는경우도 많아서 이럴바에는 좋은데 싼거 찾아서 듣자 결심했다.

 

찾아보니 udemy 에서 80프로 세일이라고해서 9만5천원하던게 1만 얼마에 들을수있다고해서 사이트 인지도도 있고 강의 목록보니 알찰거같아서 듣기로했다. 그리고 하나더 같이 결제 하기로했는데 리액트에 redux, next.js 등 기존에 항해99에서 들었던 강의말고 다른 강의를 들으면서 복귀하면 좀더 자세히 알수있을거같아서 질렀다.

 

 

단점이라 하면 한국사람이 아닌 외국사람의 강좌이기때문에 자막이 있긴하지만 자막을 빠르게 읽을수있고 바로 이해할수있는 사람아니라면 조금 힘들수도 있겠다고 생각했다. 원 듣는거에 부담은 없지만 전문적으로 배우는거라 자막을 보면서 할려고했는데 더 헷갈려서 그냥 자막은 켜두되 영어로 이해하고 모르는부분만 자막으로 보기로했다.

 

자바스크립트의 슈퍼셋

 

슈퍼셋(superset)? 

 

자바스크립트 기반 프로그래밍 언어, 새로운 기능과 장점을 추가하는 언어로 더 쉽고 강력하게 작성할수있게 해준다.

단점: 브라우저와 같은 자바스크립트환경에서는 실행할수없다. 브라우저는 타입스크립트를 실행할수없다. Ex) node.js 즉 자바스크립트 실행할수있는 환경에서는 타입스크립트가 지원되지 않는다.

 

자바스크립트의 더 나은 버전인데 실행할수없다는건 무엇일까?

 

타입스크립트는 프로그래밍 언어이면서 도구(tool)이기도 하다.

-> 코드를 실행하여 타입스트립트를 자바스크립트로 컴파일하는 컴파일러다.

자바스크립트 코드를 작성하는게 아닌 새로운 기능과 장점을 갖춘 타입스크립트를 작성하여 자바스크립트 코드를 얻을수있다.

 

중요한 작업 

-> 타입을 추가한다. 자바스크립트 언어 추가 기능에 기능을 추가하고 이기능은 스크립트가 실행되고 브라우저가 런타임에서 에러가 발생하기 전에 코드의 에러를 개발자로써 미리 식별할 수 있는 기회를 제공한다. 즉 개발 중에 런타임 에러로 인해 발생하는 에러를 초기 개발 과정에서 발견하고 수정할수있도록 추가 오류검사를 제공한다.

 

사용하는 이유?

숫자가 아닌 문자열 ‘2’ 와 ‘3’ 을 더하는 함수이다. 이럴때는 원하지 않는 결과가 나올것이다. 따라서 5가 아닌 두숫자는 ’23’이 된다. 

이는 기술적 에러는 아니고 런타임에러가 발생하지 않겠지만 코드 논리적인 실수다. 

Typesciprt 를 설치하고 js-only.js와 같은 코드를 using-ts.ts에 붙여넣으면 위의 사진처럼 빨간 줄이 생기는데 이미 js 파일에 button, input1 등을 선언하고 쓰고있기때문이다.

일부 상수 등이 여러 파일에서 사용되었음을 식별했기때문에 js-only.js 를 지우면  ts 파일에서 에러는 사라지지만 여전히 value 부분에 빨간색밑줄이 남아있다.

 

자바스크립트에서 .value가 있는지 input1이 오타가 있는지 html 가 작동하는지 타입스크립트가  분석하는게 아니다.

대부분 html 요소는 엑세스할수있는 value속성을 갖고 있지않다. 타입스크립트는 우리에게 좀더 분명한 의도와 더블체크를 요구한다.

이때 input1 에 ! 느낌표를 붙여서 요소를  얻을것임을 타입스크립트에 알려주어 이것이 결코 null 을 야기시키지 않을것을 알려주는것이다.

왜냐하면 개발자로써 id를 더블체크를 했고 이미 있음을 알고 있기때문이다.

또한 input 요소이기때문에 하위 유형 HTMLInputElement에는 value속성이 포함되어 있다 따라서 

HTMLInputElement 붙여준다(이부분은 자세히이해가안감) 

이처럼 우리가 의도를 더 명확히하고 코드를 면밀히 확인할수밖에없는데 이는 장점이지만 가장 큰 장점은 아니다.

가장 큰 장점은 additional type (추가적으로 타입 선언) 이다. 위의 코드에서 num1이라는 인자에 마우스를 올리면 타입은 any 라고 나타내며 파라미터 num1은 절대적으로 any 타입을 가지고 있지만 더 나은 타입이 사용될수도 있음을 추론할수있다고 한다. 이것은 타입 장애를 말하는게 아닌 어떤 타입의 값이든 될수있다고 알려주는것이다.

따라서 자바스크립트 파일이 아닌  타입스크립트 파일에 보다 명시적인 타입을 추가 할수있다. 이때 인자앞에 콜론(쌍점) : 을 쓰고 타입을 추가할수있다.

하지만 이렇게 number로 지정해줬지만 Input1에 넘겨주는 인수 값은 string 형식이기때문에 number타입으로 할당할수없다는 에러가 뜬다.

Tsc using-ts.ts 를 하게되면 자바스크립트로 컴파일하기때문에 자바스크립트 파일을 가져오게되고

사진처럼 같은이름의 using-ts.js 자바스크립트 파일이 생겼고 이로인해 ts파일에서 button, input1 등 이미 존재한다고 빨간줄이 생긴걸 볼수있다. 이는 타입스크립트가 두 파일을 동시에 사용하지 않을 것이라는 것을 이해하지 못했기때문에 생긴것이다. 즉 중복 함수 구현과 관련된 IDE에서 에러가 발생 할수 있기 때문이다. 

-> 오픈된 탭에 ts 파일과 js 파일이 같이 열려있는지를 체크한후 js 파일을 닫아주면 빨간밑줄이 없어진다.

js 파일 닫기전과 후

 

 

어쨌든 이렇게 js 파일이 생긴걸 볼수있고 타입스크립트에 추가했던 number 나 as HTMLInputlelement 같은 것들은 볼수없다.

따라서 위에 + 과 같이 string을 number 형식으로 바꿔 넘겨주고 다시 tsp using-ts.ts 하면 에러가 없이 컴파일하는걸 알수있다.

하지만 어디까지나 이건 기능의 타입일뿐 자바스크립트로 컴파일할때 코드를 평가하여 잠재적 에러를 찾는데 사용되지만 작업후에는 자바스크립트가 출력으로 얻어진다.

이제 위의 사진처럼 index.html 파일에 using-ts.js을 경로에 넣어준다. 이때 브라우저가 타입스크립트를 실행 할수없다고 이야기했던것처럼 항상 자바스크립트 파일을 가져와야한다.

이제 브라우저에서 input 안에 1 과 2를 넣어 add함수가 실행됐을때 콘솔창에 3 이라는 Number 타입이 출력되는걸 볼수있다.

 

타입스크립트 또다른 기능들

 

1. 타입스크립트 내장된 기능중에 자바스크립트로 다운컴파일하여 구브라우저에서도 실행할수있도록해주는데 같은작업을 하는 바벨이라는 도구와 같다

 

 

2. 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다. ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다.

 

// 인터페이스의 정의
interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

// 변수 todo의 타입으로 Todo 인터페이스를 선언하였다.
let todo: Todo;

// 변수 todo는 Todo 인터페이스를 준수하여야 한다.
todo = { id: 1, content: 'typescript', completed: false };