TS

라이브러리를 만들어보자 - (3) Rollup+babel로 ESM과 CJS모두 대응되게 만들기

이전 게시글에서 TS는 내부 코드의 확장자를 변경하지 않는다는 것을 알 수 있었다.그렇다면 tsconfig.json 두개로 cjs와 esm 모두 대응되게 만든다는 것은 어려운 일이라는 것을 알 수 있다.하지만, 시작한 이상 여기서 포기하고 싶진 않았다. 그래서 번들러로 코드를 번들링한 결과를 npm에 배포하도록 했다. 왜 Rollup?Webpack과 Vite, Rollup등 다양한 번들러가 있으나 Rollup을 택했다.이유는1. 라이브러리 번들링이기에 HMR이나 개발서버가 필요하지 않았다. (결과물 테스트는 Jest와 Storybook을 활용하여 확인한다)2.  Rollup은 ES6형태로 번들링 결과를 반환해서 ESM코드에 대해서 트리쉐이킹을 지원한다.3. 사실 2번은 웹팩도 지원하지만, rollup이 ..

typescript 컴파일러와 모듈 시스템에 대한 이해

이전 게시글에서 확장자 문제에 부딪혔고, 이런 문제를 해결해보고자 했다. 이를 이해하기 위해서는 이 문서를 읽는게 직빵이었는데, 이 글에 해당 내용을 담으려고 읽다가 보니 그냥 번역해서 오픈소스에 기여해보는게 좋을거란 생각이 들어서 해보았다. https://github.com/microsoft/TypeScript-Website-Localizations/pull/224 #6 Translate module-reference/Theory.md to korean by d0422 · Pull Request #224 · microsoft/TypeScript-Website-Localizationsen Theory 리뷰 요청합니다 : @yeonjuan @bumkeyy ref #6 감사합니다. 처음 해보는거라 잘 모르는..

Typescript - 의존성 관리 타입 선언과 @types

의존성 관리 : 타입 선언과 @types package.json의 세가지 종류 의존성 dependencies런타임에 필수적인 라이브러리들이며, npm을 통해 설치한다면 dependencies에 들어있는 라이브러리도 함께 설치됨 → 전이 의존성 현재 프로젝트를 실행하는데 필수적인 라이브러리 devDependencies사용자가 해당 프로젝트를 설치하면 해당 라이브러리들은 제외됨 ⇒ typescript 현재 프로젝트를 개발하고 테스트하는데 사용되지만, 런타임에는 필요없는 라이브러리 peerDependencies 런타임에 필요하긴 하지만, 의존성을 직접 관리하지 않는 라이브러리들 → 플러그인 프로젝트에서 공통적으로 고려해야 할 의존성 두가지 ts자체 의존성 ⇒ 팀원들이 모두 같은 버전을 사용해야함 → devDe..

Typescript - any 사용하기

any 사용하기 가능한 좁은 범위에서 any 사용하기 function f1(){ const x:any = express(); processBar(x); } // 보다는 function f1(){ const x= express(); processBar(x as any); 함수의 반환타입은 정의되어야 함수 내부의 any가 밖으로 빠져나가지 않게 할 수 있다. 객체 내부의 타입오류는 해당 부분에서만 as any를 사용하여 해결하자! @ts-ignore //@ts-ignore를 사용하면 any를 사용하지 않고 해결이 가능함 any를 구체적으로 변형해서 사용하기 any타입을 그대로 정규식이나 함수에 넣는 것은 권장되지 않는다. function getLength(array:any){} // ===refactor f..

Typescript - 타입 설계

타입설계 문서에 타입정보 쓰지 않기 ⇒ 타입은 ts로만 표기 생성은 엄격하게, 사용은 너그럽게 매개변수 타입은 반환타입에 비해 범위가 넓은 경향이 있음 ⇒ 선택속성과 유니온타입 매개변수와 반환타입의 재사용을 위해 기본형태(반환타입)와 느슨한 형태(매개변수타입)을 준비하는 것이 좋음 타입 주변에 null값 배치하기 한 값의 null 여부가 다른 값의 null 여부에 암시적으로 관련되도록 설계하면 안됨 API작성시에는 반환타입을 큰 객체로 만들고 반환타입 자체가 null이거나 null이 아니도록 설계해야함 strictNullChecks → null오류를 정확하게 찾아냄 유니온의 인터페이스보다는 인터페이스의 유니온을 사용 interface Layer{ layout:FIllLayout|LineLayout|Poi..

Typescript - 타입 추론

타입추론 타입 추론이 된다면 명시적 타입 구문이 필요하지 않음 비구조화 할당문은 모든 지역변수의 타입이 추론되도록 함 interface Product={ id:string, name:string, price:number } function logProduct(product:Product){ const {id,name,price}=product; } ⇒ 따라서 타입 정보가 있는 라이브러리에서 콜백함수의 매개변수 타입은 자동으로 추론됨 잉여 속성 체크 타입에 선언된 속성 외에 속성이 있는지 체크함 객체 리터럴에서만 잉여속성 체크가 동작함 따라서 엄격한 객체 리터럴 체크라고도 한다. 함수의 반환에 타입 명시 ⇒ 함수의 반환에 타입을 명시하면, 오류가 정확하게 표기됨 linter의 no-inferrable-ty..

tsconfig.json

tsconfig.json 전반적인 ts설정을 하는 문서 생성 tsc --init 설정 noImplicitAny ⇒ 암시적 any를 허용하지 않음 comilerOption:{ "noImplicitAny" :true, } strictNullChecks ⇒ null이나 undefined를 허용하지 않음 → undefined는 객체가 아닙니다와 같은 문제 해결 가능 comilerOption:{ "strictNullCheck" :true, } noEmitOnError ⇒ 본래, ts는 타입체크와 컴파일이 독립적으로 시행되나, 타입에러가 발생할때 컴파일이 되지 않게 하려면 설정함 → 런타임에는 타입체크가 불가능함 comilerOption:{ "noEmitOnError" :true, } 💡 타입스크립트가 컴파일링되는..

TypeScript

왜 사용하는가? ⇒ 타입 안정성이 있는 MS에서 만든 프론트 엔드 언어 작성한 문서가 javascript로 변환됨 → 타입스크립트가 에러를 탐지하면 javascript로 컴파일되지 않음 let a="hello" a=1 오류 발생 Typescript 변수형 명시방식 let b : boolean = false let c : number[] = [] ⇒ 타입 추론이 작동하지 않으므로, 명시적 표현은 최소화 하는 것이 좋음 변수형 number string boolean 각 변수형의 array Object에 대한 Type 선언 const player { name : string; age: number; } = { name:"nico"; age : 23; } 만약 age가 없는 경우도 있다면? const playe..