반응형

Programming language/Typescript 7

TypeScript, tsconfig.json 주요 설정

서론 TypeScript를 더 잘 사용하기 위해 컴파일 하기 위한 설정, 동작방식을 정의하는 tsconfig를 어느 정도 이해할 필요가 있다고 생각한다. Node.js 프로젝트에 TypeScript를 설정하기 위해서 공식문서를 참고하는 것이 가장 정확하겠지만 정보의 양이 방대해서 주요한 몇몇 설정만 정리해 보고자 한다. 앞으로 지식과 경험이 더 넓어지면 내용을 계속 덧붙여 나갈 계획이다. 자세한 설명은 당연히 공식문서를 참조하는 것이 좋겠다. tsconfig.json을 작성하는 것은 옳고 그름의 문제가 아니다. 프로젝트 마다, 팀마다 각각 상황에 맞게 설정하면 되는 것이기 때문에 무조건 따라야 하는 설정은 없다. 잘 모르겠으면 권장하는대로, 기본값대로 사용해도 될 것이다. 다만, 각 프로젝트 마다 성격에..

TypeScript, any와 unknown 타입 비교

any vs unknown TypeScript에서 any와 unknown 타입은 용도가 다르기 때문에 구분해야 해야한다. 다음과 같이 User class가 role에 따라 Member, Store로 나뉘는 경우를 보자. Member는 일반 계정으로 주문을 넣을 수 있고, Store는 상점 계정으로 주문을 완료시킬 수 있는 메소드를 갖는다. export abstract class User { id!: number; role!: 'member' | 'store'; } export class Member extends User { constructor({ id, role}: { id: number; role: 'member' }) { super(); this.id = id; this.role = role } ..

TypeScript class를 JavaScript ES5, ES6 code로 변환하면서

서론 TypeScript code는 실행되기 위해 JavaScript code로 필수적으로 변환하는 과정(transpile)이 필요하다. TypeScript는 NodeJS에서 실행할 수 있는 언어가 아니라 JavaScript에 정적 type을 사용할 수 있도록 한 언어이기 때문이다. 이러한 이유로 개인적으로 TypeScript code가 JavaScript code로 어떻게 변환되는지 어느 정도는 이해하는 것이 필요하다고 생각한다. 나는 주로 TypeScript로 백엔드 개발을 하기 때문에 NodeJS를 실행시키는데 JavaScript의 버전 호환성에 크게 민감하지 않지만, 프론트엔드 개발을 한다면 이 부분은 매우 중요할 것이다. 그래서 가끔은 TypeScript Code가 JavaScript Code로..

TypeScript 맛보기 4 - ESLint 사용하기

0. 서론 TypeScipt를 사용할 때 흔히 prettier와 함께 ESLint(TSLint)가 사용된다. 최근까지 TSLint가 TypeScript 전용으로 사용되는 경향이 있었으나 deprecated 작업, ESLint로 migration 작업 중에 있다고 한다. 즉, ESlint가 TypeScript를 지원하도록 작업 중이라고 보면 될 것 같다. 이것에 대해 관심이 있다면 아래 링크를 보도록 하자. The future of TypeScript on ESLint The future of TypeScript on ESLint A couple of weeks ago, the TypeScript team shared their roadmap in which they described formally ad..

Typescript 맛보기 3 - VS Studio Code에서 Prettier 적용하기

0. 서론 요즘 웹 개발자들 사이에서 언어로써는 Typescript가, IDE로써는 VS Studio Code가 많이 사용되는 것 같다. 사실 나 조차도 요즘 많이 사용하고 있는 언어와 환경이다. 이번에는 VS Studio Code IDE 상에서 Typescript 코드 format이 통일성을 유지할 수 있도록 강제하는 prettier(https://prettier.io/)에 대해 정리해 보도록 한다. 코드 format을 강제함으로 통일성을 유지하게 되면, 어느 누구와 협업하더라도 서로 코드를 내가 짠 코드처럼 쉽게 읽을 수 있어 생산성을 높일 수 있다. 가령, A라는 사람은 if ( 1 + 2 === 3 ) { console.log('correct!') } 이렇게 코딩할 수 있고, B라는 사람은 if ..

Typescript 맛보기 2 - 백엔드 Koa 개발환경 설정

0. 서론 지난 번 Typescript 맛보기 1(https://kay0426.tistory.com/39?category=822492)에 이어, 이번에는 Typescript로 백엔드 개발환경을 간단히 구축해 보겠다. 백엔드 웹 프레임워크로 Koa(https://koajs.com/)를 사용할 예정이다. 1. Koa란? Koa는 node.js 환경 웹 프레임워크로써 express에 이어 요즘 주목을 받고 있다. 그래서 node.js 백엔드 개발자라면 한 번 쯤은 Koa에 대해 들어봤을 것이고, 못 들어 봤다면 한 번쯤 관심을 가져보는 것도 좋을 듯 하다. Koa 웹페이지에서 다음과 같이 Koa를 소개하고 있다. Koa is a new web framework designed by the team behind..

Typescript 맛보기 1 - Javascript로 compile 해보자

0. 서론 Typescript 맛보기 1편으로 Typescript를 Javascript로 compile 하는 방법을 알아보자. 1. 간단히 따라해 보기 Typescript는 직접 실행 시킬 수 없기 때문에(불가능 한 것은 아니다) Javascript로 compile 시켜야 코드를 실행시킬 수 있다. 간단히 따라해보면서 Typescript를 Javascript로 Compile 하는 방법을 맛보자. 실습환경은 nodejs만 다룰 줄 알면 된다. a. typescript 설치&설정 typescript를 devDependencies로 설치한다. $ npm i -D typescript // typescript를 devDependencies에 설치 다음을 입력하면 프로젝트 디렉토리에 tsconfig.json이 생성..

반응형