[キャッチアップ] タグ付きテンプレートリテラル

const person = "Mike";
const age = 28;

const output = `That ${person} is a ${age}.`; // That Mike is a 28.

console.log(output);

function myTag(...args) {
  console.log(args); // [ [ 'That ', ' is a ', '.' ], 'Mike', 28 ]
}

const output = myTag`That ${person} is a ${age}.`;

function myTag(strings, personExp, ageExp) {
  // ...
}

function myTag(strings, personExp, ageExp) {
  return "Hello, Tagged Template Literal";
}

const output = myTag`That ${person} is a ${age}.`;

console.log(output); // Hello, Tagged Template Literal

const person = "Mike";
const age = 28;

function myTag(strings, personExp, ageExp) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "
  const str2 = strings[2]; // "."

  const argStr = ageExp > 99 ? "centenarian" : "youngster";
  return `${str0}${personExp}${str1}${argStr}${str2}`;
}

const output = myTag`That ${person} is a ${age}.`;

console.log(output); // That Mike is a youngster.

import styled from "styled-components";

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;

  ${(props: any) =>
    props.primary &&
    styled.style`
      background: white;
      color: black;
    `}
`;

console.log(Button);

{
  '$$typeof': Symbol(react.forward_ref),
  render: [Function: I] { displayName: 'styled.a' },
  attrs: [],
  componentStyle: e {
    rules: [
      '\n' +
        '  display: inline-block;\n' +
        '  border-radius: 3px;\n' +
        '  padding: 0.5rem 0;\n' +
        '\n' +
        '  ',
      [Function (anonymous)],
      '\n',
      isCss: true
    ],
    staticRulesId: '',
    isStatic: false,
    componentId: 'sc-bcXHqe',
    baseHash: 138803661,
    baseStyle: undefined
  },
  shouldForwardProp: undefined,
  foldedComponentIds: [],
  styledComponentId: 'sc-bcXHqe',
  target: 'a',
  withComponent: [Function (anonymous)],
  warnTooManyClasses: [Function (anonymous)],
  toString: [Function (anonymous)]
}

import { gql } from "@apollo/client";

const query = gql`
  query {
    totalUsers
    user {
      id
      name
    }
  }
`;

console.log(query);

{
  kind: 'Document',
  definitions: [
    {
      kind: 'OperationDefinition',
      operation: 'query',
      name: undefined,
      variableDefinitions: [],
      directives: [],
      selectionSet: [Object]
    }
  ],
  loc: Location {
    start: 0,
    end: 67,
    source: Source {
      body: '\n  query {\n    totalUsers\n    user {\n      id\n      name\n    }\n  }\n',
      name: 'GraphQL request',
      locationOffset: [Object]
    }
  }
}