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

React + TypeScript + Storybook + ESLint 세팅#

프로젝트 생성#

yarn create react-app my-app-name --template typescript

CRA + ESLint + Prettier#

Create-React-App with TypeScript, ESLint, Prettier, and Github Actions

• tsc —noEmit : https://stackoverflow.com/questions/55002137/typescript-noemit-use-case

Husky + lint-staged#

사용하지 않는 파일 지우기#

• reportWebVitals - web-vitals를 통한 성능 측정에 사용됨

  • https://create-react-app.dev/docs/measuring-performance/#web-vitals

  yarn remove web-vitals

  복사

• setupTests.ts - browser API를 사용하거나 Test 실행 전 global setup이 필요한경우에 사용

  • jest의 setupFilesAfterEnv 와 관련 - https://jestjs.io/docs/en/configuration#setupfilesafterenv-array

  • https://create-react-app.dev/docs/running-tests/#initializing-test-environment

• react-app-env.d.ts - yarn start 마다 생성됨. 많은 유저가 생성을 멈춰달라고 react team에 요청함

  • .gitignore 에 /src/react-app-env.d.ts 추가

  • .vscode/settings.json 에 추가

    "files.exclude": {  "src/*.d.ts": true}

    복사

  • https://github.com/facebook/create-react-app/issues/6560

.gitignore#

.gitignore 는 프로젝트에서 중요한 것으로 응용 프로그램 자체에서 생성한 파일이나 디렉토리를 나열해야 한다. 가장 좋은 예는 캐시 파일, 로그, 로컬 구성 등이다.

.vscode , .idea , .DS_Store 등은 프로젝트의 .gitignore 보다 컴퓨터의 글로벌 .gitignore 에 추가하는 것이 좋다.

글로벌 .gitignore 는 home 디렉토리의 .gitconfig 을 보면 알 수 있다.

[core]    excludesfile = /Users/{home}/.gitignore_global

Don't put .idea and .vscode directories to project's .gitignore

폴더 구성하기#

└── src    ├── components        └── src    ├── pages    ├── App.tsx    └── index.tsx

Storybook 설치하기#

npx sb init

• lint error 발생 (임시)

  .eslintignore

  **/*.stories.tsx**/stories/*.tsx

  복사

  .eslintrc.js

  rules: {  // ...
    'import/no-extraneous-dependencies': [    'error',    {      devDependencies: [        '**/*.stories.tsx',      ],    },  ],
    // ...}

  복사

• storybook babel-loader crash

  create-react-app babel-loader clash · Issue #4764 · storybookjs/storybook

https://storybook.js.org/docs/react/get-started/install

웹 폰트 사용#

NAVER D2

free illustration#

unDraw - Open source illustrations for any idea

Styled Components#

The Advanced Way to Style with Styled Components

Thoughts around design systems: implementation - React, Styled-Components, and more

How does the ampersand work in styled-components?

The Sass Ampersand | CSS-Tricks

Type Guard#

https://www.typescriptlang.org/docs/handbook/advanced-types.html

validate css unit value#

https://www.reddit.com/r/learnjavascript/comments/8u5pew/function_that_can_validate_if_a_string_is_a_valid/

ts-node 절대경로#

ts-node 라이브러리 설치

yarn add -D typescript @types/node nodemon ts-node tsconfig-paths

package.json에서 nodemon으로 실행

