104 lines
2 KiB
Markdown
104 lines
2 KiB
Markdown
---
|
|
tags:
|
|
- typescript
|
|
---
|
|
|
|
# Setup and configuration
|
|
|
|
## Installation and configuration
|
|
|
|
TypeScript offers custom installations for most modern JS-based frameworks
|
|
including Webpack, React.js and Vue.js. The instructions below cover minimal TS
|
|
set-up outside of a specific framework. TypeScript adds an additional step to
|
|
any build process since your code must compile to JS before any bundling and
|
|
transpilation can occur.
|
|
|
|
## Installation
|
|
|
|
```
|
|
mkdir typescript-project
|
|
cd typescript-project
|
|
npm i typescript --save-dev
|
|
```
|
|
|
|
## Initialise project
|
|
|
|
```
|
|
npx tsc --init
|
|
```
|
|
|
|
## Basic configuration
|
|
|
|
```json
|
|
"compilerOptions": {
|
|
"target" : "es2020", //es2015 for prod
|
|
"module" : "es2020",
|
|
"allowJs": true,
|
|
"checkJs": true,
|
|
"strict": true,
|
|
"esModuleInterop": true
|
|
}
|
|
```
|
|
|
|
### Specify output paths (for production code)
|
|
|
|
```json
|
|
"compilerOptions": {
|
|
...
|
|
"outDir": "dist",
|
|
"sourceMap": true,
|
|
}
|
|
```
|
|
|
|
### Compile-time commands
|
|
|
|
```
|
|
tsc --noEmit
|
|
```
|
|
|
|
```
|
|
tsc --noEmit --watch
|
|
```
|
|
|
|
## Global requirements
|
|
|
|
```
|
|
npm install -g typescript
|
|
npm install -g ts-node
|
|
```
|
|
|
|
`ts-node` allows you to run TS files the way you would with standard JS, i.e.
|
|
`node [filename]`, you just use `ts-node filename` .
|
|
|
|
This is a convenience that saves you compiling from TS → JS and then running
|
|
Node against the compiled JS. Which is useful for debugging and checking values
|
|
as you work.
|
|
|
|
## Imports and exports
|
|
|
|
You may wish to define your custom types outside of their application, for
|
|
instance in a `/types/` directory. The custom type or types can then be imported
|
|
using standard ES6 imports:
|
|
|
|
```tsx
|
|
export type Article = {
|
|
price: number,
|
|
}
|
|
|
|
export type AnotherType = {
|
|
...
|
|
}
|
|
```
|
|
|
|
```tsx
|
|
import { Article, AnotherType } from "./types/allTypes.js";
|
|
import Article from "./types/allTypes.js";
|
|
```
|
|
|
|
TypeScript also provides a specific import keyword `type` so that you can
|
|
distinguish type imports from other module imports. This is handy when you have
|
|
multiple components in the one file:
|
|
|
|
```tsx
|
|
import type { Article } from "./types/allTypes.js";
|
|
```
|