Item 76: Create an Accurate Model of Your Environment

Things to Remember

• Your code runs in a particular environment. TypeScript will do a better job of checking your code if you create an accurate static model of that environment.
• Model global variables and libraries that are loaded onto a web page along with your code.
• Match versions between type declarations and the libraries and runtime environment that you use.
• Use multiple tsconfig.json files and project references to model distinct environments within a single project (for example client and server).

Code Samples

// user-info-global.d.ts
interface UserInfo {
  name: string;
  accountId: string;
}
declare global {
  interface Window {
    userInfo: UserInfo;
  }
}

💻 playground

---

import sunrisePath from './images/beautiful-sunrise.jpg';
//                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Cannot find module './images/beautiful-sunrise.jpg' or its type declarations.

💻 playground

---

// webpack-imports.d.ts
declare module '*.jpg' {
  const src: string;
  export default src;
}

💻 playground