Template Literal Types for validating files names (#snippet)

Here’s Alex using one of my favorite TypeScript features — Template Literal Types — to enforce file name conventions in TypeScript.

js
type ImageExtension = `png` | `jp${`e` | ``}g` | `webp`;
type ImageFileName = `${Lowercase<string>}.${ImageExtension}`;
 
const goodName1: ImageFileName = 'doggy1.jpeg';
const goodName2: ImageFileName = 'doggy2.jpg';
const badName: ImageFileName = 'KittyCat.webp';
Type '"KittyCat.webp"' is not assignable to type '`${Lowercase<string>}.jpg` | `${Lowercase<string>}.jpeg` | `${Lowercase<string>}.png` | `${Lowercase<string>}.webp`'.2322Type '"KittyCat.webp"' is not assignable to type '`${Lowercase<string>}.jpg` | `${Lowercase<string>}.jpeg` | `${Lowercase<string>}.png` | `${Lowercase<string>}.webp`'.

I just love this feature. Enforcing string patterns with TypeScript makes me feel like a TS pro. 😅


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Here's Alex using one of my favorite TypeScript features — Template Literal Types — to enforce file name conventions in TypeScript.

js
type ImageExtension = `png` | `jp${`e` | ``}g` | `webp`;
type ImageFileName = `${Lowercase<string>}.${ImageExtension}`;
 
const goodName1: ImageFileName = 'doggy1.jpeg';
const goodName2: ImageFileName = 'doggy2.jpg';
const badName: ImageFileName = 'KittyCat.webp';
Type '"KittyCat.webp"' is not assignable to type '`${Lowercase<string>}.jpg` | `${Lowercase<string>}.jpeg` | `${Lowercase<string>}.png` | `${Lowercase<string>}.webp`'.2322Type '"KittyCat.webp"' is not assignable to type '`${Lowercase<string>}.jpg` | `${Lowercase<string>}.jpeg` | `${Lowercase<string>}.png` | `${Lowercase<string>}.webp`'.

I just love this feature. Enforcing string patterns with TypeScript makes me feel like a TS pro. 😅

Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2025-01-19T23:00:00+00:00) Template Literal Types for validating files names (#snippet). Retrieved from https://www.scien.cx/2025/01/19/template-literal-types-for-validating-files-names-snippet/

MLA
" » Template Literal Types for validating files names (#snippet)." Stefan Judis | Sciencx - Sunday January 19, 2025, https://www.scien.cx/2025/01/19/template-literal-types-for-validating-files-names-snippet/
HARVARD
Stefan Judis | Sciencx Sunday January 19, 2025 » Template Literal Types for validating files names (#snippet)., viewed ,<https://www.scien.cx/2025/01/19/template-literal-types-for-validating-files-names-snippet/>
VANCOUVER
Stefan Judis | Sciencx - » Template Literal Types for validating files names (#snippet). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/01/19/template-literal-types-for-validating-files-names-snippet/
CHICAGO
" » Template Literal Types for validating files names (#snippet)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2025/01/19/template-literal-types-for-validating-files-names-snippet/
IEEE
" » Template Literal Types for validating files names (#snippet)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2025/01/19/template-literal-types-for-validating-files-names-snippet/. [Accessed: ]
rf:citation
» Template Literal Types for validating files names (#snippet) | Stefan Judis | Sciencx | https://www.scien.cx/2025/01/19/template-literal-types-for-validating-files-names-snippet/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts