From a7034f1ae0a9716502a9244cff6be3a756fef72f Mon Sep 17 00:00:00 2001
From: Chris Cowan <agentme49@gmail.com>
Date: Mon, 28 Mar 2022 03:49:10 -0700
Subject: [PATCH] Add TypeScript config instructions to readme (#750)

This recommended configuration is inspired by Next.js's typescript template which contains a [file](https://github.com/vercel/next.js/blob/canary/packages/create-next-app/templates/typescript/next-env.d.ts) with a similar triple-slash directive that transitively imports styled-jsx's types.

Co-authored-by: Jiachi Liu <inbox@huozhi.im>
---
 readme.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/readme.md b/readme.md
index 6b7b0d97..2066c663 100644
--- a/readme.md
+++ b/readme.md
@@ -40,6 +40,9 @@ Code and docs are for v3 which we highly recommend you to try. Looking for style
   - [Some styles are missing in production](https://github.com/vercel/styled-jsx/issues/319#issuecomment-349239326)
   - [Build a component library with styled-jsx](#build-a-component-library-with-styled-jsx)
 - [Syntax Highlighting](#syntax-highlighting)
+- [ESLint](#eslint)
+- [TypeScript](#typescript)
+- [Credits](#credits)
 
 ## Getting started
 
@@ -1040,6 +1043,14 @@ If you're using `eslint-plugin-import`, the `css` import will generate errors, b
 "settings": {"import/core-modules": ["styled-jsx/css"] }
 ```
 
+## TypeScript
+
+If you're using TypeScript, then in order to allow `<style jsx>` tags to be properly understood by it, create a file named "styled-jsx.d.ts" anywhere within your project containing the following, or add this line to the top of any single existing .ts file within your project:
+
+```ts
+/// <reference types="styled-jsx" />
+```
+
 ## Credits
 
 - **Pedram Emrouznejad** ([rijs](https://github.com/rijs/fullstack)) suggested attribute selectors over my initial class prefixing idea.