docs: add workaround for TS custom commands

[marmaladebacon]

closes #27641

[netlify]

‼️ Deploy request for cypress-docs rejected.

Name	Link
🔨 Latest commit	91572f5

[CLAassistant]

All committers have signed the CLA.

[netlify]

✅ Deploy Preview for benevolent-cat-040f48 ready!

Name	Link
🔨 Latest commit	91572f5
🔍 Latest deploy log	https://app.netlify.com/sites/benevolent-cat-040f48/deploys/6513f03fd009550008c2a567
😎 Deploy Preview	https://deploy-preview-5454--benevolent-cat-040f48.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cypress-app-bot]

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.

[nagash77]

Hi @marmaladebacon you will need to sign the CLA before this PR can be merged.

[jaffrepaul]

The "@" actually creates a mailto: link in the markdown. Here are some edits to give more context

Suggested change

	From [email protected], if you are using TypeScript and have `sideEffects:false` set in your package.json, custom Cypress commands will not be registered by the common pattern of writing the commands in one file and having them be run as a side effect of importing the file. For example:
	```typescript title="/cypress/support/commands.ts"
	Cypress.Commands.add("login", (email, password) => { ... })
	```
	```typescript title="/cypress/support/e2e.ts"
	import './commands'
	```
	To work around this issue, you can wrap the Cypress commands in a function that will be imported by the support file.
	```typescript title="/cypress/support/commands.ts"
	export function registerCommands(){
	Cypress.Commands.add("login", (email, password) => { ... })
	}
	```
	```typescript title="/cypress/support/e2e.ts"
	import { registerCommands } from './commands'
	registerCommands()
	```
	Cypress [12.17.4](/guides/references/changelog#12-17-4) includes a webpack upgrade (v4 to v5), which [tree shakes out](https://webpack.js.org/blog/2020-10-10-webpack-5-release/#inner-module-tree-shaking) any side-effects or files that only include side-effects.
	If you are using TypeScript and have `sideEffects:false` set in your package.json, custom Cypress commands will not be registered by the common pattern of writing the commands in one file and having them be run as a side effect of importing the file. For example:
	```typescript
	// cypress/support/commands.ts
	Cypress.Commands.add("login", (email, password) => { ... })

// cypress/support/e2e.ts

import './commands'

To support sideEffects:false, you can wrap the Cypress commands in a function that will be imported by the support file.

// cypress/support/commands.ts

export function registerCommands(){
  Cypress.Commands.add("login", (email, password) => { ... })
}

// cypress/support/e2e.ts

import { registerCommands } from './commands'
registerCommands()

[marmaladebacon]

thanks, i've added the suggested changes in the latest commit. Let me know if i missed anything, i had to do it manually because the markdown syntax probably broke halfway through the suggestion.

[jaffrepaul]

Thank you for the contribution @marmaladebacon This was getting crazier and crazier with the formatting. Instead of wrestling with the markdown issues in the GH web UI, I just ported this over to this PR and merged it. Much appreciated!