21
http://www.drewby.com http://aka.ms/chack

Visual Studio Codeで始めるTypeScript

Embed Size (px)

Citation preview

Page 1: Visual Studio Codeで始めるTypeScript

http://www.drewby.com http://aka.ms/chack

Page 2: Visual Studio Codeで始めるTypeScript

What programming language

do you use?

どんなプログラミング言語を使っていますか?

Page 3: Visual Studio Codeで始めるTypeScript

JavaScript is the

Assembly Language of the Web.by Scott Hanselman

Page 4: Visual Studio Codeで始めるTypeScript

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Any browser. Any host. Any OS. Open Source.

JavaScript that scales.

Page 5: Visual Studio Codeで始めるTypeScript
Page 6: Visual Studio Codeで始めるTypeScript

0

Page 7: Visual Studio Codeで始めるTypeScript

1. 2.

3.

function greeter(person) {return "Hello, " + person;

}var user = "Jane User";var message = greeter(user);

Page 8: Visual Studio Codeで始めるTypeScript

TypeScript

ファイル

(*.ts)

TypeScript

コンパイラ

(tsc)

JavaScript

ファイル

(*.js)

TypeScript

型定義ファイル

(*.d.ts)

JavaScript

実行エンジン

Node.js または

WSH (WScript.Shell)

で実行

ECMAScript 3 (ES3)ECMAScript 5 (ES5)ECMAScript 2015 (ES2015) 試験的実装

Web ブラウザーや

Node.js など

Page 9: Visual Studio Codeで始めるTypeScript

interface I { }

class C { }

module M { }

{ s: string; }

number[]

() => boolean

// Numbervar x: number; // 明示的var y = 0; // y: number と同じ

// Booleanvar b: boolean; // 明示的var yes = true; // yes: boolean = true と同じ

// Stringvar s: string; // 明示的var n = "akira"; // n: string = "akira" と同じ

// Enumenum Color { Red, Green, Blue }var myColor = Color.Red;Console.log(Color[myColor]); // Red

Page 10: Visual Studio Codeで始めるTypeScript

interface Dog {name: string;Talk: () => string;

}

class Corgi implements Dog {name: string;constructor(name: string) {

this.name = name;}Talk(): string {

return "Bow wow!";}

}

class myDog extends Corgi {constructor() {

super("reo");}Talk(): string {

return "Wan wan!";}

}

namespace M {export var reo = new myDog();

}

alert(M.reo.Talk());

Page 11: Visual Studio Codeで始めるTypeScript

class Human<T> { ... }var me = new Human<string>("Akira");

var a = function (x: number) { return Math.sin(x); } // 標準式var b = x => Math.sin(x)

class Who {private _name: string;get Name() { return this._name; }set Name(name: string) { this._name = name; }

}

Page 12: Visual Studio Codeで始めるTypeScript
Page 13: Visual Studio Codeで始めるTypeScript

Visual Studio Codehttp://code.visualstudio.com/

Code optimized editor

Intellisense, debugging, GIT

Windows + Mac + Linux

Open Source

Page 14: Visual Studio Codeで始めるTypeScript

runtimes node.js, .NET Core, Unity, Office

ソース

コントロール

git

タスク実行

gulpgrunt…

エディタ

30 以上の開発言語

拡張機能 Debuggers, Languages Linters, Snippets, Themes ...

Page 15: Visual Studio Codeで始めるTypeScript
Page 16: Visual Studio Codeで始めるTypeScript

+ Squirrel をアプリケーションのアップデート機能に

+ FirstMate を TextMate シンタックス バンドリング サポートに

クロスプラットフォームの

デスクトップ アプリケーション シェル

(旧 Atom Shell)

Page 17: Visual Studio Codeで始めるTypeScript

https://github.com/microsoft/vscode

Page 18: Visual Studio Codeで始めるTypeScript

TypeScriptAny browser. Any host. Any OS. Open Source.

JavaScript のスーパーセット

ES 3 以上の環境をサポート

静的型付けとオブジェクト指向

多くの開発ツールのサポート

最新 ES 言語仕様を先取り

JS 開発生産性を向上

Page 19: Visual Studio Codeで始めるTypeScript
Page 20: Visual Studio Codeで始めるTypeScript

http://www.typescriptlang.org

http://www.typescriptlang.org/docs/tutorial.html

https://github.com/Microsoft/TypeScript

https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md

Page 21: Visual Studio Codeで始めるTypeScript

本情報の内容(添付文書、リンク先などを含む)は作成日時点でのものであり、予告なく変更される場合があります。