huncode/progcode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revise October 2019 TypeScript articles
Build and deploy / deploy (push) Successful in 16s
Details

Browse Source
This commit is contained in:
huncode
2026-07-31 11:02:31 +03:00
parent bd09f3369c
commit 3e06278fc2
7 changed files with 639 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/public/assets/editorial/2019/typescript-migration-lane-2019.svg
+50
View File
@@ -0,0 +1,50 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1160" role="img" aria-labelledby="title desc">
<title id="title">Постепенная миграция JavaScript-проекта на TypeScript</title>
<desc id="desc">Вертикальная схема из четырёх шагов: зафиксировать рабочий выпуск, выбрать границу данных, включить проверку JavaScript, перенести один модуль и повторить выпускные проверки.</desc>
<defs>
<linearGradient id="background" x1="0" x2="1" y1="0" y2="1">
<stop offset="0" stop-color="#f8fbff"/>
<stop offset="1" stop-color="#edf9f4"/>
</linearGradient>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M0 0L10 5L0 10z" fill="#278f6b"/>
</marker>
</defs>
<rect width="720" height="1160" fill="url(#background)"/>
<rect x="42" y="34" width="636" height="112" rx="18" fill="#17324d"/>
<text x="360" y="80" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="29" font-weight="700">TypeScript 3.5: миграция по границам</text>
<text x="360" y="116" text-anchor="middle" fill="#d8e7f3" font-family="Arial, sans-serif" font-size="21">Один шов, прежний выпуск, маленький merge</text>
<rect x="74" y="190" width="572" height="122" rx="18" fill="#ffffff" stroke="#17324d" stroke-width="3"/>
<circle cx="120" cy="251" r="27" fill="#17324d"/>
<text x="120" y="260" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="22" font-weight="700">1</text>
<text x="170" y="238" fill="#17324d" font-family="Arial, sans-serif" font-size="26" font-weight="700">Зафиксировать рабочий выпуск</text>
<text x="170" y="274" fill="#425d73" font-family="Arial, sans-serif" font-size="21">build-команда, артефакт, один smoke-путь</text>
<path d="M360 312v38" stroke="#278f6b" stroke-width="5" marker-end="url(#arrow)"/>
<rect x="74" y="358" width="572" height="122" rx="18" fill="#ffffff" stroke="#315bd6" stroke-width="3"/>
<circle cx="120" cy="419" r="27" fill="#315bd6"/>
<text x="120" y="428" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="22" font-weight="700">2</text>
<text x="170" y="406" fill="#17324d" font-family="Arial, sans-serif" font-size="26" font-weight="700">Выбрать одну границу данных</text>
<text x="170" y="442" fill="#425d73" font-family="Arial, sans-serif" font-size="21">API → normalizer → модель экрана</text>
<path d="M360 480v38" stroke="#278f6b" stroke-width="5" marker-end="url(#arrow)"/>
<rect x="74" y="526" width="572" height="122" rx="18" fill="#ffffff" stroke="#e58b36" stroke-width="3"/>
<circle cx="120" cy="587" r="27" fill="#e58b36"/>
<text x="120" y="596" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="22" font-weight="700">3</text>
<text x="170" y="574" fill="#17324d" font-family="Arial, sans-serif" font-size="26" font-weight="700">Проверить старый JavaScript</text>
<text x="170" y="610" fill="#425d73" font-family="Arial, sans-serif" font-size="21">allowJs + локальный @ts-check в опасном шве</text>
<path d="M360 648v38" stroke="#278f6b" stroke-width="5" marker-end="url(#arrow)"/>
<rect x="74" y="694" width="572" height="142" rx="18" fill="#ffffff" stroke="#278f6b" stroke-width="3"/>
<circle cx="120" cy="765" r="27" fill="#278f6b"/>
<text x="120" y="774" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="22" font-weight="700">4</text>
<text x="170" y="752" fill="#17324d" font-family="Arial, sans-serif" font-size="26" font-weight="700">Перенести один модуль в .ts</text>
<text x="170" y="788" fill="#425d73" font-family="Arial, sans-serif" font-size="21">Не менять module format и delivery</text>
<text x="170" y="816" fill="#425d73" font-family="Arial, sans-serif" font-size="21">в той же партии.</text>
<rect x="58" y="900" width="604" height="126" rx="18" fill="#17324d"/>
<text x="360" y="950" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="24" font-weight="700">type-check → прежний build</text>
<text x="360" y="988" text-anchor="middle" fill="#d8e7f3" font-family="Arial, sans-serif" font-size="23">smoke → маленький merge</text>
<text x="360" y="1090" text-anchor="middle" fill="#425d73" font-family="Arial, sans-serif" font-size="21">Выпуск проверяет границу, а не процент файлов .ts.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

