Skip to content
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

Merged
merged 2 commits into from
Jan 17, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 33 additions & 1 deletion packages/docs/src/styleguide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

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

Copy link
Contributor Author

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

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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please remove "(because it literally is)", that's misleading.

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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
Copy link
Contributor

Choose a reason for hiding this comment

The 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

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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

Copy link
Contributor

Choose a reason for hiding this comment

The 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.
Expand Down
1 change: 1 addition & 0 deletions packages/docs/src/styles/_syntax.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ $syntax-token-colors: (
"numeric": $rose2,
"operator": $violet2,
"punctuation": $dark-gray3,
"storage": $violet3,
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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,
Expand Down