TS: Създай-T

Тази статия обхваща пускането на createT нова помощна функция, която прави удобно и лесно създаването на шаблони за низове за използване в производствени уебсайтове.

Въведение

Причините за създаване на шаблони за низове са различни. Едно смесване на маркиране с копие на уебсайт или приложение замъглява маркирането и го затруднява за четене. Освен това, тъй като терминологията се променя с развитието на продукта, може да бъде трудно да се проследят всички места, където е използван конкретен начин за комуникация. Съхраняването на цялото ви копие на уебсайта или приложението на едно централизирано място може да улесни внедряването и да направи повторението лесно.

Използване

Функцията createT връща curried функция, която можете да използвате навсякъде във вашия код, където искате да използвате шаблон на низ.

По подразбиране шаблоните могат да имат променливи, дефинирани с двойни фигурни скоби. Имайте предвид, че това поведение може да се конфигурира.

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 за стойността на низовете в шаблоните, както и за всички променливи, предоставени на шаблона. Това означава, че можете да проверите стойността на низ преди компилиране. не ми вярваш Чувствайте се свободни да гледате отново gif файла в горната част на тази страница. Вижте какво се случва, когато задържа курсора на мишката над името на променливата 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, използвайки само типове. Надявам се, че е полезно за някой там. До следващия път, приятно кодиране!