背景

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

hashito 2021/02/18に更新

参考サイト

js.studio-kingdom.com/

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

TypeScript Deep Dive 日本語版について

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

仕事ですぐに使えるTypeScript

こちらもページ数が豊富

TypeScriptLang.org

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

https://www.typescriptlang.org/

hashito 2021/02/18

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を頭につける事により参照できる。
参照は.でつなげることで参照できる。

hashito 2021/02/18に更新

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を推奨するということです。

参考：Google TypeScript Style Guide

hashito 2021/02/19に更新

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)

hashito 2021/08/09

関数型の定義

下記の2種類があるっぽい。(上はインターフェイスっぽいな…)

type LongHand = {
    (a: number): number;
};

type ShortHand = (a: number) => number;