"TypeScript" 태그로 연결된 2개 게시물개의 게시물이 있습니다.

class 작성 시에 TypeScript의 클래스 문법과 JavaScript의 문법을 비교해보자.

JS 클래스 문법#

JS에서 클래스는 다음과 같은 문법을 사용한다.

class MyClass {  publicProp = 'value'; // public 프로퍼티  #privateProp = 'value'; // private 프로퍼티. ES2019 부터 지원.  _protectedProp = 'value'; // protected 프로퍼티. 기능적으로 지원하지 않지만, 관례적으로 _를 사용하여 표현하고 약속하여 사용함.
  constructor(...) { // 생성자 메서드로 매개변수 값을 받아 프로퍼티를 설정하게 할 수 있다.    // ...  }
  static staticMethod(...) {} // static 메서드
  publicMethod(...) {} // public 메서드  #privateMethod(...) {} // private 메서드
  get publicProp(...) {} // getter 메서드  set publicProp(...) {} // setter 메서드
  get privateProp(...) {} // getter 메서드  set privateProp(...) {} // setter 메서드
  get protectedProp(...) {} // getter 메서드  set protectedProp(...) {} // setter 메서드}

클래스 상속#

JS에서도 클래스 상속을 지원하기 때문에, 기존 클래스를 확장하여 클래스를 생성할수있다.

class Animal {    constructor(name) {        this.speed = 0;        this.name = name;    }    run(speed) {        this.speed = speed;        alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`);    }    stop() {        this.speed = 0;        alert(`${this.name} 이/가 멈췄습니다.`);    }}
let animal = new Animal('동물');
class Rabbit extends Animal {    hide() {        alert(`${this.name} 이/가 숨었습니다!`);    }}
let rabbit = new Rabbit('흰 토끼');
rabbit.run(5); // 흰 토끼 은/는 속도 5로 달립니다.rabbit.hide(); // 흰 토끼 이/가 숨었습니다!

클래스 Rabbit으로 만든 객체는 rabbit.hide()와 같은 Rabbit에 정의된 메서드에도 접근할 수 있고, rabbit.run()과 같은 Animal에 정의된 메서드에도 접근할수있다.

extends 키워드는 이렇게 프로토타입 기반으로 동작하여, 객체 rabbit -> Rabbit.prototype -> Animal.prototype 순으로 메소드를 찾아서 실행한다.

접근 제어자(Access Modifier)#

객체 지향 프로그래밍에서는 접근 제어자를 활용해 내부 인터페이스와 외부 인터페이스를 구분하여 캡슐화한다.

• public : 어디서든지 접근할 수 있으며 외부 인터페이스를 구성한다.
• protected : 클래스 자신과 자손 클래스에서만 접근할 수 있으며 내부 인터페이스를 구성한다.
• private : 클래스 자신에서만 접근할 수 있으며 내부 인터페이스를 구성한다.

JS에서는 public, protected 에 대한 문법적 지원이 없으며, 관습적으로 _ 접두사를 사용하여 protected 프로퍼티를 사용한다.

private 속성은 ES2019부터 지원하게 되었다.

static#

정적 프로퍼티와 메서드는 어떤 특정한 객체가 아닌 클래스에 속한 함수를 구현하고자할 때 주로 사용된다.

정적 멤버는 상속된다.

class Article {    constructor(title, date) {        this.title = title;        this.date = date;    }
    static createTodays() {        // this는 Article입니다.        return new this("Today's digest", new Date());    }}
let article = Article.createTodays();
alert(article.title); // Today's digest

TS 클래스 문법#

TS는 JS의 모든 클래스 문법을 지원하며, 그에 더해서 몇 가지 문법적인 지원을 추가해준다. 하지만 모든 문법은 컴파일 타임에 대해서만 적용되고, 런타임에는 결국 JS가지원하는 기능만을 사용해 동작한다는 것을 기억하자.

다음은 JS에서 지원하지 않지만, TS에서 사용할 수 있는 Class와 관련된 기능들이다.

readonly#

필드에는 readonly 제어자를 접두사로 사용할 수 있다. 이렇게 하면 생성자 함수가아닌 곳에서 할당을 방지할 수 있다.

class Greeter {    readonly name: string = 'world';
    constructor(otherName?: string) {        if (otherName !== undefined) {            this.name = otherName;        }    }
    err() {        this.name = 'not ok';        // Cannot assign to 'name' because it is a read-only property.    }}const g = new Greeter();g.name = 'also not ok';// Cannot assign to 'name' because it is a read-only property.

overload#

JS는 함수의 매개변수의 갯수와 자료형이 자유롭기 때문에, 오버로드에 대한 개념이사실상 없다. (단지, 매개변수의 조건에 따른 분기를 작성하는 정도)

TS에서는 다양한 방식으로 호출할 수 있는 함수에 대해 구체적으로 오버로드 signature를 작성할 수 있다.

class Point {    // Overloads    constructor(x: number, y: string);    constructor(s: string);    constructor(xs: any, y?: any) {        // TBD    }}
class Util {    // Overloads    len(s: string): number;    len(arr: any[]): number;    len(x: any) {        return x.length;    }}

override#

TypeScript에서는 파생 클래스가 항상 기본 클래스의 하위 유형이 되도록 한다.

class Base {    greet() {        console.log('Hello, world!');    }}
class Derived extends Base {    greet(name?: string) {        if (name === undefined) {            super.greet();        } else {            console.log(`Hello, ${name.toUpperCase()}`);        }    }}
const d = new Derived();d.greet();d.greet('reader');

파생 클래스가 기본 클래스의 규칙을 따르는 것이 중요한데, 기본 클래스가 파생 클래스 인스턴스를 참조할 수 있어야 한다.

// Alias the derived instance through a base class referenceconst b: Base = d;// No problemb.greet();

만약 파생 클래스가 기본 클래스를 따르지 않는다면 에러가 발생한다.

class Base {    greet() {        console.log('Hello, world!');    }}
class Derived extends Base {    // Make this parameter required    greet(name: string) {        // Property 'greet' in type 'Derived' is not assignable to the same property in base type 'Base'.        // Type '(name: string) => void' is not assignable to type '() => void'.        console.log(`Hello, ${name.toUpperCase()}`);    }}
const b: Base = new Derived();// Crashes because "name" will be undefinedb.greet();

접근 제어자(Access Modifier)#

Member Visibility

• public : 기본적으로 모든 멤버는 public으로 어디서나 접근할 수 있다.
• protected : 클래스 자신과 자손 클래스에서만 접근할 수 있다.
• private : protected와 유사하게 클래스 자신에서만 접근할 수 있지만, 자손 클래스에서도 접근할 수 없다.

Why No Static Classes?#

TS(JS)는 Java나 C#에서 사용하는 static class 라고 불리는 구조를 사용하지 않는다. (static class는 인스턴스화 할 수 없다.)

따라서, static class 문법을 사용하는 것은 불필요하다. 단지 단순 리터럴 객체를쓰는 것과 동일하다.

// Unnecessary "static" classclass MyStaticClass {    static doSomething() {}}
// Preferred (alternative 1)function doSomething() {}
// Preferred (alternative 2)const MyHelperObject = {    dosomething() {},};

abstract#

아직 구현하지 않은 메소드와 프로퍼티에 abstract 키워드를 사용할 수 있다. abstract 멤버를 가진 클래스는 반드시 abstarct class 여야 한다.

abstract class의 역할은 abstract 멤버를 구현할 서브 클래스의 기초 클래스가되는 것이다.

abstract class Base {    abstract getName(): string;
    printName() {        console.log('Hello, ' + this.getName());    }}
class Derived extends Base {    getName() {        return 'world';    }}
const d = new Derived();d.printName();

참고자료#

• Classes
• private, protected 프로퍼티와 메서드

TypeScript + React + Storybook으로 디자인 시스템 구축하기#

Design System vs Component Library#

☝ 디자인 시스템은 계속 진화하는 재사용 가능한 구성 요소 모음이고, 일관성과 속도를 보장하는 규칙을 따르는 모든 제품을 개발하기 위한 단일 진실 공급원(SSOT)이다.

• 디자인 시스템은 컴포넌트 라이브러리를 넘어서 디자인 원칙, 스타일 가이드, 패턴, 톤, 규칙과 명세서 등을 포함한다.

프로젝트 생성#

• .gitignore , package.json 생성

Storybook 설치하기#

npx -p @storybook/cli sb init --type react

• storybook 시작하기

yarn storybook

React peer dependencies#

@storybook/react 가 react , react-dom 을 peer-dependency로 가지므로 react, react-dom 을 설치해야 실행할 수 있다. 설치하지 않으면 다음의 에러가 발생한다.

Error: Cannot find module 'react-dom/package.json'

하지만, dependency 에 직접 추가하면, 개발한 라이브러리를 설치한 유저가 react , react-dom 역시 설치 받게 된다. (게다가 정해진 버전으로)

따라서 컴포넌트 라이브러리를 작성하는 작성자 입장에서는 storybook을 실행하는 개발 시에만 이 의존성이 필요하므로 devDependency에 명시해야한다.

또한, 이 컴포넌트 라이브러리를 사용하는 사용자 입장에서는 react , react-dom 과 함께 사용해야 하기 때문에 따라서 peerDependency에도 명시해야한다.

peerDependency는 이 의존성과 함께 사용해야 한다는 뜻이고, 유저가 직접 설치 해야하기 때문이다.

devDependency는 프로젝트의 로컬에만 설치되고 배포시에는 유저가 다운로드하지 않기때문에 peerDependency와 devDependency에 같은 라이브러리를 도 추가해도 무방하다.

yarn add -D react react-dom

// package.json"peerDependencies": {  "react": "17.0.1",  "react-dom": "17.0.1",  "styled-components": "5.2.1"}

storybookjs/storybook

Yarn

Duplicate same dependency in package.json devDependencies and peerDependencies?

TypeScript로 이전하기#

• typescript, react-docgen-typescript-loader 설치

  yarn add -D typescript react-docgen-typescript-loader

  복사

• stories typescript 버전으로 변경

  create-react-app typescript 템플릿에 sb init 으로 생성한 ts 버전 stories로 테스트

• .storybook/main.js 변경

  module.exports = {    stories: [        '../stories/**/*.stories.mdx',        '../stories/**/*.stories.@(js|jsx|ts|tsx)',    ],    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],    typescript: {        check: false,        checkOptions: {},        reactDocgen: 'react-docgen-typescript',        reactDocgenTypescriptOptions: {            shouldExtractLiteralValuesFromEnum: true,            propFilter: (prop) =>                prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,        },    },};

  복사

• tsconfig.json 추가

  {    "compilerOptions": {        "target": "es5",        "lib": ["dom", "dom.iterable", "esnext"],        "allowJs": true,        "skipLibCheck": true,        "esModuleInterop": true,        "allowSyntheticDefaultImports": true,        "strict": true,        "forceConsistentCasingInFileNames": true,        "noFallthroughCasesInSwitch": true,        "module": "esnext",        "moduleResolution": "node",        "resolveJsonModule": true,        "isolatedModules": true,        "noEmit": true,        "jsx": "react-jsx"    },    "include": ["stories"]}

  복사

TypeScript

Rollup으로 번들링하기#

☝ 웹팩이 애플리케이션을 위한 번들러라면, 롤업은 라이브러리를 위한 번들러다.

Webpack and Rollup: the same but different

Rollup 설정#

• 사용하는 플러그인

"devDependencies": {  "babel-preset-react-app": "10.0.0", // create-react-app에서 사용하는 babel 설정  "rollup": "2.35.1",  "rollup-plugin-babel": "4.4.0", // babel 사용을 위한 플로그인  "rollup-plugin-cleaner": "1.0.0", // build 전에 dist 폴더 삭제  "rollup-plugin-commonjs": "10.1.0", // CommonJS의 모듈 코드를 ES6로 변환하여 결과물에 포함  "rollup-plugin-node-resolve": "5.2.0", // 써드파티 모듈을 사용하기위한 용도  "rollup-plugin-peer-deps-external": "2.2.4", // peerDependencies를 번들링된 결과에 포함하지 않음}

• rollup.config.js

import commonjs from 'rollup-plugin-commonjs';import cleaner from 'rollup-plugin-cleaner';import resolve from 'rollup-plugin-node-resolve';import babel from 'rollup-plugin-babel';import external from 'rollup-plugin-peer-deps-external';import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import pkg from './package.json';
const extensions = ['.js', '.jsx', '.ts', '.tsx'];
process.env.BABEL_ENV = 'production';
export default {    input: './src/index.ts',    plugins: [        cleaner({targets: ['./dist/']}),        peerDepsExternal(),        resolve({extensions}),        commonjs({            include: 'node_modules/**',        }),        babel({            extensions,            include: ['src/**/*'],            presets: [['react-app', {flow: false, typescript: true}]],            runtimeHelpers: true,        }),    ],    output: [        {            file: pkg.module,            format: 'es',        },    ],};

tsconfig.json & package.json 설정#

declaration이란, 컴포넌트들에서 사용하고 있는 타입 정보들을 지니고 있는 파일.

이는 다음 명령어로 생성을 할 수 있다.

tsc --emitDeclarationOnly

이 명령어를 실행하기 전에 tsconfig.json 을 수정해주어야 한다.

{    "compilerOptions": {        "target": "es5",        "lib": ["dom", "dom.iterable", "esnext"],        "skipLibCheck": true,        "esModuleInterop": true,        "allowSyntheticDefaultImports": true,        "strict": true,        "forceConsistentCasingInFileNames": true,        "module": "esnext",        "moduleResolution": "node",        "resolveJsonModule": true,        "jsx": "react",        "declaration": true,        "declarationDir": "dist/types"    },    "include": ["src"],    "exclude": ["**/*.stories.tsx"]}

• declaration 값을 true , declarationDir 경로를 "dist/types" 로,

• allowJs: 자바스크립트와 혼용을 하고 있다면 declaration 파일을 만들지 못하므로제거.

• noEmit: 결과물을 만들지 않는다는 옵션으로 제거.

• isolatedModules: 아무 값도 내보내지 않는 파일을 방지하는 옵션. 제거

stories.tsx 확장자는 모두 무시하도록 exclude 옵션을 설정

package.json에는 Build 커맨드를 추가한다.

"build": "rollup -c && tsc --emitDeclarationOnly",

package.json에서 module, types, files 를 추가한다. name은 scope를 사용한다.

{    "name": "@younho9/design-system",    "module": "dist/index.js",    "types": "dist/types/index.d.ts",    "files": ["/dist"]}

배포 명령어

# npm publishnpm publish --access public # scope를 사용할 때

참고자료#

Do you think your component library is your design system? Think again

TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기

디자인 시스템 소개

storybookjs/design-system

storybookjs/storybook

How to create a react component library with TypeScript, rollup.js and Storybook

Building a Design System Package With Storybook, TypeScript, and React in 15 Minutes

Creating and publishing scoped public packages | npm Docs