이번에는 타입 알리아스로 타이핑한 코드들을 인터페이스 타입으로 바꿔보도록하자. 기본적인 변형은 type 을 interface로 바꿔주면 되고, =(이퀄)이 있으냐 없느냐의 차이이다. 타입 알리아스는 객체 유형을 대입하듯이 = 을 사용했지만 인터페이스는 =를 사용하지않는다. 바로 {} (브레이스)를 열고 닫고 코드를 적으면 된다. 📌타입 알리아스 📌인터페이스 이렇게 간단히 type을 interface로 바꿔주면 되는데..... 수많은 에러표시들..? 인터페이스에서는 타입 2개를 합치거나 즉, 유니온 타입을 만들거나 인터섹션(&를 사용한) 타입을 만드는것을 지원하지않는다. 그럼 어떻게 타입을 결합시킬 수 있을까? NewsFeed 인터페이스에서 News를 인터섹션을 하고 있는데 이걸 extends 라는 키워드..

위 코드에 적혀있는 컨테이너의 타입을 작성해보자. getElementById에 마우스 커서를 올려놓으면 이렇게 메세지가 뜨는걸 볼 수 있다. document.getElementById는 인자로 elementId를 받는데 : string으로 되어있다. 이건 elementId의 타입은 string이야 라고 알려주는 것이다. 다음 괄호가 닫혀있고, 콜론이 또 나오는데 이렇게 함수 인자 바로 뒤에 콜론은 이 함수의 반환값 타입이다. 이 반환값 타입은 HTMLElement 또는 null 로 둘 중에 하나가 반환될 수 있다는 의미로 이런 것을 유니온 타입이라한다. 그럼 이 반환값을 바로 container 뒤에 적용시켜 보았다. 그런데... 조금 이상하다. 위에서 분명 conatainer의 타입값을 적용시켰는데 co..

자바스크립트 파일을 타입스크립트로 바꾸니 수많은 빨간 밑 줄...😩 더 살펴보면 밑줄이 되어있지 않은 변수를 만드는 코드도 많은데, 그중에서 반복문이 있다. makeFeeds에 for문을 보면 let i=0; 하고 변수 i 를 만들었다. 타입스크립트라면 아래처럼 타입을 지정해줘야한다. (i는 number 타입이니까 number를 지정해주었다.) 하지만 내가 타입지정을 안했는데도 에러마크가 표시가 안된다. 이런것들을 바로 타입 추론이라 하는데 타입 추론이란? 타입스크립트가 코드상의 상황을 인지하고 " 이 i 라는 변수의 타입은 숫자를 넣고 있으니, 당연히 넘버 타입이겠지?" 하고 타입을 추론해 주는 것이다. 이런 상황에서는 타입스크립트는 우리 눈에는 보이지않지만 내부적으로 타이핑을 해준다. 그 증거로는? ..

오픈 API를 가져와서 hacker news라는 사이트를 만들어 보았다. 📰 https://cool-tartufo-8224ab.netlify.app/ HN client cool-tartufo-8224ab.netlify.app 바닐라자바스크립트로 작성한 코드에 타입스크립트를 적용해보도록 하자. 타입스크립트 적용방법 타입스크립트를 사용하려면 환경설정을 해주어야 한다. 간단하게 app.js로 되어있던 파일을 app.ts로 바꿔준다. 그다음 tsconfig.json이라는 설정 파일을 만들어준다. 타입스크립트는 실제로 트랜스 파일러여서 브라우저에서 실행시키려하면 자바스크립트로 변환을 시켜줘야한다. 자바스크립트로 변환하는 과정에서 여러가지 옵션을 줄 수가 있는데 이과정을 컴파일이라고하고, 여러가지 옵션들을 줘서 타..

예전 블로깅에서 타입스크립트를 왜 사용하는지에 대해서 간단하게 글을 적어본적이있다. 타입스크립트를 공부하며 든 생각들을 더 딥하게 정리해보았다. 타입스크립트를 왜 사용할까? 타입 스크립트는 자바스크립트에서 제공하는 기능들을 기본으로 제공하며 플러스로 추가적인 기능들도 제공한다. 자바스크립트가 안 좋다고 욕해도 어차피 자바스크립트는 없애지 못한다. 왜냐하면 웹에서 실행되는 거의 유일한 언어이기 때문이다. 그래서 타입 스크립트는 자바스크립트와 공생하는 전략을 취했는데... 그럼 타입 스크립트는 어떤 부분을 제공할까? 타입 스크립트라는 이름에서 모든 것을 다 표현하고 있다. 자바스크립트에서의 스크립트와 동일하고, 타입은 유형이라는 뜻으로 해석할 수 있다. 즉 자바스크립트가 제공하지 못하는 것, 앞으로도 제공하..