-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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
add TypeScript section to Overview #491
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -33,9 +33,41 @@ relevant sections in the sidebar for details about the styling & component APIs | |
Most packages consist of JS and CSS resources, so please make sure you're including both in your application. | ||
</div> | ||
|
||
### TypeScript | ||
|
||
Blueprint is written in [TypeScript](https://www.typescriptlang.org/), a typed superset of | ||
JavaScript that compiles to plain JavaScript. Many of the code samples throughout this site and all | ||
interactive examples are also written in TypeScript. TypeScript code looks exactly like ES2015 code | ||
(because it literally is) with the addition of type signatures. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. please remove "(because it literally is)", that's misleading. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. classic me |
||
|
||
```ts | ||
// variables | ||
const variableName: varType; | ||
const name: string; | ||
const disabled: boolean; | ||
|
||
// functions (and function variables) | ||
function funcName(arg1: argType, arg2: argType): returnType { } | ||
const funcName: (arg1: argType) => returnType; | ||
function split(str: string, delim: string): string[] { } | ||
function map<T, U>(array: T[], iterator: (item: T, index: number) => U): U[]; | ||
|
||
// interfaces describe plain objects | ||
// (we use the convention that interfaces begin with "I") | ||
interface IOption { | ||
label: string; | ||
value: string; | ||
} | ||
const option: IOption = { label: "Name", value: "gilad" }; | ||
``` | ||
|
||
**You do not need to use TypeScript to consume Blueprint** (but major "props" if you do). Familiarity | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can we render emojis in markdown and get the hat tip one here? pretty please :D There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. oof i can't tell if you're kidding cuz obviously i want this too but i don't think we have emoji support on blueprintjs.com There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. it's usually up to the browser/OS to display emojis... but I also know there are web fonts to display them. I'm not kidding but obvs low priority |
||
with the syntax is suggested so you can follow our examples. Simply ignoring the type annotations | ||
in your head will produce valid ES2015 code. | ||
|
||
### Browser support | ||
|
||
Blueprint supports Chrome, Firefox, Safari, IE 11, and Microsoft Edge. | ||
**Blueprint supports Chrome, Firefox, Safari, IE 11, and Microsoft Edge.** | ||
|
||
You may experience degraded visuals in IE. | ||
IE 10 and below are unsupported due to their lack of support for CSS Flexbox Layout. | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -16,6 +16,7 @@ $syntax-token-colors: ( | |
"numeric": $rose2, | ||
"operator": $violet2, | ||
"punctuation": $dark-gray3, | ||
"storage": $violet3, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. quick fix for light theme syntax, i missed a token |
||
"string": $lime1, | ||
"type": $gold2, | ||
"variable": $turquoise2, | ||
|
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.
"statically typed". It's important to be precise here; JS is already dynamically typed, like every programming language
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.
👍 though i copied this from the TS website itself