web/public/assets/editorial/2019/typescript-migration-release-gates-2019.svg
+54
View File
@@ -0,0 +1,54 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1240" role="img" aria-labelledby="title desc">
<title id="title">Выпускные проверки для одной TypeScript-границы</title>
<desc id="desc">Вертикальная диаграмма показывает одно изменение от JavaScript transport к TypeScript normalizer и четыре независимые проверки: fixture, type-check, прежний build и smoke-сценарий.</desc>
<defs>
<linearGradient id="background" x1="0" x2="1" y1="0" y2="1">
<stop offset="0" stop-color="#f7fbff"/>
<stop offset="1" stop-color="#f4fbf7"/>
</linearGradient>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M0 0L10 5L0 10z" fill="#315bd6"/>
</marker>
</defs>
<rect width="720" height="1240" fill="url(#background)"/>
<rect x="42" y="34" width="636" height="112" rx="18" fill="#17324d"/>
<text x="360" y="80" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="28" font-weight="700">Одна граница — четыре gate</text>
<text x="360" y="116" text-anchor="middle" fill="#d8e7f3" font-family="Arial, sans-serif" font-size="21">Каждая проверка отвечает на свой вопрос.</text>
<rect x="74" y="190" width="572" height="142" rx="18" fill="#ffffff" stroke="#315bd6" stroke-width="3"/>
<text x="360" y="236" text-anchor="middle" fill="#17324d" font-family="Arial, sans-serif" font-size="27" font-weight="700">Изменение одного шва</text>
<text x="360" y="274" text-anchor="middle" fill="#315bd6" font-family="Arial, sans-serif" font-size="22" font-weight="700">member-api.js → normalizer.ts → screen</text>
<text x="360" y="306" text-anchor="middle" fill="#425d73" font-family="Arial, sans-serif" font-size="20">unknown → Member проходит только через normalizer</text>
<path d="M360 332v38" stroke="#315bd6" stroke-width="5" marker-end="url(#arrow)"/>
<rect x="74" y="378" width="572" height="118" rx="18" fill="#ffffff" stroke="#315bd6" stroke-width="3"/>
<circle cx="120" cy="437" r="27" fill="#315bd6"/>
<text x="120" y="446" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="22" font-weight="700">1</text>
<text x="170" y="425" fill="#17324d" font-family="Arial, sans-serif" font-size="26" font-weight="700">Contract fixture</text>
<text x="170" y="461" fill="#425d73" font-family="Arial, sans-serif" font-size="21">неполный payload не становится Member</text>
<path d="M360 496v32" stroke="#315bd6" stroke-width="5" marker-end="url(#arrow)"/>
<rect x="74" y="536" width="572" height="118" rx="18" fill="#ffffff" stroke="#315bd6" stroke-width="3"/>
<circle cx="120" cy="595" r="27" fill="#315bd6"/>
<text x="120" y="604" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="22" font-weight="700">2</text>
<text x="170" y="583" fill="#17324d" font-family="Arial, sans-serif" font-size="26" font-weight="700">Type-check</text>
<text x="170" y="619" fill="#425d73" font-family="Arial, sans-serif" font-size="21">imports и контракт видны compiler</text>
<path d="M360 654v32" stroke="#315bd6" stroke-width="5" marker-end="url(#arrow)"/>
<rect x="74" y="694" width="572" height="118" rx="18" fill="#ffffff" stroke="#278f6b" stroke-width="3"/>
<circle cx="120" cy="753" r="27" fill="#278f6b"/>
<text x="120" y="762" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="22" font-weight="700">3</text>
<text x="170" y="741" fill="#17324d" font-family="Arial, sans-serif" font-size="26" font-weight="700">Прежний build</text>
<text x="170" y="777" fill="#425d73" font-family="Arial, sans-serif" font-size="21">всё ещё создаёт известный артефакт</text>
<path d="M360 812v32" stroke="#315bd6" stroke-width="5" marker-end="url(#arrow)"/>
<rect x="74" y="852" width="572" height="118" rx="18" fill="#ffffff" stroke="#278f6b" stroke-width="3"/>
<circle cx="120" cy="911" r="27" fill="#278f6b"/>
<text x="120" y="920" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="22" font-weight="700">4</text>
<text x="170" y="899" fill="#17324d" font-family="Arial, sans-serif" font-size="26" font-weight="700">Smoke</text>
<text x="170" y="935" fill="#425d73" font-family="Arial, sans-serif" font-size="21">известный Member доходит до экрана</text>
<rect x="58" y="1032" width="604" height="112" rx="18" fill="#17324d"/>
<text x="360" y="1078" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="23" font-weight="700">Маленький rollback остаётся возможным</text>
<text x="360" y="1114" text-anchor="middle" fill="#d8e7f3" font-family="Arial, sans-serif" font-size="20">transport и pipeline не меняются в той же партии</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

