## Migrating from JavaScript to TypeScript
1. Install TypeScript
npm install --save-dev typescript
2. Initialize TypeScript with a `tsconfig.json` file.
To automatically generate a `tsconfig.json` file, run the following command:
npx tsc --init
3. Update the `tsconfig.json` file to match Solid's configuration
Update the contents of the `tsconfig.json` file to match the following:
```json
{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"types": ["vite/client"],
"noEmit": true,
"isolatedModules": true
}
}
```
4. Create a TypeScript or `.tsx` file to test the setup
Create a new file and add the following code:
```typescript
import { Component } from "solid-js";
function MyTsComponent(): Component {
return (
<div>
<h1>This is a TypeScript component</h1>
</div>
);
}
export default MyTsComponent;
```
To use in an existing JavaScript component, import the TypeScript component:
```javascript
import MyTsComponent from "./MyTsComponent";
function MyJsComponent() {
return (
<>
{/* ... */}
<MyTsComponent />
</>
);
}
```
::: info
**Note:** If you wish to change the entry point file from `index.jsx` to `index.tsx`, you would need to modify the `src` attribute in `<script>` to look like the following:
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>
```
:::
## Setting up environment variables
Solid is built on top of [Vite](https://vitejs.dev/), which offers a convenient way to handle environment variables. The following steps will show how to set up environment varaibles in a Solid project:
1. Create a `.env` file
In the root directory of the project, create a file called `.env`. This file will store environment variables in the `key = value` format.
::: info
**Note:** To prevent accidental exposure of environment variables to the client, only variables prefixed with `VITE_` will be exposed.
For example:
```
VITE_SECRET_KEY = 123hello
DB_PASSWORD = foobar
```
Only the `VITE_SECRET_KEY` will be exposed to client source code, while `DB_PASSWORD` will not, as shown below.
```js
console.log(import.meta.env.VITE_SECRET_KEY) // 123hello
console.log(import.meta.env.DB_PASSWORD) // undefined
```
:::
2. Accessing the environment variables in your code
In your Solid code, you can access environment variables using `import.meta.env`. Vite will automatically inject the environment variables into your application.
```javascript
function MyComponent() {
return (
<div>
<h2>Component with environment variable used {import.meta.env.VITE_VARIABLE_NAME}</h2>
</div>
)
}
export default MyComponent;
```
For more information on environment variables in Vite and enabling TypeScript intellisense for environment variables, please refer to the [Vite Documentation](https://vitejs.dev/guide/env-and-mode.html#env-files).
Sign in with Wallet
Connect another wallet