ТС: Создать-Т

В этой статье рассказывается о выпуске createT новой служебной функции, которая делает создание шаблонов строк для использования на рабочих веб-сайтах удобным и простым.

Введение

Причины создания строковых шаблонов различны. Одно смешивание разметки с копией веб-сайта или приложения запутывает разметку и затрудняет ее чтение. Кроме того, поскольку терминология меняется по мере разработки продукта, может быть сложно отследить все места, где использовался тот или иной способ общения. Хранение всего вашего веб-сайта или копии приложения в одном централизованном месте может упростить внедрение и сделать итерацию проще простого.

Применение

Функция createT возвращает каррированную функцию, которую вы можете использовать в любом месте вашего кода, где вы хотите использовать строковый шаблон.

По умолчанию шаблоны могут иметь переменные, определенные с помощью двойных фигурных скобок. Обратите внимание, что это поведение настраивается.

import createT from '@swiftmind/create-t'

const t = createT({
  home: {
    welcome: 'Welcome {{name}}, to SwiftMind Institute'
  }
} as const)

const welcome = t('home.welcome', { name: 'Hans' } as const)

Вам может быть любопытно, почему используется as const. Это делается для того, чтобы компилятор TypeScript знал о значении строк в шаблонах, а также любых переменных, переданных в шаблон. Это означает, что вы можете проверить значение строки перед компиляцией. Не верите мне? Не стесняйтесь пересматривать гифку в верхней части этой страницы. Посмотрите, что произойдет, когда я наведу указатель мыши на имя переменной welcome.

Расширенное использование

Вы можете настроить способ, которым createT представляет переменные, определив группу захвата.

import createT from '@swiftmind/create-t'

const t = createT(
  {
    comparison: 'I like %this$ better than %that$'
  } as const,
  { start: '%', end: '$' } as const,
)

const likes = t('comparison', { this: 'foie gras', that: 'beets' } as const)

Обратите внимание на объявления as const

Организация файлов

Обычно я храню все копии приложений, над которыми работаю, в одном централизованном месте. Таким образом, когда мне нужно изменить копию страницы, я точно знаю, какой файл искать.

Как только вы разместите свою копию в централизованном месте, вы можете создать функцию t и экспортировать ее. Что здорово, так это то, что это может быть постепенным сдвигом, когда вы работаете с разными страницами своего веб-сайта или приложения.

import createT from '@swiftmind/create-t'
import * as home from './home'
import * as aboutUs from './about-us'
import * as mission from './mission'

export const t = createT({
  home,
  aboutUs,
  mission,
} as const)

Заключение

Этот пакет стал кульминацией многомесячных исследований парсинга строк в TypeScript с использованием только типов. Я надеюсь, что это полезно для кого-то там. До следующего раза, удачного кодирования!