web/public/assets/editorial/2019/typescript-migration-type-boundary-2019.svg
+45
View File
@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1160" role="img" aria-labelledby="title desc">
<title id="title">Граница между внешними данными и типизированным кодом</title>
<desc id="desc">Вертикальная схема показывает путь неизвестного сетевого payload через исполняемый normalizer к модели Member и отдельный опасный обход через any.</desc>
<defs>
<linearGradient id="background" x1="0" x2="1" y1="0" y2="1">
<stop offset="0" stop-color="#fafcff"/>
<stop offset="1" stop-color="#f1f7ff"/>
</linearGradient>
<marker id="good-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M0 0L10 5L0 10z" fill="#278f6b"/>
</marker>
<marker id="bad-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M0 0L10 5L0 10z" fill="#c54646"/>
</marker>
</defs>
<rect width="720" height="1160" fill="url(#background)"/>
<rect x="42" y="34" width="636" height="112" rx="18" fill="#17324d"/>
<text x="360" y="80" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="28" font-weight="700">Граница типов не заменяет runtime</text>
<text x="360" y="116" text-anchor="middle" fill="#d8e7f3" font-family="Arial, sans-serif" font-size="21">Входные данные проверяет исполняемый код.</text>
<rect x="74" y="190" width="572" height="140" rx="18" fill="#eaf0f8" stroke="#a5b8cc" stroke-width="3"/>
<text x="360" y="232" text-anchor="middle" fill="#17324d" font-family="Arial, sans-serif" font-size="27" font-weight="700">1. Внешний payload</text>
<text x="360" y="270" text-anchor="middle" fill="#425d73" font-family="Arial, sans-serif" font-size="22">HTTP, форма, legacy callback</text>
<rect x="274" y="288" width="172" height="28" rx="14" fill="#315bd6"/>
<text x="360" y="309" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif" font-size="18" font-weight="700">unknown</text>
<path d="M360 330v42" stroke="#278f6b" stroke-width="5" marker-end="url(#good-arrow)"/>
<rect x="74" y="380" width="572" height="190" rx="18" fill="#ffffff" stroke="#278f6b" stroke-width="3"/>
<text x="360" y="426" text-anchor="middle" fill="#17324d" font-family="Arial, sans-serif" font-size="27" font-weight="700">2. Normalizer исполняется в JavaScript</text>
<text x="360" y="468" text-anchor="middle" fill="#278f6b" font-family="Arial, sans-serif" font-size="22" font-weight="700">runtime-проверка</text>
<text x="360" y="506" text-anchor="middle" fill="#425d73" font-family="Arial, sans-serif" font-size="21">проверяет поля и варианты status</text>
<text x="360" y="540" text-anchor="middle" fill="#425d73" font-family="Arial, sans-serif" font-size="21">возвращает Member, null или понятную ошибку</text>
<path d="M360 570v42" stroke="#278f6b" stroke-width="5" marker-end="url(#good-arrow)"/>
<rect x="74" y="620" width="572" height="140" rx="18" fill="#dcf4e9" stroke="#278f6b" stroke-width="3"/>
<text x="360" y="662" text-anchor="middle" fill="#17324d" font-family="Arial, sans-serif" font-size="27" font-weight="700">3. Ядро получает проверенный Member</text>
<text x="360" y="700" text-anchor="middle" fill="#425d73" font-family="Arial, sans-serif" font-size="22">screen и formatter используют контракт</text>
<text x="360" y="734" text-anchor="middle" fill="#425d73" font-family="Arial, sans-serif" font-size="21">а не исходный сетевой объект</text>
<path d="M140 810H580" stroke="#c54646" stroke-width="5" stroke-dasharray="12 10" marker-end="url(#bad-arrow)"/>
<rect x="106" y="846" width="508" height="126" rx="18" fill="#fff0f0" stroke="#c54646" stroke-width="3"/>
<text x="360" y="892" text-anchor="middle" fill="#a12f2f" font-family="Arial, sans-serif" font-size="27" font-weight="700">any обходит normalizer</text>
<text x="360" y="930" text-anchor="middle" fill="#a12f2f" font-family="Arial, sans-serif" font-size="21">ошибка проявится дальше по цепочке</text>
<text x="360" y="1050" text-anchor="middle" fill="#425d73" font-family="Arial, sans-serif" font-size="21">TypeScript проверяет контракт; runtime проверяет вход.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB