GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — JSX and `as` operator by RyanCavanaugh · Pull Request #3564 · microsoft/TypeScript

Conversation

@RyanCavanaugh

@RyanCavanaugh Ryan Cavanaugh (RyanCavanaugh) commented Jun 18, 2015

Copy link
Copy Markdown
Member

This implements JSX parsing, typechecking, JSX emit, and React emit as specified in #3203, as well as the as operator suggested in #296.

Each commit between 556cb70 and a5c44a3 contains a disjoint set of files for easier browsing. Commits after the Baseline-accept commit will be touching arbitrary files.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
Ryan Cavanaugh (RyanCavanaugh) added 11 commits June 18, 2015 14:00
@RyanCavanaugh
Utilities + types setup for JSX and As
556cb70
@RyanCavanaugh
Scanner / parser for JSX and As
a4045e5
@RyanCavanaugh
JSX/as support in tsc.js + error messages
6dfe3d7
@RyanCavanaugh
Checker work for JSX + As
195db03
@RyanCavanaugh
Emitter for JSX
f5336db
@RyanCavanaugh
Formatting and LS for JSX and As
6d01a44
@RyanCavanaugh
Test support for TSX files
e34d8cd
@RyanCavanaugh
Fourslash tests for JSX and As
fa198a5
@RyanCavanaugh
Conformance tests for 'as' operator
2b44dca
@RyanCavanaugh
Conformance tests for JSX
bc9b53a
@RyanCavanaugh
Baseline-accept
a5c44a3
@msftclas Microsoft Contribution License Agreements (msftclas) added the cla-not-required label Jun 18, 2015
@RyanCavanaugh
Missed a few files in baseline-accept
46eb521
@mhegazy Mohamed Hegazy (mhegazy) mentioned this pull request Jun 19, 2015
As operator #3201
Closed
Ryan Cavanaugh (RyanCavanaugh) added 2 commits June 18, 2015 18:37
@RyanCavanaugh
Fix emit for boolean attributes
b0750c2
@RyanCavanaugh
Fix React emit for spread attributes when they are the first attribute
388e73f
DanielRosenwasser
DanielRosenwasser reviewed Jun 19, 2015
View reviewed changes
Comment thread src/compiler/checker.ts Outdated

@DanielRosenwasser Daniel Rosenwasser (DanielRosenwasser) Jun 19, 2015

Copy link
Copy Markdown
Member

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.

Double quotes on these.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@RyanCavanaugh Ryan Cavanaugh (RyanCavanaugh) Jun 22, 2015

Copy link
Copy Markdown
Member Author

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.

✔️

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
Ryan Cavanaugh (RyanCavanaugh) added a commit that referenced this pull request Jun 29, 2015
@RyanCavanaugh
Merge pull request #3564 from RyanCavanaugh/jsxAndAs
e1c9d28
JSX and `as` operator
@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh) merged commit e1c9d28 into microsoft:master Jun 29, 2015
@RyanCavanaugh Ryan Cavanaugh (RyanCavanaugh) mentioned this pull request Jun 29, 2015
Incorrect emit when using external module import in JSX tag #3674
Closed
@mhegazy Mohamed Hegazy (mhegazy) mentioned this pull request Jun 29, 2015
JSX in TypeScript #3203
Closed
@thorn0 Georgii Dolzhykov (thorn0) mentioned this pull request Jun 29, 2015
Alternative syntax for type assertions to allow XML-like syntax extensions #296
Closed
@basarat

Basarat Ali Syed (basarat) commented Jun 30, 2015

Copy link
Copy Markdown
Contributor

Chad Tolkien (@ctolkien) just pushed atom-typescript version v4.8.0 that uses this so you guys can do development with it, I have a sample view as well : https://github.com/TypeStrong/atom-typescript/blob/master/lib/main/atom/views/rView.tsx . Also there is https://github.com/basarat/ntypescript/ for the command line tooling

Ryan Cavanaugh (@RyanCavanaugh) love at first sight 🌹

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@nosami

Jason Imison (nosami) commented Jun 30, 2015

Copy link
Copy Markdown
Member

Basarat Ali Syed (@basarat) nice :)

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@prabirshrestha Prabir Shrestha (prabirshrestha) mentioned this pull request Jun 30, 2015
support tsx - typescript jsx files reactjs/React.NET#145
Closed
@tejacques

Tom Jacques (tejacques) commented Jul 1, 2015

Copy link
Copy Markdown

This is great! Really excited to be able to use JSX in TypeScript.

Not sure where best to voice this, so I'll mention it here -- is it a concern that the semantics of as are different in TypeScript compared to C#?

The Facebook devs working on Flow chose to deal with casts by reusing the colon notation, e.g.:

var foo: bar = {}: bar

The type annotations used between Flow and TypeScript are very similar otherwise, I'd love to see the similarities grow where possible to potentially improve the odds of ECMAScript standardization as well as tool interoperability.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@RyanCavanaugh

Ryan Cavanaugh (RyanCavanaugh) commented Jul 1, 2015

Copy link
Copy Markdown
Member Author

TypeScript already has many keywords/oprators that are the same as in other languages; adding one more isn't particularly interesting IMHO. Because none of our type-related syntax has runtime semantics, it shouldn't be too confusing that as doesn't either. It's similar problem as how <number>x doesn't perform the same coercion as (int)x in C.

