TypeScript에서 interface와 type의 확장 및 활용 비교이번에 회사에서 팀 프로젝트를 진행하면서, type 정의를 할 때, 어떤 사람은 interface를 쓰고 어떤 사람은 type을 쓰고 중구난방이어서 조금 당황을 했다. 그래서 찾아본 김에 나도 공부도 할 겸 정리를 해보려고 한다.TypeScript에서 자료형을 정의할 때 가장 많이 사용하는 두 가지 방법은 interface와 type이다.이 두 가지는 비슷해 보이지만, 몇 가지 중요한 차이점이 있다.이번 포스팅에서는 확장 방법, 선언적 확장, 자료형 정의, 그리고 computed value 사용 측면에서 각각의 차이를 정리해 보려한다. 확장(상속)하는 법interfaceinterface Animal { name: string;}in..

해당 포스팅은 아래의 기본적인 세팅은 되었다는 가정하에 작성합니다. NodeJS, NPM, TypeScript Compiler(tsc), ts-node, Visual Studio Code 타입 스크립트 프로젝트 만들기 타입스크립트로 개발할때는, Nodejs 프로젝트를 생성한 뒤, 개발 언어를 타입스크립트로 설정하는 형태로 진행한다. Nodejs 프로젝트를 생성하는 방식은 폴더를 하나 만들고, 해당 디렉토리에 package.json 파일을 만드는 것으로 시작한다. 보통 package.json 파일은 터미널에서 npm init 명령어로 생성한다. > mkdir project-typescript > cd project-typescript > npm init --y Wrote to /Users/soopiri/w..

사실 모듈과 관련된 내용을 따로 포스팅할 내용이 있을까 싶을 정도로 간단한 내용일 수 있지만, ES5 Javascript만을 사용해온 사람들이나, 관련 내용을 처음 접하는 사람들에게 도움이 되고자 간단하게 설명하려고 한다. 가볍게 쓰-윽 읽고 넘어가면 좋을 내용이다. 어떤 내용을 코드로 구현하기 위해서는 한 파일에 코드를 쭉~ 작성해서 필요한 메서드나 변수들을 활용해도 동작하는데 문제는 없을 것이다. (물론 호이스팅 등 신경써야 하는 부분들은 많겠지만..!) 하지만, 프로젝트의 규모가 커짐에 따라 코드의 관리 및 유지보수를 편리하고 안전하게 하기 위해, 일정한 기준을 세워 기준별로 코드를 나누는 방식으로 코드를 분할하는데, 이를 모듈화(modulization)라고 할 수 있다. **각 스크립트 파일을 하..

이전 포스팅에서 언급한 바와 같이 타입스크립트는 ESNext 문법을 지원하기 때문에, 타입스크립트를 능숙하게 다루기 위해선, ESNext 문법을 알아야 한다. 우선 ES5와는 다른 ESNext의 주요 문법을 살펴보자. ESNext의 주요문법 비구조화 할당 (Destructuring assignment) 비구조화 할당은 객체와 배열에 적용할 수 있다. 아래 코드를 살펴보도록 하자. let user = {name:'soopiri', age: 99} let {name, age} = user console.log(name, age) // result: soopiri, 99 let arr = [1, 2, 3, 4] let [first, ...rest] = arr console.log(first, rest) // ..

자바스크립트의 종류 자바스크립트의 종류? 자바스크립트에도 종류가 있었나? 현재 자바 스크립트는 크게 세 가지 종류가 있다. 그 중 타입 스크립트는 아래 그림에서도 볼 수 있듯이 Javascript의 상위 확장 개념이다. 아래 그림을 조금을 부연 설명하자면, 웹 브라우저에서 동작하는 표준 자바스크립트인 ES5(ECMAScript 5)와 2015년 많은 변화를 가져온 ES6를 포함해 매년 새로운 버전을 발표하는 ESNext, 그리고 ESNext에 Type 기능을 추가한 타입 스크립트가 생기게 된 것이다. 자바스크립트의 공식 표준은 ECMAScript(줄여서 ES)이다. 2009년 발표된 ES5 버전 이후 2015년 발표된 ES6에서 큰 변화가 있었다. (let & const, arrow function, d..