https://github.com/code-star/rd-2019-01-18-flow-vs-typescript
https://github.com/code-star/rd-2019-01-18-flow-vs-typescript
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/code-star/rd-2019-01-18-flow-vs-typescript
- Owner: code-star
- Created: 2019-01-18T14:50:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-21T08:18:05.000Z (over 7 years ago)
- Last Synced: 2025-03-12T01:32:58.728Z (over 1 year ago)
- Language: JavaScript
- Size: 25.4 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Getting to grips with Flow
### VSCode
If you've used TypeScript before with VSCode, you may need to do some settings to stop it from bothering you ('Types can only be used in files with a .ts extension').
You can disable it permanently or for just your Flow workspace, by disabling `javascript.validate.enable` in your settings.
### Compilation
There's two simple layers of compilation required to get from the current Flow syntax, back to valid JavaScript that your browser will accept.
##### flow-remove-types
This one is quite literal in it's function. It literally removes the type syntax that Flow uses. Fun fact: It leaves spaces where the type info used to be, so it does more of a replace than anything else.
```
function foo(x ) {
if (x) {
return x;
}
return "default string";
}
class Test {
constructor(name ) {
this.name = name;
}
}
```
##### babel
Babel is about as straightforward to setup, with one additional configuration file to add, `.babelrc`:
```
{
"presets": ["flow"]
}
```
And from there it's the same thing: `babel src/ -d dist-babel/`
This one does clean up the spaces neatly.
### Import / Export
Exporting a type is as you would expect: `export opaque type FileID = string`
Importing is a bit different, `import { type FileID} from './index'`, if you forget the `type` in this part; it will complain about using it as a value instead of a type.
### Differences
- Predicate Functions
- Classes are limited; no private / public / etc
#### Predicate Functions
Adds the `%checks` syntax to a function. It's return value is then used by the compiler to make non-null assumptions of variables. This is currently not available in TypeScript.
#### Limited class access modifiers
In Flow there are no (known) ways to indicate `private` or `public` functions or variables.
## Conclusion
Flow is more of a small layer on top of your code. In the end you're stil writing raw JavaScript but mixing in the Flow specific type syntax.
- Pro: Well, it's close to JavaScript.
- Con: You have non-JS in your `.js` files and in your repository. You can't run a `.js` file in your browser with Flow syntax in it.
TypeScript is a separate language. The extension changes and that makes it feel a bit cleaner. One could argue that you could do the same with Flow's files of course.
A con of TypeScript in our opinion is that your code is transformed into garbled up JavaScript that is hardly human-readable anymore. You all of a sudden require SourceMaps to make your code readable and debugable, where with Flow you're just running with raw Javascript.
It's a matter of taste. Flow definitely is easy to setup (although VSCode is a bit TypeScript biased) and has little effect in your build process, where TypeScript is a full on superset and therefore a different language, that requires compilation.