"scripts": {  "dev": "nodemon -r ts-node src/index.ts" // nodemon src/index.ts로도 실행됨}

tsconfig.json에 baseUrl과 path 설정

"baseUrl": ".","paths": {  "src/*": ["src/*"]}

→ 이제 컴파일은 되지만, 컴파일된 파일을 node, ts-node가 인식하지 못한다.

→ tsconfig-paths 모듈로 가능

"scripts": {  "dev": "nodemon --exec ts-node -r tsconfig-paths/register src/index.ts"}

빌드 후에도 동작하게 하려면

1. ts-node 모듈을 통해 작동시키는 방법이 있다.

   "scripts": {    "start": "ts-node -r tsconfig-paths/register dist/index.js"    // 또는    // "start": "node -r ts-node/register/transpile-only -r tsconfig-paths/register dist/index.js"}

   복사

2. tsconfig-paths의 bootstrap을 사용하는 방법.

   // tsconfig-paths-bootstrap.jsconst tsConfigPathFile = require('./tsconfig.paths.json');const tsConfig = require('./tsconfig.json');const tsConfigPaths = require('tsconfig-paths');
   tsConfigPaths.register({    baseUrl: tsConfig.compilerOptions.outDir,    paths: tsConfigPathFile.compilerOptions.paths,});

   복사

   // package.json"scripts" {  "start": "node -r ./tsconfig-paths-bootstrap.js dist/src/index.js"}

   복사

참고자료#

타입스크립트에서 절대경로 쓰기

typescript + node absolute path

TypeScript#

목표#

• TypeScript로 타이핑을 잘하면, 런타임 전에 미리 오류를 알 수 있습니다.

• 코드의 구현자가 사용자에게 의도를 전달할 수 있다.

타입 시스템#

• 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템

• 컴파일러가 자동으로 타입을 추론하는 시스템

☝ 타입스크립트는 타입을 명시적으로 지정할 수 있고 명시적으로 지정하지 않으면컴파일러가 자동으로 타입을 추론한다.

명시적 타입 vs 추론#

// 함수의 리턴 타입은 number로 추론된다.// 하지만 매개변수의 타입을 명시적으로 지정하지 않아서, any로 추론된다.function f(a) {    return a * 38;}
// 사용자는 a가 any 이기 때문에 사용법에 맞게 함수를 실행했지만, 사용자는 예측하지 못한 결과를 얻게 된다.console.log(f(10)); // 380console.log(f('Mark')); // NaN

이것은 noImplicitAny 옵션을 통해 방어할 수 있다. 타입을 명시적으로 지정하지 않은 경우 any 로 추론되는 변수가 있으면 컴파일 에러가 발생한다.

// 매개변수의 타입을 명시적으로 지정했다.// 명시적으로 지정하지 않은 리턴 타입은 number로 추론된다.function f(a: number) {    if (a > 0) {        return a * 38;    }}
// 사용자는 사용법에 맞게 숫자형을 사용해서 함수를 실행했지만,// 실제로는 함수의 리턴이 undefined로, undefined + 5가 실행되어 NaN이 출력된다.
console.log(f(5)); // 190;console.log(f(-5) + 5); // NaN

strictNullChecks 옵션을 켜면 모든 타입에 자동으로 포함되어 있는 null 과 undefined 를 제거해준다.

// 이 함수의 리턴 타입은 number | undefined로 추론된다.function f(a: number) {    if (a > 0) {        return a * 38;    }}
// 해당 함수의 리턴 타입은 number | undefined 이기 때문에,// 타입에 따르면 컴파일 에러가 발생한다.// 컴파일 에러를 고치기 위해 사용자와 작성자가 의논해야 한다.console.log(f(-5) + 5); // error TS2532: Object is possibly 'undefined'

하지만 가급적이면 명시적으로 리턴 타입을 지정하는 것이 좋다.

noImplicitReturns 옵션을 켜면 함수 내의 모든 코드의 줄기가 값을 리턴하지 않으면 컴파일 에러를 발생시킨다.

// error TS7030: Not all code paths return a valuefunction f(a: number) {    if (a > 0) {        return a * 38;    }}

이로 인해 리턴 타입을 명시하고, 모든 줄기에 return 을 직접 하도록 구현자에게강제할 수 있다.

매개변수에 object가 들어오는 경우#

function f(a) {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}
console.log(f({ name: 'Mark', age: 38 })); // 이름은 Mark이고, 연령대는 30대 입니다.console.log(f('Mark')); // 이름은 undefined이고, 연령대는 NaN대 입니다.

JavaScript에서는 제약사항으로 알려주지 않기 때문에 런타임에서 오류를 파악할 수있다.

• Object literal type

function f(a: { name: string, age: number }): string {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}

• 나만의 타입을 만드는 방법

interface PersonInterface {  name: string;  age: number;}
type PersonTypeAlias = {  name: string;  age: number;}
function f1(a: PersonInterface): string {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}
function f2(a: PersonTypeAlias): string {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}

interface vs type alias#

structural vs nominal type system#

타입스크립트는 structural 타입 시스템을 사용한다.

• structural type system : 구조가 같으면, 같은 타입이다.

• nominal type system : 구조가 같아도 이름이 다르면, 다른 타입이다.

interface IPerson {    name: string;    age: number;    speak(): string;}
type PersonType = {    name: string;    age: number;    speak(): string;};

• typescript를 nominal 처럼 쓰는 꼼수 ? - 아직 잘 이해를 못함

  type PersonID = string & {readonly brand: unique symbol};
  function PersonID(id: string): PersonID {    return id as PersonID;}
  function getPersonById(id: PersonID) {}
  getPersonById(PersonID('id-aaaaaa'));getPersonById('id-aaaaaa');

  복사

• function

  type EatType = (food: string) => void;
  interface IEat {    (food: string): void;}

  복사
• array

  type PersonList = string[];
  interface IPersonList {    [index: number]: string;}

  복사
• intersection

  interface ErrorHandling {    success: boolean;    error?: {message: string};}
  interface ArtistsData {    artists: {name: string}[];}
  type ArtistsResponseType = ArtistsData & ErrorHandling;
  interface IArtistsResponse extends ArtistsData, ErrorHandling {}

  복사
• union

  interface Bird {    fly(): void;    layEggs(): void;}
  interface Fish {    swim(): void;    layEggs(): void;}
  type BirdType = {    fly(): void;    layEggs(): void;};
  type FishType = {    swim(): void;    layEggs(): void;};
  // union은 type alias를 사용해야 한다.type PetType = Bird | Fish;
  // 에러 발생interface IPet extends PetType {}class Pet implements PetType {}
  // 가능interface IBird extends BirdType {}class IFish implements FishType {}

  복사

Declaration Merging - interface#

• 중복되는 이름으로 선언되었을 때 머지되는 기능은 interface에서만 제공된다.

• type은 중복시에 에러가 발생한다.

• 이는 외부 유틸에서 사용자가 원하는 타입을 추가해서 사용하는 것이 가능하다.

interface MergingInterface {    a: string;}
interface MergingInterface {    b: string;}
let mi: MergingInterface;// mi: { a: string, b: string }

언제 type을 사용하고 언제 interface를 사용하는가

• 의미적으로, 역할적으로 type alias를 타입에 별칭을 붙일 때 사용한다.

• 즉, 이미 있는 타입에 별칭을 붙여 다른 이름으로 부르고 싶을 때, 이미 있는 타입을 union으로 조합할 때 사용한다.

• 그 외에 새로운 타입을 생성할 때 interface를 사용한다.

  • 실제 동작 상의 차이는 Merging에서의 차이가 가장 중요하다.

서브 타입과 슈퍼 타입#

집합의 관계에서 포함되는 쪽이 서브 타입, 포함하는 쪽이 슈퍼 타입이다.

let sub1: 1 = 1;let sup1: number = sub1;sub1 = sup1; // error! Type 'number' is not assignable to type '1'.
let sub2: number[] = [1];let sup2: object = sub2;sub2 = sup2; // error! Type '{}' is missing the following the properties from type 'number[]': length, pop, push, concat, and 16 more.
let sub3: [number, number] = [1, 2];let sup3: number[] = sub3;sub3 = sup3; // error! Type 'number[]' is not assignable to type '[number, number]'. Target requires 2 element(s) but source may have fewer.
let sub4: number = 1;let sup4: any = sub4;sub4 = sup4;
let sub5: never = 0 as never;let sup5: number = sub5;sub5 = sup5; // Type 'number' is not assignable to type 'never'.
class Animal {}class Dog extends Animal {    eat() {}}
let sub6: Dog = new Dog();let sup6: Animal = sub6;sub6 = sup6; // Property 'eat' is missing in type 'Animal' but required in type 'Dog'.

☝ any 와 never 는 추후에 다시 학습

같거나 서브 타입인 경우 할당이 가능하다. ⇒ 공변#

let sub7: string = '';let sup7: string | number = sub7;
// object - 각각의 프로퍼티가 대응하는 프로퍼티와 같거나 서브타입이어야 한다.let sub8: {a: string; b: number} = {a: '', b: 1};let sup8: {a: string | number; b: number} = sub8;
// array - object와 마찬가지let sub9: Array<{a: string; b: number}> = [{a: '', b: 1}];let sup9: Array<{a: string | number; b: number}> = sub9;

함수의 매개변수 타입만 같거나 슈퍼타입인 경우, 할당이 가능하다 ⇒ 반병#

class Person {}class Developer extends Person {    coding() {}}class StartupDeveloper extends Developer {    burning() {}}
function tellme(f: (d: Developer) => Developer) {}
// Developer => Developer 에다가 Developer => Developer 를 할당하는 경우tellme(function dToD(d: Developer): Developer {    return new Developer();});
// Developer => Developer 에다가 Person => Developer 를 할당하는 경우// 반병tellme(function pToD(d: Person): Developer {    return new Developer();});
// Developer => Developer 에다가 StartupDeveloper => Developer 를 할당하는 경우// strictFunctionType으로 에러 표시 가능tellme(function sToD(d: StartupDeveloper): Developer {    return new Developer();});

any#

• 입력은 마음대로

• 함수 구현이 자유롭게 ⇒ 자유가 항상 좋은 건 아니다.

unknown#

• 입력은 마음대로

• 함수 구현은 문제 없도록

타입 추론 이해하기#

• let과 const의 타입 추론 (+ as const)

• as const

let a = 'Mark'; // stringconst b = 'Mark'; // 'Mark' => literal type
let c = 38; // numberconst d = 38; // 38 => literal type
let e = false; // booleanconst f = false; // false => literal type
let g = ['Mark', 'Haeun']; // string[]const h = ['Mark', 'Haeun']; // string[]
const i = ['Mark', 'Haeun', 'Bokdang'] as const; // readonly ['Mark', 'Haeun', 'Bokdang']

• best common type (가장 공통적인 타입을 추론해낸다)

let j = [0, 1, null]; // (number | null)[]const k = [0, 1, null]; // (number | null)[]
class Animal {}class Rhino extends Animal {}class Elephant extends Animal {}class Snake extends Animal {}
let l = [new Rhino(), new Elephant(), new Snake()]; // (Rhino | Elephant | Snake)[]const m = [new Rhino(), new Elephant(), new Snake()]; // (Rhino | Elephant | Snake)[]const n = [new Animal(), new Rhino(), new Elephant(), new Snake()]; // Animal[]const o: Animal[] = [new Rhino(), new Elephant(), new Snake()]; // Animal[]

• Contextual Typing - 위치에 따라 추론이 다름

// Parameter 'e' implicitly has an 'any' type.const click = (e) => {    e; // any};
document.addEventListener('click', click);document.addEventListener('click', (e) => {    e; // MouseEvent});

Type Guard로 안전함을 파악하기#

typeof Type Guard - 보통 Primitive 타입일 경우#

• typeof로 primitive 타입을 걸러낼 수 있다.

function getNumber(value: number | string): number {    value; // number | string    if (typeof value == 'number') {        return value;    }    value; // string    return -1;}

instanceof Type Guard - Error 객체 구분에 많이 쓰인다.#

class NegativeNumberError extends Error {}
function getNumber(value: number): number | NegativeNumberError {    if (value < 0) return new NegativeNumberError();
    return value;}
function main() {    const num = getNumber(-10);
    if (num instanceof NegativeNumberError) {        return;    }
    num; // number}

in operator Type Guard - object의 프로퍼티 유무로 처리하는 경우#

interface Admin {    id: string;    role: string;}
interface User {    id: string;    emain: string;}
function redirect(user: Admin | User) {    if ('role' in user) {        routeToAdminPage(user.role);    } else {        routeToHomePage(user.email);    }}

literal Type Guard - object의 프로퍼티가 같고, 타입이 다른 경우#

interface IMachine {    type: string;}
class Car implements IMachine {    type: 'CAR';    wheel: number;}
class Boat implements IMachine {    type: 'BOAT';    motor: number;}
function getWheelOrMotor(machine: Car | Boat): number {    if (machine.type === 'CAR') {        return machine.wheel;    } else {        return machine.motor;    }}

custom Type Guard#

function getWheelOrMoter(machine: any): number {    if (isCar(machine)) {        return machine.wheel;    } else if (isBoat(machine)) {        return machine.motor;    } else {        return -1;    }}
function isCar(arg: any): arg is Car {    return arg.type === 'CAR';}
function isBoat(arg: any): arg is Boat {    return arg.type === 'BOAT';}

Conditional Type#

• `Item T`

  interface StringContainer {    value: string;    format(): string;    split(): string[];}
  interface NumberContainer {    value: number;    nearestPrime: number;    round(): number;}
  type Item1<T> = {    id: T;    container: any;};
  const item1: Item1<string> = {    id: 'aaaaaa',    container: null, // container type에 any를 사용했기 때문에 null을 넣는 것도 가능하다.};

  복사
• `Item T` - T가 string이면 StringContainer, 아니면 NumberContainer

  type Item2<T> = {    id: T;    container: T extends string ? StringContainer : NumberContainer;};
  const item2: Item2<string> = {    id: 'aaaaaa',    container: null, // Type 'null' is not assignable to type 'StringContainer'.};

  복사
• `Item T` - T가 string이면 StringContainer, number면 NumberContainer, 아니면 사용 불가

  type Item3<T> = {    id: T extends string | number ? T : never;    container: T extends string        ? StringContainer        : T extends number        ? NumberContainer        : never;};
  const item3: Item3<boolean> = {    id: true, // Type 'boolean' is not assignable to type 'never'.    container: null, // Type 'null' is not assignable to type 'never'.};

  복사
• `ArrayFilter T`

  type ArrayFilter<T> = T extends any[] ? T : never;type StringsOrNumbers = ArrayFilter<string | number | string[] | number[]>;

  복사

  
  

1:11:12 까지 시청 ...