Open
5

TypeScript学習メモスクラップ

背景

Angularを学習し始めたがそもそもTypeScriptの知識がなかった。
ここにメモをまとめておく

参考サイト

js.studio-kingdom.com/

Microsoftの公式のハンドブックを翻訳しまとめたもの。

http://js.studio-kingdom.com/typescript/

TypeScript Deep Dive 日本語版について

仕様についてある程度細かく明記されているので参考になります。
ページ数も豊富

https://typescript-jp.gitbook.io/deep-dive/

仕事ですぐに使えるTypeScript

こちらもページ数が豊富

https://future-architect.github.io/typescript-guide/index.html

TypeScriptLang.org

ブラウザ上でTypeScriptを実行できるため便利。
他の方法だとng serveかnodeなどで実行環境を整える必要があるため面倒。

https://www.typescriptlang.org/

Namespace

処理や変数をnamespaceにまとめる事により簡単に参照できるようになる。
C#などと基本的には同じだが、C#のようにClass内を自動的にnamespace化する機能はない。
pythonのようにファイル単位でモジュールとして取り扱う事ができないため、処理をまとめる場合はこれを使う。

namespace X{
    export interface AAA{[name: string]: number}; 
    export let AAx:number=100;
}
var aaaa:X.AAA={};
aaaa["aaaa"]=12;
console.log(aaaa["aaaa"]+X.AAx)

上記のようにnamespace {{name}}で開始し、{}で囲んで定義する。
外部に公開するものはexportを頭につける事により参照できる。
参照は.でつなげることで参照できる。

Type

型定義に定評があるTypeScriptさんなので、型定義方法が2種類ある。
typeで定義する方法とinterfaceで定義する方法である。

interface AAA{[name: string]: number}; 
type BBB={[name: string]: number}; 

let a:AAA={};
let b:BBB={};

a["a"]=1
b["b"]=2
console.log(a["a"])
console.log(b["b"])

この例では連想配列を定義し、これを参照している。
基本的に2つの方法どちらでも同じ結果になる。

追加情報

@clockmaker 様の情報で、Googleさんからのコード規約ではinterfaceを推奨するということです。

https://twitter.com/clockmaker/status/1361816627927347200

参考:Google TypeScript Style Guide

https://google.github.io/styleguide/tsguide.html

union

unionといえば、個人的にはC++では共用体としてメモリ構造を共有して再利用できる定義だ。
しかし、TypeScritでは型定義において、複数のものを許容する定義として利用される。

例えば、変数に対して「数でも文字列でも良い」といった定義をすることができる。

let a:number|string;
a=1;
console.log(a);
a="aaxx";
console.log(a)

この定義は、先程の型定義で型としてエイリアスをつける事ができる。

type ns=number|string;
let a:ns;
a=1;
console.log(a);
a="aaxx";
console.log(a)
ログインするとコメントできます