diff --git a/docs/configure/typescript.md b/docs/configure/typescript.md
index 353d8dda80e5..e86b7df407f3 100644
--- a/docs/configure/typescript.md
+++ b/docs/configure/typescript.md
@@ -18,6 +18,11 @@ Each framework uses the base configuration unless otherwise specified:
 
 To make it easier to configure Typescript handling, use the `typescript` field in your [`.storybook/main.js`](./overview.md#configure-story-rendering).
 
+<div class="aside">
+If you want the configration to be main.ts, you will need [ts-node](https://github.com/TypeStrong/ts-node) as a dependency.
+</div>
+
+
 The following code snippets shows the fields for you to use with TypeScript:
 
 <!-- prettier-ignore-start -->
@@ -61,4 +66,4 @@ Next time you restart your Storybook the extra props will also be in the UI.
 
 <div class="aside">
 If you run into an issue where the extra props aren't included, check how your component is being exported. If it's using a default export, change it to a named export and the extra props will be included as well.
-</div>
\ No newline at end of file
+</div>