If you build for the web, you have probably seen TypeScript questions pop up in team chats and forums. Some developers love the functionality it offers, others worry it will slow them down.<\/p>\n\n\n\n
What is TypeScript, and how is it related to JavaScript? Is it just a different language or a set of build-time checks? How do I adopt it incrementally in an existing JS codebase, and what are the benefits and tradeoffs for front-end apps and Node services?<\/em><\/p>\n\n\n\n TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. You write modern JS plus optional static types, then the TypeScript compiler erases those types and emits standards-compliant JS that runs anywhere JS runs.<\/p>\n\n\n\n Apps often pipe dynamic media into components. You can model this with types and keep delivery concerns clean, for example by standardizing an image URL<\/a> contract or adopting modern formats for better performance. <\/p>\n\n\n\n After you have the generic approach in place, you can leverage Cloudinary for typed, URL-based transformations and delivery without reinventing media pipelines. Our Node.js SDK<\/a> already works nicely with TS out of the box.<\/p>\n\n\n On the server you can upload assets from Node with TypeScript as well:<\/p>\n\n\n TypeScript does not change runtime performance by itself, but typed code often makes it easier to enforce consistent media strategies like responsive image sets and format negotiation, which improves page speed and UX. If performance is a priority across your stack, check out what makes an optimized website<\/a> first.<\/p>\n\n\n\nAnswer:<\/h2>\n\n\n\n
How TypeScript relates to JavaScript<\/h3>\n\n\n\n
\n
Why teams adopt TypeScript<\/h3>\n\n\n\n
\n
Quick example<\/h3>\n\n\n
\/\/ JavaScript<\/span>\nfunction<\/span> add<\/span>(a, b<\/span>) <\/span>{ return<\/span> a + b; }\nconsole<\/span>.log(add(1<\/span>, \"2\"<\/span>)); \/\/ \"12\" string concatenation<\/span>\n\n\/\/ TypeScript<\/span>\nfunction<\/span> addTS<\/span>(a: number, b: number<\/span>): number<\/span> <\/span>{\n\u00a0 return<\/span> a + b;\n}\n\/\/ addTS(1, \"2\"); \/\/ Compile error: string is not assignable to number<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nCore TypeScript features in practice<\/h3>\n\n\n
interface User {\n\u00a0 id<\/span>: string;\n\u00a0 name: string;\n\u00a0 photoUrl?: string; \/\/ optional<\/span>\n}\n\nconst<\/span> u: User = { id<\/span>: \"1\"<\/span>, name<\/span>: \"Ada\"<\/span> };\n\ntype Result<T> = { ok<\/span>: true<\/span>; value: T } | { ok<\/span>: false<\/span>; error: string };\n\nasync<\/span> function<\/span> fetchJson<\/span><T<\/span>>(url: string<\/span>): Promise<\/span><Result<\/span><T<\/span>>> <\/span>{\n\u00a0 const<\/span> res = await<\/span> fetch(url);\n\u00a0 if<\/span> (!res.ok) return<\/span> { ok<\/span>: false<\/span>, error<\/span>: res.statusText };\n\u00a0 return<\/span> { ok<\/span>: true<\/span>, value<\/span>: await<\/span> res.json() as<\/span> T };\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nGetting started in an existing JS repo<\/h3>\n\n\n\n
\n
npm i -D typescript<\/code><\/li>\n\n\n\nnpx tsc --init<\/code><\/li>\n\n\n\n{\n\u00a0 \"compilerOptions\"<\/span>: {\n\u00a0 \u00a0 \"target\"<\/span>: \"ES2020\"<\/span>,\n\u00a0 \u00a0 \"module\"<\/span>: \"ESNext\"<\/span>,\n\u00a0 \u00a0 \"strict\"<\/span>: true<\/span>,\n\u00a0 \u00a0 \"allowJs\"<\/span>: true<\/span>,\n\u00a0 \u00a0 \"checkJs\"<\/span>: false<\/span>,\n\u00a0 \u00a0 \"esModuleInterop\"<\/span>: true<\/span>,\n\u00a0 \u00a0 \"skipLibCheck\"<\/span>: true<\/span>\n\u00a0 },\n\u00a0 \"include\"<\/span>: [\"src\"<\/span>]\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n\n
npm i -D @types\/node<\/code> and other @types<\/code> packages for libraries that do not ship types.<\/li>\n<\/ol>\n\n\n\nInterop tips<\/h3>\n\n\n\n
\n
allowJs<\/code> on while migrating. You can still type-check JS via JSDoc if desired.<\/li>\n\n\n\ntsc --noEmit<\/code> in CI to enforce type safety without building artifacts twice.<\/li>\n<\/ul>\n\n\n\nFront-end and Node specifics<\/h3>\n\n\n\n
\n
Media handling example with TypeScript<\/h3>\n\n\n\n
How Cloudinary can fit into a TypeScript workflow<\/h3>\n\n\n\n
import<\/span> { Cloudinary } from<\/span> \"@cloudinary\/url-gen\"<\/span>;\nimport<\/span> { fill } from<\/span> \"@cloudinary\/url-gen\/actions\/resize\"<\/span>;\n\nconst<\/span> cld = new<\/span> Cloudinary({ cloud<\/span>: { cloudName<\/span>: \"demo\"<\/span> } });\n\nconst<\/span> img = cld\n\u00a0 .image(\"samples\/landscapes\/beach\"<\/span>)\n\u00a0 .format(\"auto\"<\/span>)\u00a0 \/\/ serve optimal format<\/span>\n\u00a0 .quality(\"auto\"<\/span>) \/\/ smart quality<\/span>\n\u00a0 .resize(fill().width(800<\/span>).height(600<\/span>));\n\nconst<\/span> url: string = img.toURL(); \/\/ typed string<\/span>\n\/\/ Use in your components<\/span>\ndocument<\/span>.getElementById(\"hero\"<\/span>)?.setAttribute(\"src\"<\/span>, url);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nimport<\/span> { v2 as<\/span> cloudinary } from<\/span> \"cloudinary\"<\/span>;\n\ncloudinary.config({\n\u00a0 cloud_name<\/span>: process.env.CLOUDINARY_CLOUD_NAME!,\n\u00a0 api_key<\/span>: process.env.CLOUDINARY_API_KEY!,\n\u00a0 api_secret<\/span>: process.env.CLOUDINARY_API_SECRET!\n});\n\nawait<\/span> cloudinary.uploader.upload(\"local\/path.jpg\"<\/span>, { folder<\/span>: \"profiles\"<\/span> });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nPerformance note<\/h3>\n\n\n\n
TL;DR<\/h3>\n\n\n\n
\n
allowJs<\/code>, add types where they pay off, and enforce tsc --noEmit<\/code> in CI.<\/li>\n\n\n\nLearn More<\/h2>\n\n\n\n