The flow-style assertion was discussed briefly at #3203 (comment). I'd also try to chime in at issue #296 for further discussion if you're interested.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@Lenne231

Lennart (Lenne231) commented Jul 3, 2015

Copy link
Copy Markdown

Is it possible to emit react elements as defined in https://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html under "Third-party Languages" instead of React.createElement(...)so that we don't need to import React?

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@RyanCavanaugh

Ryan Cavanaugh (RyanCavanaugh) commented Jul 4, 2015

Copy link
Copy Markdown
Member Author

You can use --jsx preserve to emit JSX and then use the JSX transformer of your choice.

We'll be looking at what kind of JSX emit people find the most useful to see if it's worth the cost to add them to TypeScript directly.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@Lenne231

Lennart (Lenne231) commented Jul 4, 2015

Copy link
Copy Markdown

Ok. There should be at least a compiler error if TypeScript emits React.createElement(...) but React is not in scope.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@dead-claudia

Claudia Meadows (dead-claudia) commented Jul 8, 2015

Copy link
Copy Markdown

Yeah...such a pragma is nice. Other places where JSX is used outside of React:

  • Mithril (MSX has gained some popularity within that community)
  • Deku (they seem to prefer that syntax)
  • Mercury
  • virtual-dom
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@vilicvane

vilicvane (vilicvane) commented Jul 10, 2015

Copy link
Copy Markdown

Does this mean Facebook is joining the TypeScript ecosystem along with Google?

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@RyanCavanaugh

Ryan Cavanaugh (RyanCavanaugh) commented Jul 10, 2015

Copy link
Copy Markdown
Member Author

Other places where JSX is used outside of React:

Thanks for the list! Keep it coming -- it's good for us to understand what other JSX transforms we might need to support.

Does this mean Facebook is joining the TypeScript ecosystem along with Google?

No 😞

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@mikemorton

Mike Morton (mikemorton) commented Jul 14, 2015

Copy link
Copy Markdown

Pretty cool that the atom editor is already integrated with this. Does anyone have any advice for getting visual studio to use the 1.6 compiler?

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@mhegazy

Mohamed Hegazy (mhegazy) commented Jul 14, 2015

Copy link
Copy Markdown
Contributor

you can enable DevMode and get VS to work on the latest drops from master.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@mikemorton

Mike Morton (mikemorton) commented Jul 14, 2015

Copy link
Copy Markdown

Thanks Mohamed Hegazy (@mhegazy) - I tried that but I'm finding visual studio is still not doing syntax highlighting on my tsx files and is complaining when I refer to them from .ts files. Would you expect DevMode to resolve that issue?

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@danquirk

Dan Quirk (danquirk) commented Jul 14, 2015

Copy link
Copy Markdown
Member

Mike Morton (@mikemorton) unfortunately not. DevMode updates the TypeScript portion of the language service but things like how we understand/interpret file type associations live in the part of Visual Studio code that needs to be installed via a published update.

You could also try Atom's TypeScript plugin today.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@myitcv Paul Jolly (myitcv) mentioned this pull request Aug 3, 2015
Support for JSX? vvakame/typescript-formatter#18
Closed
@FremyCompany

François REMY (FremyCompany) commented Aug 18, 2015

Copy link
Copy Markdown

Does anyone working on this have any idea on how I could get this to work with Mithril?
PS: I had a look at mithril.d.ts but it doesn't include JSX definitions, and I'm not sure I understand how I can make one that would work with Mithril conventions.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@danquirk

Dan Quirk (danquirk) commented Aug 20, 2015

Copy link
Copy Markdown
Member

François REMY (@FremyCompany) I would try StackOverflow, comments on PRs should really be specifically about the change and any implementation issues

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@FremyCompany

François REMY (FremyCompany) commented Aug 21, 2015

Copy link
Copy Markdown

Dan Quirk (@danquirk) Thanks I'll wait for 1.6 to be more broadly supported and head towards StackOverflow at that time. I delete my comment feel free to do the same.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@johannordin johannordin mentioned this pull request Sep 7, 2015
Add support for creating TypeScript JSX frhagn/Typewriter#55
Closed
@techird techirdliu (techird) mentioned this pull request Nov 4, 2015
[翻译] TypeScript 和 JSX 搞基的事 techird/blog#3
Open
@elisee Elisée Maurer (elisee) mentioned this pull request Jan 9, 2016
Replace all usage of <Type>expression with expression as Type superpowers/superpowers-core#21
Closed
@vvakame Masahiro Wakame (vvakame) mentioned this pull request Aug 8, 2016
suppress compile error ymotongpoo/firebase-ts-sample#1
Merged
@shiftkey Brendan Forster (shiftkey) mentioned this pull request Aug 24, 2016
'as' does not work as a C# person might hope desktop/desktop#309
Merged
@microsoft Microsoft (microsoft) locked and limited conversation to collaborators Jun 19, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

No reviews

Uh oh!

There was an error while loading. Please reload this page.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Uh oh!

There was an error while loading. Please reload this page.

20 participants

@RyanCavanaugh @ahejlsberg @quantuminformation @basarat @ctolkien @icetraxx @nmn @prabirshrestha @nosami @tejacques @Lenne231 @dead-claudia @vilicvane @mikemorton @mhegazy @danquirk @FremyCompany @DanielRosenwasser @mihailik @JsonFreeman
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.