-
-
Notifications
You must be signed in to change notification settings - Fork 80
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TypeScript support #136
TypeScript support #136
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you should also create a tsconfig.json
like this
{
"compilerOptions": {
"noEmit": true,
"lib": [],
"types": []
},
"files": ["index.d.ts"]
}
@xg-wang I filed a bug for the NPM issue we ran into https://npm.community/t/installing-dependency-under-a-custom-name-fails-silently/3104 |
Great to know there's a pending PR in npm to fix the issue (which I'll document more about when this PR proceeds). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@xg-wang - ok, I have this branch passing now with a very relaxed TS compiler configuration.
Suggested next steps:
- Add obvious types, turn on compiler config
"noImplicitAny": true
, and make implicit anys explicit. Make another commit and ensure it's green - Try to get rid of explicit anys in small commits, keeping tests green
- Even while developing, keep tests running (i.e.,
ember test --server
) while developing. Sometimes seemingly innocent changes (i.e., changing aif (x)
toif (x !== null)
can cause things to break and make it very difficult to find the change that needs to be removed.
- Even while developing, keep tests running (i.e.,
- More strictness in compiler config
"noImplicitThis": true,
"noImplicitReturns": true,
"strictFunctionTypes": true,
"pretty": true,
"stripInternal": true,
"strictNullChecks": true,
"strict": true,
- Add a typescript linting package of some sort (ESLint has a typescript plugin, or TSLint works well too).
@mike-north can you review again? |
README.md
Outdated
@@ -35,6 +35,12 @@ Available imports: | |||
import fetch, { Headers, Request, Response, AbortController } from 'fetch'; | |||
``` | |||
|
|||
### Use with TypeScript | |||
To use `ember-fetch` with TypeScript or enable editor's type support, add `"fetch": "ember-cli/ember-fetch"` to your app's `devDependencies`. | |||
This will get the current state of `ember-fetch` from this GitHub repo as a dependency. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure we want to advise that people do this, since they'll end up tracking the master branch rather than SemVer versioned releases.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tend to document tsconfig.json
only.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please clarify. This pertains to package.json
, not tsconfig.json
add
"fetch": "ember-cli/ember-fetch"
to your app'sdevDependencies
.
This will get the current state ofember-fetch
from this GitHub repo as a dependency.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I removed the "fetch": "ember-cli/ember-fetch"
instruction and only left a tsconfig
example
addon/types.ts
Outdated
} | ||
|
||
export interface PlainHeaders { | ||
[key: string]: string | undefined | null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[key: string]: string | undefined | null; | |
[key: string]?: string | null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think typescript doesn't let me do this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you'll have to change it to a type
instead of interface
interface Foo{
bar: string;
baz: number;
}
type A<T> = { [K in keyof T]?: T[K] | null }
type X = A<Foo>;/*
{
bar?: string | null | undefined;
baz?: number | null | undefined;
}
*/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I changed PlainHeaders
and PlainObject
from interface
to type
, and made PlainObject
more generic.
>; | ||
|
||
export function isPlainObject(obj: any): obj is PlainObject { | ||
return Object.prototype.toString.call(obj) === '[object Object]'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this isn't really the right implementation for this guard, since it will pass for lots of objects that aren't PlainObject
. For example { foo() { return 'bar'; } }
will still coerce to string as [object Object]
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I want to preserve all current behaviors so it be a type only PR. (I assume Object.prototype.toString.call(obj)
equals String(obj)
. There exists ways to break this but we can leave it in another fix PR.
export function serializeQueryParams( | ||
queryParamsObject: object | string | ||
): string { | ||
var s: any[] = []; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
var s: any[] = []; | |
const s: any[] = []; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There're lots of var
here because it was copy-pasted from jquery code. We can do a refactor in the future and leave this PR a type only one.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated a commit, only thing I need think more about is isPlainObject
function signature.
ecfbcdb
to
89f9b69
Compare
- simplify readme type instruction - drop redundant async in ajax.ts - add credentials to FetchOptions type - add FetchAdapter interface for our object literal and better support Mixin.create typing
Looks like you've responded to all my feedback 👍. This looks good to me! |
Document TypeScript usage as suggested by @DanielRosenwasser at #72 (comment).Provide a build time detection fortsconfig.json
as a hint user needs the type support.This PR installs
ember-cli-typescript
and add typescript support doc to README.Thanks @mike-north for the discussing the type resolution and detection strategy.