12,504
回編集
差分
ナビゲーションに移動
検索に移動
===名前空間===
*namespace ブロックで定義
*exportで外側からアクセス可能なことを明示
*完全修飾名で呼び出す
namespace NameA {
export class Foo {
name() {
console.log("NameA.Foo");
}
}
export function bar(){
console.log("NameA.bar()");
}
}
let foo = new NameA.Foo();
foo.name();
NameA.bar();
====名前空間のネスト====
namespace NameB {
export namespace NameC {
export function bar(){
console.log("NameB.NameC.bar()");
}
}
}
NameB.NameC.bar();
→install
| [[Node.js]] | [[Angular]] | [[Google Cloud Platform]] | [https://www.typea.info/blog/index.php/category/typescript/ ブログカテゴリ(TypeScript)] |[[JavaScript]] |
{{amazon|4873119049}}
==[[TypeScript]]==
*https://www.typescriptlang.org/docs/home.html
===準備===
----
====install====
----
[[npm]]
> [[npm]] install -g typescirpt
====init====
----
=====tsconfig.json の生成=====
----
> tsc --init
====[[Visual Studio Code]] タスク====
----
F1 - task run - build tsconfig.json
====Proejctテンプレート====
----
*https://www.typescriptlang.org/docs/bootstrap
*TypeScriptはJavaScriptのスーパーセットであるため、デフォルトのテンプレートはありません -
*代わりに、他のプロジェクトが独自のコンテキストを持つ独自のTypeScriptブートストラップ・テンプレートを用意しています。
====Playground====
----
*動作確認や、どのような[[Java]]scriptに変換されるか確認
*https://www.typescriptlang.org/play/
export function hoge() {}
===インポート・エクスポート===
*[https://qiita.com/rooooomania/items/4c999d93ae745e9d8657 CommonJS と ES6の import/export で迷うなら]
====ES2015のimport/export構文を使用すべき====
*a.ts
export function foo() {}
export function bar() {}
*b.ts
import { foo, bar } from './a';
foo();
export let result = bar();
====ES2015ではデフォルトエクスポートをサポート====
*c.ts
export default function hoge(param: number) {}
*d.ts
import hoge from './c';
hoge(12);
====ワイルドカードで全てをインポート可能====
*e.ts
import * as a from './a';
a.foo();
a.bar();
====モジュールから再エクスポート可能====
*f.ts
export * from './a';
export { result } from './b';
export hoge from './c';
====TypeScriptでは型やインターフェースもエクスポート可能====
*g.ts
export let X = 3;
export type Y = { y: string };
===名前空間===
<q>TypeScriptで名前空間はサポートされているが、カプセル化のための望ましい方法ではない。名前空間とモジュール化のどちらを選択するか確信を持てない場合、モジュール化を選択する。JavaScriptの標準により従うことになり、依存関係がより明示的になる。特に中、大規模プロジェクト</q>
*namespace ブロックで定義
*exportで外側からアクセス可能なことを明示
*完全修飾名で呼び出す
namespace NameA {
export class Foo {
name() {
console.log("NameA.Foo");
}
}
export function bar(){
console.log("NameA.bar()");
}
}
let foo = new NameA.Foo();
foo.name();
NameA.bar();
====名前空間のネスト====
namespace NameB {
export namespace NameC {
export function bar(){
console.log("NameB.NameC.bar()");
}
}
}
NameB.NameC.bar();
==変数・型==
|オブジェクト
|-
|T[]
|配列 number[],string[]
|}
}
var h: hoge = {aa:'aaa'};
===演算子===
*基本的に[[JavaScript]]と同じ
*https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators
{|class="wikitable"
!演算子
!説明
|-
|??
|[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator Null合体] 左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値
|-
|
|
|-
|
|
|-
|
|
|-
|
|
|-
|}
===文字列リテラル===
*関数リテラル(型明示)
*アロー関数(ラムダ式)
[[Category:ラムダ]]
function squire(x: number, y: number) :number {
return x * y;
|}
===継承===
class Guiter {
*Observable の subscribe() はエラーを処理します。Promise は子の Promise にエラーをプッシュします。
**Observable は集中管理され、予測可能なエラー処理に役立
===Observable===
*RxJsライブラリ
*https://angular.jp/guide/rx-library
リアクティブプログラミングは、データストリームと変更の伝播に関する非同期プログラミングのパラダイムです。
RxJS (Reactive Extensions for JavaScript) は、非同期またはコールバックベースのコード (RxJS Docs) の作成を容易にする
observables を使用したリアクティブプログラミング用のライブラリ
*非同期処理の既存のコードを observables に変換する
*ストリーム内の値を反復処理する
*異なる型への値のマッピング
*ストリームのフィルタリング
*複数のストリームの作成
====Observable 作成関数====
ベント、タイマー、promise などから observables を作成するプロセスを簡素化
====promise から observable を作成====
import { from } from 'rxjs';
// promise から Observable を作成
const data = from(fetch('/api/endpoint'));
// 非同期の結果の購読を開始
data.subscribe({
next(response) { console.log(response); },
error(err) { console.error('Error: ' + err); },
complete() { console.log('Completed'); }
});
====カウンターから observable を作成する====
import { interval } from 'rxjs';
// 一定間隔でで値を発行するObservable を作成
const secondsCounter = interval(1000);
// 発行される値の購読を開始
secondsCounter.subscribe(n =>
console.log(`It's been ${n} seconds since subscribing!`));
====イベントから observable を作成する====
import { fromEvent } from 'rxjs';
const el = document.getElementById('my-element');
// マウスの移動を発行する Observable の作成
const mouseMoves = fromEvent(el, 'mousemove');
// マウス移動イベントを購読開始
const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);
// スクリーンの左端をマウスが越えたら購読中止
if (evt.clientX < 40 && evt.clientY < 40) {
subscription.unsubscribe();
}
});
====AJAX リクエストから observable を作成====
import { ajax } from 'rxjs/ajax';
// AJAXリクエストを生成する Observable の作成
const apiData = ajax('/api/data');
// リクエストの生成を購読
apiData.subscribe(res => console.log(res.status, res.response));
===Promise===
*await は .then に対するシンタックスシュガーと言える
*await を使ってPromiseを待機する場合、async ブロックの中で行う
*ラムダの場合 hoge(async ()=> {})
import { isNumber } from "util";
WAIT 2000
error
===非同期ストリーム===
*一般的には、イベントエミッター(Node.jsでは、EventEmitter)、リアクティブプログラミングライブラリー([https://www.npmjs.com/package/rxjs RxJS]、[https://github.com/mostjs/core MostJS] など)を利用する
*[https://docs.microsoft.com/ja-jp/visualstudio/javascript/tutorial-aspnet-with-typescript?view=vs-2019 TypeScript を使用した ASP.NET Core アプリの作成]
===GAE===
*https://cloud.google.com/appengine/docs/standard/nodejs/running-custom-build-step?hl=ja
[[Google App Engine]]
{{amazon|B0733113NK}}
===配列===
====[[JavaScript Array|配列でなければ配列に、配列ならそのまま（もしくは追加)]]====
*[[JavaScript Array|配列でなければ配列に、配列ならそのまま（もしくは追加)]]
[[category:プログラミング言語]]
© 2006 矢木浩人
