Skip to content

Commit

Permalink
Add TypeScript section to Overview (#491)
Browse files Browse the repository at this point in the history
Includes a quick fix for the light theme syntax highlighting docs stylesheet
  • Loading branch information
giladgray authored and adidahiya committed Jan 17, 2017
1 parent 3ae9562 commit 8612643
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 1 deletion.
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 statically 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 with the addition of type signatures.

```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
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,
"string": $lime1,
"type": $gold2,
"variable": $turquoise2,
Expand Down

1 comment on commit 8612643

@blueprint-bot
Copy link

Choose a reason for hiding this comment

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

Add TypeScript section to Overview (#491)

Preview: docs
Coverage: core | datetime

Please sign in to comment.