[#157113003] Migrate app code to TypeScript #98
Conversation
Flow type defs generated with flowgen
Affected stories
tslibAuthor: Microsoft Corp. Description: Runtime library for TypeScript helper functions Homepage: http://typescriptlang.org/
|
| Created | 12 months ago |
| Last Updated | 1 day ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 26 |
| Direct Dependencies | chalk, find-root, jju, semver and source-map |
README
react-native-typescript-transformer
Seamlessly use TypeScript with react-native >= 0.45
Usage
Step 1: Install
yarn add --dev react-native-typescript-transformer typescript
Step 2: Configure TypeScript
Make sure your tsconfig.json has these compiler options:
{
"compilerOptions": {
"target": "es2015",
"jsx": "react",
"noEmit": true,
"moduleResolution": "node",
},
"exclude": [
"node_modules",
],
}See tsconfig.json Notes for more advanced configuration details.
Step 3: Configure the react native packager
Add this to your rn-cli.config.js (make one if you don't have one already):
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
}
}If you need to run the packager directly from the command line, run the following
react-native start --config /absolute/path/to/rn-cli.config.js
Step 4: Write TypeScript code!
Note that the platform-specific index files (index.ios.js, index.android.js, etc)
still need to be .js files, but everything else can be TypeScript.
You probably want typings for react and react-native
yarn add --dev @types/react @types/react-native
Note that if you run yarn tsc it will act as a type checker rather than a compiler. Run it with --watch to catch dev-time errors in all files, not just the one you're editing.
Use tslib (Optional)
yarn add tslib
in tsconfig.json
{
"compilerOptions": {
+ "importHelpers": true,
}
}Doing this should reduce your bundle size. See this blog post for more details.
Use absolute paths (Optional)
Absolute paths needs to have support from both the TypeScript compiler and the react-native packager.
This section will show you how to work with project structures like this:
<rootDir>
├── src
│ ├── package.json
│ ├── App.tsx
│ ├── components
│ │ ├── Banana.tsx
│ ├── index.tsx
├── index.ios.js
├── package.json
├── tsconfig.json
Where you want to be able to import Banana from 'src/components/Banana' from any .ts(x) file, regardless of its place in the directory tree.
TypeScript
In tsconfig.json:
{
"compilerOptions": {
+ "baseUrl": "."
}
}react-native
For react-native you need to add one or more package.json files. These only need to contain the "name" field, and should be placed into any folders in the root of your project that you want to reference with an absolute path. The "name" field's value should be the name of the folder. So for me, I just added one file at src/package.json with the contents {"name": "src"}.
Jest (Optional)
If you use Jest as a test runner, add the following in your root package.json:
{
"jest" {
+ "modulePaths": ["<rootDir>"]
}
}tsconfig.json Notes
-
If you enable synthetic default imports with the
"allowSyntheticDefaultImports"flag, be sure to set"module"to something like "es2015" to allow the es6 import/export syntax to pass through the TypeScript compiler untouched. Then Babel can compile those statements while emitting the necessary extra code to make synthetic default imports work properly.This is neccessary until TypeScript implements suport for synthetic default imports in emitted code as well as in the type checker. See Microsoft/TypeScript#9562.
-
"target"can be anything supported by your project's Babel configuration. -
"jsx"can also be"react-native"or"preserve", which are functionally identical in the context of a react-native-typescript-transformer project. In this case, the JSX syntax is compiled by Babel instead of TypeScript -
The source map options are not useful
-
You probably want to specify some base typings with the
"lib"option. I've had success with the following:{ "compilerOptions": { + "lib": [ "dom", "es2015", "es2016" ], } }
Jest notes
Follow the react-native setup guide for ts-jest.
Alternatively, if you want to use exactly the same transformation code for both Jest and react-native check out this comment.
Note that there have been no reports of problems arising from differences between code compiled by the ts-jest transformer and code compiled by react-native-typescript-transformer. Additionally, ts-jest takes care of a lot of edge cases and is more configurable.
Avoid cyclical dependencies
If you're transitioning an app from tsc to react-native-typescript-transformer, you might see runtime errors which involve imported modules being undefined. You almost certainly have cyclical inter-module dependencies which manifest during your app's initialization. e.g. if ModuleA is undefined in ModuleB it means that ModolueA (in)directly imports ModuleB.
tsc seems to be able to mitigate some instances of these cyclical dependencies when used as a whole-app compiler. Unfortunately the module-at-a-time compilation approach that react-native's bundler supports does not permit the same optimizations.
Be especially careful of "umbrella export" files which can easily introduce these cycles.
License
MIT
ts-jest
Author: Kulshekhar Kabra
Description: A preprocessor with sourcemap support to help use Typescript with Jest
Homepage: https://github.com/kulshekhar/ts-jest#readme
| Created | over 1 year ago |
| Last Updated | 8 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 74 |
| Direct Dependencies | babel-core, babel-plugin-istanbul, babel-plugin-transform-es2015-modules-commonjs, babel-preset-jest, cpx, fs-extra, jest-config, pkg-dir and yargs |
| Keywords | jest, typescript, sourcemap, react and testing |
tslint
Author: Unknown
Description: An extensible static analysis linter for the TypeScript language
Homepage: http://npmjs.com/package/tslint
| Created | over 4 years ago |
| Last Updated | about 2 months ago |
| License | Apache-2.0 |
| Maintainers | 1 |
| Releases | 161 |
| Direct Dependencies | babel-code-frame, builtin-modules, chalk, commander, diff, glob, js-yaml, minimatch, resolve, semver, tslib and tsutils |
| Keywords | cli, typescript and linter |
README
TSLint
TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.
TSLint supports:
- an extensive set of core rules
- custom lint rules
- custom formatters (failure reporters)
- inline disabling and enabling of rules with comment flags in source code
- configuration presets (
tslint:latest,tslint-react, etc.) and plugin composition - automatic fixing of formatting & style violations
- integration with MSBuild, Grunt, Gulp, Atom, Eclipse, Emacs, Sublime, Vim, Visual Studio 2015, Visual Studio 2017, Visual Studio code, WebStorm and more
Installation & Usage
Please refer to the full installation & usage documentation on the TSLint website. There, you'll find information about
- configuration,
- core rules,
- core formatters, and
- customization of TSLint.
- inline disabling and enabling of rules with comment flags
Custom Rules & Plugins
Custom rule sets from Palantir
- tslint-react - Lint rules related to React & JSX.
- tslint-blueprint - Lint rules to enforce best practices with blueprintjs libraries
Custom rule sets from the community
If we don't have all the rules you're looking for, you can either write your own custom rules or use rules implementations developed by the community. The repos below are a good source of custom rules:
- ESLint rules for TSLint - Improve your TSLint with the missing ESLint Rules
- tslint-microsoft-contrib - A set of TSLint rules used on some Microsoft projects
- codelyzer - A set of tslint rules for static code analysis of Angular TypeScript projects
- vrsource-tslint-rules
- tslint-immutable - TSLint rules to disable mutation in TypeScript
- tslint-consistent-codestyle - TSLint rules to enforce consistent code style in TypeScript
- tslint-sonarts - Bug-finding rules based on advanced code models to spot hard to find errors in TypeScript
- tslint-clean-code - A set of TSLint rules inspired by the Clean Code handbook
- rxjs-tslint-rules - TSLint rules for RxJS
Development
Prerequisites:
nodev7+yarnv1.0+
Quick Start
git clone git@github.com:palantir/tslint.git --config core.autocrlf=input --config core.eol=lf
yarn
yarn compile
yarn testCreating a new release
- Bump the version number in
package.jsonandsrc/linter.ts - Add release notes in
CHANGELOG.md- Use
./scripts/generate-changelog.js(after building it withtsc -p scripts) to generate the changelog diff. This script expects a Github.com personal access token to exist at~/github_token.txtwith "repo" permissions.
- Use
- Commit with message
Prepare release <version> - Push your branch to GitHub and make a PR
- Once your PR is merged, wait for the tests to pass on CircleCI for develop
- Create a "Release" on GitHub with the proper tag version and notes from the changelog.
- The tag should be identical to the version in
package.json
- The tag should be identical to the version in
- Run
yarn run publish:local
New dependencies added: tslib, @types/color, @types/jest, @types/lodash, @types/react, @types/react-native, @types/react-native-fs, @types/react-native-i18n, @types/react-native-mixpanel, @types/react-navigation, @types/react-redux, @types/redux-form, @types/redux-logger, @types/redux-saga, @types/stacktrace-js, @types/validator, react-native-typescript-transformer, ts-jest, tslint, tslint-config-prettier, tslint-immutable, tslint-plugin-prettier, tslint-react, tslint-sonarts and typescript.
tslint-immutable
Author: Jonas Kello
Description: TSLint rules to disable mutation in TypeScript.
Homepage: https://github.com/jonaskello/tslint-immutable#readme
| Created | about 2 years ago |
| Last Updated | 9 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 35 |
| Keywords | tslint and immutability |
tslint-plugin-prettier
Author: Ika
Description: Runs Prettier as a TSLint rule and reports differences as individual TSLint issues.
Homepage: https://github.com/ikatyang/tslint-plugin-prettier#readme
| Created | 9 months ago |
| Last Updated | 7 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 4 |
| Direct Dependencies | eslint-plugin-prettier and tslib |
| Keywords | prettier, tslint, tslint-plugin and tslint-rules |
README
tslint-plugin-prettier
Runs Prettier as a TSLint rule and reports differences as individual TSLint issues.
NOTE: This project uses official reporter from eslint-plugin-prettier.
Sample
a();;;
~~
;;;
~~~ [Delete `;;⏎;;;`]var foo = ''
~~ [Replace `''` with `"";⏎`]var foo= "";
~ [Insert `·`]Install
# using npm
npm install --save-dev tslint-plugin-prettier prettier
# using yarn
yarn add --dev tslint-plugin-prettier prettierUsage
(tslint.json)
for tslint@5.0.0+
{
"extends": ["tslint-plugin-prettier"],
"rules": {
"prettier": true
}
}for tslint@5.2.0+
{
"rulesDirectory": ["tslint-plugin-prettier"],
"rules": {
"prettier": true
}
}NOTE: To use this plugin, it'd better to also use tslint-config-prettier to disable all prettier-related rules, so as to avoid conflicts between existed rules.
Options
If there is no option provided, it'll try to load config file if possible (require prettier@1.7.0+), uses Prettier's default option if not found.
{
"extends": ["tslint-plugin-prettier"],
"rules": {
"prettier": true
}
}If you'd like to specify where to find the config file, just put the search path (relative to process.cwd()) in the second argument, the following example shows how to use the config file from <cwd>/configs/.prettierrc:
{
"extends": ["tslint-plugin-prettier"],
"rules": {
"prettier": [true, "configs"]
}
}If you'd like to specify options manually, just put Prettier Options in the second argument, for example:
{
"extends": ["tslint-plugin-prettier"],
"rules": {
"prettier": [true, { "singleQuote": true }]
}
}Development
# lint
yarn run lint
# build
yarn run build
# test
yarn run testRelated
License
MIT © Ika
tslint-react
Author: Unknown
Description: Lint rules related to React & JSX for TSLint
Homepage: https://github.com/palantir/tslint-react#readme
| Created | almost 2 years ago |
| Last Updated | 2 months ago |
| License | Apache-2.0 |
| Maintainers | 1 |
| Releases | 24 |
| Direct Dependencies | tsutils |
README
tslint-react
Lint rules related to React & JSX for TSLint.
Usage
tslint-react has peer dependencies on TSLint and TypeScript.
To use these lint rules with the default preset, use configuration inheritance via the extends keyword.
Here's a sample configuration where tslint.json lives adjacent to your node_modules folder:
{
"extends": ["tslint:latest", "tslint-react"],
"rules": {
// override tslint-react rules here
"jsx-wrap-multiline": false
}
}To lint your .ts and .tsx files you can simply run tslint -c tslint.json 'src/**/*.{ts,tsx}'.
Semantic versioning
The built-in configuration preset you get with "extends": "tslint-react" is semantically versioned in a manner similar to TSLint's built-in presets and the TypeScript language itself. As new rules are added to tslint-react across minor versions, stricter checks may be enabled here. Your code is not guaranteed to continue passing checks across these version bumps. If you wish to ensure that npm upgrade or yarn upgrade never breaks your build, declare a tilde dependency on this package (e.g. "~1.0.0").
Rules
jsx-alignment- Enforces a consistent style for multiline JSX elements which promotes ease of editing via line-wise manipulations
as well as maintainabilty via small diffs when changes are made.
// Good: const element = <div className="foo" tabIndex={1} > {children} </div>; // Also Good: <Button appearance="pretty" disabled label="Click Me" size={size} />
- Enforces a consistent style for multiline JSX elements which promotes ease of editing via line-wise manipulations
jsx-ban-elements(since v3.4.0)- Allows blacklisting of JSX elements with an optional explanatory message in the reported failure.
jsx-ban-props(since v2.3.0)- Allows blacklisting of props in JSX with an optional explanatory message in the reported failure.
jsx-boolean-value(since v2.5.0)- When using a boolean attribute in JSX, you can set the attribute value to true or omit the value. This rule will enforce one or the other to keep consistency in your code.
- Rule options:
["always", "never"] - Default is set to
always.
jsx-curly-spacing(since v1.1.0)- Requires or bans spaces between curly brace characters in JSX.
- Rule options:
["always", "never"] - Includes automatic code fix
jsx-equals-spacing(since v3.2.0)- Requires or bans spaces before and after the
=token in JSX element attributes. - Rule options:
["always", "never"] - Includes automatic code fix
- Requires or bans spaces before and after the
jsx-key(since v3.2.0)- Warns for missing
keyprops in JSX element array literals and inside return statements ofArray.prototype.mapcallbacks.- N.B. This rule only does a simple check for
.map(...)syntax and does not inspect computed types of expressions. As such, it may produce false positives if you use APIs that look similar to.map().
- N.B. This rule only does a simple check for
- Rule options: none
- Warns for missing
jsx-no-bind(since v2.6.0)- Forbids function binding in JSX attributes. This has the same intent as
jsx-no-lambdain helping you avoid excessive re-rendres. - Note that this currently only does a simple syntactic check, not a semantic one (it doesn't use the type checker). So it may have some
rare false positives if you define your own.bindfunction and supplythisas a parameter. - Rule options: none
- Forbids function binding in JSX attributes. This has the same intent as
jsx-no-lambda- Creating new anonymous functions (with either the
functionsyntax or ES2015 arrow syntax) inside therendercall stack works against pure component rendering. When doing an equality check between two lambdas, React will always consider them unequal values and force the component to re-render more often than necessary. - Rule options: none
- Creating new anonymous functions (with either the
jsx-no-multiline-js- Disallows multiline JS expressions inside JSX blocks to promote readability
- Rule options: none
jsx-no-string-ref- Passing strings to the
refprop of React elements is considered a legacy feature and will soon be deprecated.
Instead, use a callback. - Rule options: none
- Passing strings to the
jsx-use-translation-function(since v2.4.0)- Enforces use of a translation function. Plain string literals are disallowed in JSX when enabled.
- Rule options:
["allow-punctuation", "allow-htmlentities"] - Off by default
jsx-self-close(since v0.4.0)- Enforces that JSX elements with no children are self-closing.
// bad <div className="foo"></div> // good <div className="foo" />
- Rule options: none
jsx-wrap-multiline(since v2.1)- Enforces that multiline JSX expressions are wrapped with parentheses.
- Opening parenthesis must be followed by a newline.
- Closing parenthesis must be preceded by a newline.
// bad const button = <button type="submit"> Submit </button>; // good const button = ( <button type="submit"> Submit </button> );
Development
We track rule suggestions on Github issues -- here's a useful link
to view all the current suggestions. Tickets are roughly triaged by priority (P1, P2, P3).
We're happy to accept PRs for new rules, especially those marked as Status: Accepting PRs.
If submitting a PR, try to follow the same style conventions as the core TSLint project.
Quick Start (requires Node v6+, yarn v0.22+):
yarnyarn verifyyarn lint
Changelog
See the Github release history.
tslint-sonarts
Author: Unknown
Description: SonarTS rules for TSLint
Homepage: https://github.com/SonarSource/SonarTS
| Created | 11 months ago |
| Last Updated | about 2 months ago |
| License | LGPL-3.0 |
| Maintainers | 3 |
| Releases | 34 |
| Direct Dependencies | immutable |
| Keywords | sonarts, sonarqube, typescript and tslint |
README
ERROR: No README data found!
typescript
Author: Microsoft Corp.
Description: TypeScript is a language for application scale JavaScript development
Homepage: http://typescriptlang.org/
| Created | over 5 years ago |
| Last Updated | about 7 hours ago |
| License | Apache-2.0 |
| Maintainers | 1 |
| Releases | 993 |
| Keywords | TypeScript, Microsoft, compiler, language and javascript |
tslint-config-prettier
Author: Alex Jover Morales
Description: Do you wanna use tslint and prettier without conflicts? tslint-config-prettier disables all conflicting rules that may cause such problems. Prettier takes care of formatting and tslint the rest.
Homepage: https://github.com/alexjoverm/tslint-config-prettier#readme
| Created | 11 months ago |
| Last Updated | 7 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 13 |
| Keywords | lint, tslint, ts-lint, prettier, config and typescript |
README
tslint-config-prettier
👮 tslint + 💅 prettier = 😍
Do you want to use tslint and prettier without conflicts? tslint-config-prettier disables all conflicting rules that may cause such problems. Prettier takes care of the formatting whereas tslint takes care of all the other things.
Get started
npm install -D tslint-config-prettierMake sure you've already set up tslint and prettier.
Then, extend your tslint.json, and make sure tslint-config-prettier is at the end:
{
"extends": [
"tslint:latest",
"tslint-config-prettier"
]
}More configuration
tslint-config-prettier also turns off formatting rules from the following rulesets, so you can use them safely.
- codelyzer
- tslint
- tslint-consistent-codestyle
- tslint-divid
- tslint-eslint-rules
- tslint-immutable
- tslint-microsoft-contrib
- tslint-misc-rules
- tslint-plugin-ikatyang
- tslint-react
- vrsource-tslint-rules
{
"extends": [
"tslint:latest",
"tslint-react",
"tslint-eslint-rules",
"tslint-config-prettier"
]
}CLI helper tool
tslint-config-prettier is shipped with a little CLI tool to help you check if your configuration contains any rules that are in conflict with Prettier. (require tslint installed)
In order to execute the CLI tool, first add a script for it to package.json:
{
"scripts": {
"tslint-check": "tslint-config-prettier-check ./tslint.json"
}
}Then run npm run tslint-check.
Tutorials
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Related
- tslint-plugin-prettier - Runs Prettier as a TSLint rule and reports differences as individual TSLint issues.
Credits
Made with ❤️ by @alexjoverm and all its contributors
Generated by 🚫 dangerJS
Codecov Report
@@ Coverage Diff @@
## master #98 +/- ##
=========================================
+ Coverage 37.26% 100% +62.73%
=========================================
Files 17 2 -15
Lines 212 24 -188
Branches 39 2 -37
=========================================
- Hits 79 24 -55
+ Misses 114 0 -114
+ Partials 19 0 -19
Continue to review full report at Codecov.
|
missing the source map stuff used by the error handler
…tale/italia-app into experimental-typescript
…tale/italia-app into experimental-typescript
…lia-app into experimental-typescript
cloudify
changed the title
Experimental work for converting Flow to TypeScript