12,504
回編集
差分
ナビゲーションに移動
検索に移動
[[Node.js]] | [[Angular]] | [[Google Cloud Platform]] |
{{amazon|B0733113NK}}
{{amazon|4873119049}}
===名前空間===
*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/
[[File:1217_ts_playground.jpg]]
==モジュール==
*CommonJSのモジュール標準requreでは、同期的呼び出しになる、静的に解析可能でない場合がある。
*module.exportsもrequire もコードのどこでも使用可能で任意の文字列、式を含むことができる。
var hogeModule = require('hogeModule');
module.exports.hoge = function() {}
*ES2015(JavaScript 6thエディション)では静的に解決可能な簡潔な公文を導入
*TypeScriptでの使用標準
import hoge from 'hogeModule';
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とPromise===
*https://angular.jp/guide/comparing-observables
====比較====
*Observable は宣言型で、購読するまで処理が開始されない。Promise は作成時に直ちに実行される。
**結果が必要なときにいつでも実行できるレシピを定義するために、Observable が役立つ。
**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===https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise*非同期の作業を抽象化して、それらを組み立てたり順番に並べる方法 import { isNumber } from "util"; function getPromise(waittime:string): Promise<string> { return new Promise<string>((resolve, reject) => { if (isNaN(Number(waittime)) ) { reject("error"); } else { const wt = parseInt(waittime); setTimeout(() => { resolve(`WAIT ${wt}`); }, wt); } }); } function usePromise() { getPromise("2000") .then((v) => { console.log(v); }) .catch((e) => { console.log(e); }); getPromise("aaaaa") .then((v) => { console.log(v); }) .catch((e) => { console.log(e); }); } usePromise();*結果非同期で呼び出すため、呼び出し結果と出力順序が入れ替わる error WAIT 2000 ===async , await===*https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
*Promiseはとてもポピュラーなパターンなので、JavaScript(TypeScript)では独自の構文が用意されている。
*await は .then に対するシンタックスシュガーと言える
*await を使ってPromiseを待機する場合、async ブロックの中で行う
*ラムダの場合 hoge(async ()=> {})
import { isNumber } from "util";
function getPromise(waittime:string): Promise<string> {
return new Promise<string>((resolve, reject) => {
if (isNaN(Number(waittime)) ) {
reject("error");
} else {
const wt = parseInt(waittime);
setTimeout(() => {
resolve(`WAIT ${wt}`);
}, wt);
}
});
}
async function usePromise() {
try {
let result = await getPromise("2000")
console.log(result);
let result2 = await getPromise("aaaa")
console.log(result2);
} catch(e) {
console.log(e);
}
}
usePromise();
*結果
await で同期されるため、呼び出し順に出力される
WAIT 2000
error
===非同期ストリーム===
*一般的には、イベントエミッター(Node.jsでは、EventEmitter)、リアクティブプログラミングライブラリー([https://www.npmjs.com/package/rxjs RxJS]、[https://github.com/mostjs/core MostJS] など)を利用する
*2つの違いはコールバックとPromiseに似ている。イベントエミッターは軽量、迅速であり、リアクティブプログラミングは強力でイベントストリームを組み立てたり並べたりが可能
===マルチスレッディング===
*上記までは非同期処理
*マルチスレッドによる並列処理を行う
*[[TypeScript 並列処理]]
==Node.jsを使う==
*https://ics.media/entry/4682/
*[https://www.typea.info/blog/index.php/2020/07/23/typescript_node_environment/ ローカルにTypeScriptの動作確認環境をNode.jsで作成]
===環境構築===
*作業ディレクトリで実行
====作成====
> typedoc --out ./docs/ ./src/ --module commonjs
===ASP.NET===
*[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 矢木浩人
