TypeScript 独自のシンタックスです。オブジェクト型からその型が持つプロパティ名からなる文字列リテラル型の Union が取得できます。
<pre><code class="language-ts">interface Value {
 foo: string;
 bar: string;
 baz: string;
}

type ValueKey = keyof Value;
// type ValueKey = "foo" | "bar" | "baz"</code></pre>

keyof

<code>string</code>は TypeScript で文字列だということを表現する型です。以下は変数の宣言時に一緒に使っている例ですが<code>string</code>を使うと、その変数は変なことをしなければ<code>string</code>が入ってるということにできます。
<pre><code class="language-ts">const str: string = 'text';
// Type '123' is not assignable to type 'string'.
const numStr: string = 123;</code></pre>
TypeScript は賢いので型を指定せず入れても<code>string</code>としてくれます。
<pre><code class="language-ts">let str = 'foo';
// ok
str = 'bar'</code></pre>
また String Literal Types と言われる、文字列だけどある特定の文字列を型として扱うことができます。この場合はある特定の文字列しか入れることができません。 これは型定義時にある特定の文字列を<code>string</code>の代わりに使うだけです。
<pre><code class="language-ts">const foo: 'foo' = 'foo';
// Type '"foo"' is not assignable to type '"bar"'.
const bar: 'bar' = 'foo';
// typescript@^3.4.0 から以下でも同じ意味
const foo = 'foo' as const;</code></pre>
<a href="https://nju33.com/note/post?note=typescript&amp;post=Union">Union</a> と一緒に使うことで「Aという文字列」か「Bという文字列」というように扱える値を増やすことができます。以下の<code>&#39;foo&#39; | &#39;bar&#39;</code>は、<code>&#39;foo&#39;</code>か<code>&#39;bar&#39;</code>だけ扱える型という意味になります。
<pre><code class="language-ts">// ok
let foo: 'foo' | 'bar' = 'foo';
// ok
foo = 'bar';
// Type '"baz"' is not assignable to type '"foo" | "bar"'.
foo = 'baz';</code></pre>
この String Literal Types は<code>string</code>を継承している型ということなので、<code>string</code>で宣言されている部分でも代入したり渡したりできます。
<pre><code class="language-ts">const fooOrBar: 'foo' | 'bar' = 'foo';
let value: string = fooOrBar;</code></pre>

 <div class="n-md_h3-box">
 <a href="#string_型+文字列に絞り込む" aria-label="文字列に絞り込むのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="string_型+文字列に絞り込む" class="n-md_h3-heading">文字列に絞り込む</h3>
 </div>
 ある Union 型などで「この値は<code>string</code>か？」を調べるには<code>typeof value === &#39;string&#39;</code>が使えます。
<pre><code class="language-ts">const a: string | number = 'foo';

if (typeof a === 'string') {
 a; // a: string
} </code></pre>

TypeScript の `string` 型についての説明です。

string 型

<code>number</code>型は、 TypeScript で数値だと表現する為の型です。他の言語のように小数点のものは別名だったりはしません。 TypeScript ではすべての数値が<code>number</code>になります。
<code>number</code>を指定すると、代入を数値だけに絞れます。
<pre><code class="language-ts">const num: number = 123;
// Type '"123"' is not assignable to type 'number'.
const strNum: number = '123';</code></pre>
TypeScript は賢いので以下のように指定せずに代入しても、そこから推論して<code>number</code>型としてくれます。
<pre><code class="language-ts">const num = 123;
// ok
num = 456</code></pre>

TypeScript の `number` 型について説明してます。

number 型

<code>boolean</code>は、 TypeScript で真偽値だと表現する為の型です。
以下のように<code>boolean</code>を指定すると、代入を真偽値だけに絞れます。
<pre><code class="language-ts">const bool: boolean = true;
// Type '"true"' is not assignable to type 'boolean'.
const boolStr: boolean = 'true';</code></pre>
TypeScript は賢いので以下のように型を省略しても推論して<code>boolean</code>として扱ってくれます。
<pre><code class="language-ts">let bool = true;
// ok
bool = false</code></pre>

TypeScript の `boolean` 型について説明してます。

boolean 型

オブジェクトな値なら何でも入れることができる型です。 型には<code>object</code>を使います。
<pre><code class="language-ts">const obj: object = {};</code></pre>

 <div class="n-md_h3-box">
 <a href="#object_型+構造化したオブジェクトを_Interface_で定義する" aria-label="構造化したオブジェクトを Interface で定義するのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="object_型+構造化したオブジェクトを_Interface_で定義する" class="n-md_h3-heading">構造化したオブジェクトを Interface で定義する</h3>
 </div>
 ある程度構造化した<code>object</code>が使いたいなら、<code>interface</code>で型を作ります。以下は<code>foo</code>と<code>bar</code>というプロパティを持つ<code>Value</code>型の例です。
<pre><code class="language-ts">interface Value {
 foo: number;
 bar: number;
}

const value: Value = {
 foo: 0,
 bar: 1
};</code></pre>
ちなみに、以下は<code>baz</code>は持っていないプロパティなのでエラーになります。結構厳密です。
<pre><code class="language-ts">const value: Value = {
 foo: 0,
 bar: 1,
 baz: 2,
};</code></pre>
<code>baz</code>が静的であれば<code>Value</code>型に<code>baz</code>を追加することで直せます。また動的な場合はインデックスシグネチャを型に追加してあげます。
<pre><code class="language-ts">interface Value {
 [key:string]: number;
 foo: number;
 bar: number;
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#object_型+Interface_で構造化したもののプロパティを変数からアクセスできるようにする" aria-label="Interface で構造化したもののプロパティを変数からアクセスできるようにするのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="object_型+Interface_で構造化したもののプロパティを変数からアクセスできるようにする" class="n-md_h3-heading">Interface で構造化したもののプロパティを変数からアクセスできるようにする</h3>
 </div>
 例えば<code>&#39;foo&#39;</code>はどこからからやってきた変数<code>prop</code>に入っている値だとして、<code>value[prop]</code>で取れそうですがこれはエラーになります。これにはインデックス署名をその Interface に追加する必要があります。
<code>value[prop]</code>で値を取れるようにしたものが以下にあります。<code>[index: string]: number | string</code>部分がその問題の部分です。これは<code>string</code>が来た時に<code>foo</code>か<code>bar</code>の値どちらかが取得できるということを表しています。それは<code>foo</code>と<code>bar</code>プロパティがある為で、値の型は取得できるうるすべてを<a href="https://nju33.com/note/post?note=typescript&amp;post=Union">Union</a>化したものにする必要があります。。
<pre><code class="language-ts">interface Value {
 [index: string]: number | string;
 foo: number;
 bar: string;
}</code></pre>
また<code>[index: string]</code>部分は<code>[index: number]</code>とも定義できます。これは<code>value[number]</code>のようなアクセスの為に必要です。

 <div class="n-md_h3-box">
 <a href="#object_型+Interface_のプロパティを_Partial_化する" aria-label="Interface のプロパティを Partial 化するのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="object_型+Interface_のプロパティを_Partial_化する" class="n-md_h3-heading">Interface のプロパティを Partial 化する</h3>
 </div>
 <h4 id="1部だけ">1部だけ</h4>Partial Propertyとは、あってもなくてもどちらでも構わないというようなプロパティのことです。これはプロパティ名の後<code>:</code>の代わりに<code>?:</code>とするだけです。
試しに<code>bar</code>を Partial 化するとこうなります。無くてもエラーになりません。
<pre><code class="language-ts">interface Value {
 foo: number;
 bar?: number;
}

const value: Value = {
 foo: 'foo'
}</code></pre>
<h4 id="すべてのプロパティを Partial 化">すべてのプロパティを Partial 化</h4>すべてを Partial 化したいなら全てに一々<code>?</code>を付ける必要はありません。<code>Partial</code>という TypeScript 自身が提供している Generics 化を使うことですべてを Partial 化できます。
<pre><code class="language-ts">interface Value {
 foo: number;
 bar: number;
}

type PartialValue = Partial&lt;Value&gt;;</code></pre>
この<code>partialValue</code>は、次のように書くのと同じ意味になります。
<pre><code class="language-ts">interface PartialValue {
 foo?: number;
 bar?: number;
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#object_型+Record_型で一気に定義する" aria-label="Record 型で一気に定義するのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="object_型+Record_型で一気に定義する" class="n-md_h3-heading">Record 型で一気に定義する</h3>
 </div>
 すべてのプロパティが同じ型の時便利なのが<code>Record&lt;P extends string, V&gt;</code>型です。<code>P</code>は、<a href="https://nju33.com/note/post?note=typescript&amp;post=Union">Union</a>な<code>string</code>、<code>V</code>はそれぞれプロパティとなる値を設定します。つまり、<code>P = &#39;foo&#39; | &#39;bar&#39;</code>で<code>V = number</code>の場合、それは<code>{foo: number, bar: number}</code>となります。 つまり、次の2つはまったく同じ型になります。
<pre><code class="language-ts">type Value = Record&lt;'foo' | 'bar', number&gt;;
interface Value {
 foo: number;
 bar: number;
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#object_型+Interface_の_extends_を使ってある構造を継承した新たな構造を作る" aria-label="Interface の extends を使ってある構造を継承した新たな構造を作るのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="object_型+Interface_の_extends_を使ってある構造を継承した新たな構造を作る" class="n-md_h3-heading">Interface の extends を使ってある構造を継承した新たな構造を作る</h3>
 </div>
 以下は<code>Value</code>のプロパティに<code>bar</code>を増やしたものになります。<code>extends</code>で継承しているので<code>foo</code>と<code>bar</code>の記述はいりません。
<pre><code class="language-ts">interface ValueWithBaz extends Value {
 baz: number;
}
// 同じ
interface ValueWithBaz {
 foo: number;
 bar: number;
 baz: number;
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#object_型+Interface_の単純分割" aria-label="Interface の単純分割のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="object_型+Interface_の単純分割" class="n-md_h3-heading">Interface の単純分割</h3>
 </div>
 同じ名前でインターフェースを定義すると勝手に<code>type A = Foo &amp; {children: unknown[]}</code>のようにインターセプトしたタイプのように設定することができます。
<pre><code class="language-ts">interface A {
 foo: string
}

interface A {
 children: unknown[];
}

const a: A = {
 foo: 'foo',
 children: []
};
</code></pre>

 <div class="n-md_h3-box">
 <a href="#object_型+厳密なオブジェクトにする" aria-label="厳密なオブジェクトにするのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="object_型+厳密なオブジェクトにする" class="n-md_h3-heading">厳密なオブジェクトにする</h3>
 </div>
 例えば以下の時、
<pre><code class="language-ts">const a = {
 foo: 'foo',
 bar: 123,
 baz: true
};</code></pre>
これはこのような型が自動で付きます。
<pre><code class="language-ts">{
 foo: string;
 bar: number;
 baz: boolean
}</code></pre>
これは無いよりはマシですが、定数や型の特定に使えるような値がほしい時これではタイプガード系の関数を定義したり、キャストが必要になってしまいます。
そんな場合はオブジェクト宣言の後ろに<code>as const</code>と付けてあげます。（定数であれば<code>Object.freeze</code>でJavaScriptから見た時でも凍結されているようにするとより良いと思います）
<pre><code class="language-ts">const a = {
 foo: 'foo',
 bar: 123,
 baz: true
} as const;</code></pre>
すると型は、
<pre><code class="language-ts">{
 readonly foo: 'foo';
 readonly bar: 123;
 readonly baz: true
}</code></pre>
とすることができます。これにより上書き防止（無いよりマシ）や、<code>if</code>で型の絞り込みができるようになります。
<pre><code class="language-ts">const action: {type: 'foo'; foo: unknown} | {type: 'bar'; bar: unknown} = {};

if (action.type === 'foo') {
 // action = {type: 'foo'; foo: unknown}
}</code></pre>

TypeScript の `object` 型についての説明です。

object 型

配列の型の定義は<code>Array&lt;T&gt;</code>型を使う方法と型の後ろに<code>T[]</code>を付ける方法の２通りあります。<code>Array&lt;T&gt;</code>と<code>T[]</code>の違いはありません。
<pre><code class="language-ts">const foo: Array&lt;string&gt; = [
 'foo',
 'bar',
 'baz',
];

const foo2: string[] = foo;</code></pre>

 <div class="n-md_h3-box">
 <a href="#配列+タプル" aria-label="タプルのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="配列+タプル" class="n-md_h3-heading">タプル</h3>
 </div>
 もし個数や順番、または型がバラバラな型の集まりが決まっているのであれば<code>[A, B, C, D, E]</code>と<code>[]</code>の間に型を羅列した型を定義します。
<pre><code class="language-ts">const foo: [string, number, boolean] = [
 'foo',
 123,
 true,
];</code></pre>
もしタプルを定数化したいなら、指定する型も厳密にしてあげるだけです。
<pre><code class="language-ts">const a: readonly ['foo', 123, true] = [
 'foo',
 123,
 true,
];</code></pre>
ですがこれであれば後ろに値宣言後に<code>as const</code>を付けることで同じ意味にできます。（できれば<code>Object.freeze</code>で凍結化もしておくと良いと思います）
<pre><code class="language-ts">const a = [
 'foo',
 123,
 true,
] as const;
// a: readonly ["foo", 123, true]</code></pre>
例えば引数に上で定義した配列の中のどれかを渡してほしいような関数を定義したいなら、
<pre><code class="language-ts">typeof a[number];
// 'foo' | 123 | true</code></pre>
でユニオン化することができるので、あとは型として使うだけです。

 <div class="n-md_h3-box">
 <a href="#配列+配列の絞り込み" aria-label="配列の絞り込みのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="配列+配列の絞り込み" class="n-md_h3-heading">配列の絞り込み</h3>
 </div>
 Union 型などを配列に絞り込みたい場合は、<code>Array.isArray</code>メソッドを使います。
<pre><code class="language-ts">const foo: string | string[] = [];

if (Array.isArray(foo)) {
 foo; // foo: string[]
}</code></pre>

配列

何も当てはまらない・無いを表現する型です。

 <div class="n-md_h3-box">
 <a href="#void_型+void_型を関数の戻り値で使う" aria-label="void 型を関数の戻り値で使うのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="void_型+void_型を関数の戻り値で使う" class="n-md_h3-heading">void 型を関数の戻り値で使う</h3>
 </div>
 関数の戻り値に使うときは、<code>return</code>も使わないような本当に何も返さない時に使います。基本省略することがほとんどかなと思います。
<pre><code class="language-ts">const fn: (text: string) =&gt; void = text =&gt; {
 console.log(text);
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#void_型+void_型を関数の引数に使う" aria-label="void 型を関数の引数に使うのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="void_型+void_型を関数の引数に使う" class="n-md_h3-heading">void 型を関数の引数に使う</h3>
 </div>
 引数に使うとその引数は無いものとすることができます。 Pertial (<code>?</code>)を付けなくても渡さなくていい引数扱いになります。
<pre><code class="language-ts">const fn = (arg: void) =&gt; {/* ... */};
fn(); // ok

const fn2 = (arg: undefined) =&gt; {/* ... */};
fn2(); // Expected 1 arguments, but got 0.
fn2(undefined);</code></pre>
<h4 id="関数の引数に使うのはどういう時か">関数の引数に使うのはどういう時か</h4>恐らくこれは自分でそういう関数型をわざわざ定義することは99％無いです。 これが便利なのは恐らく、自作の Generic なタイプから引数型に変換するような時に Pertial 化(<code>?</code>)を付けなくてもしなくても引数の数を（型チェック的には）制御できることだと思います。
<pre><code class="language-ts">interface Arguments {
 foo: string;
 bar: void;
}

const foo = (val: Arguments['foo']) =&gt; /* ... */;
const bar = (val: Arguments['bar']) =&gt; /* ... */;

foo('foo'); // ok
foo(); // Expected 1 arguments, but got 0.

bar(); // ok
bar('bar'); // Argument of type '"bar"' is not assignable
 // to parameter of type 'void'.</code></pre>

TypeScript の `void` 型について関数の引数や戻り値に設定した時について説明しています。

void 型

<code>any</code>と似ていますがタイプセーフな型です。型を特定するまであらゆる操作が制限されるみたいな型です。<code>unknown</code>は存在しうるすべての型の Union のようなものかなと思います。(<code>any</code>も)
<pre><code class="language-ts">const foo: unknown = 'foo';
// これは以下のようなもの（`IDO5`などは適当）
const foo: IDO5 | n0lM | 'sowe' | ... | string | number | boolean | undefined | null = 'foo'</code></pre>
上記では<code>&#39;foo&#39;</code>を入れていますが、これは Union に<code>string</code>もしくは<code>&#39;foo&#39;</code>型が含まれる（イメージ）ので代入することができます。
ですが<code>unknown</code>の特徴として、<code>unknown</code>のままではプロパティやプロトタイプメソッドなどすべてのアクセスが制限されてしまいます。
<pre><code class="language-ts">const a: unknown = 'a';
a.foo
// Object is of type 'unknown'.</code></pre>

 <div class="n-md_h3-box">
 <a href="#unknown_型+型を特定する" aria-label="型を特定するのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="unknown_型+型を特定する" class="n-md_h3-heading">型を特定する</h3>
 </div>
 そのまま使えるのならそのままでいいかもしれないですが、<code>unknown</code>で何かしようと思ったら使う前にまず型変換してあげる必要があります。
例えば<code>string | undefined</code>という型<code>value</code>の時、<code>if (value !== undefined) {...}</code>とすることで<code>...</code>では<code>value</code>を<code>string</code>型だということに絞り込むことができます。
「存在しうるすべての型の Union のようなもの」と言ったように<code>unknown</code>は肯定的な<code>if</code>文などで特定の型にキャストすることができます。また他の同じように<code>typeof</code>や<code>instanceof</code>,<code>in</code>などを使った絞り込みも効いてくれます。
例えば以下のように<code>unknown</code>型を<code>string</code>に絞り込めます。
<pre><code class="language-ts">const a: unknown = 'a';
// const a: unknown
if (typeof a === 'string') {
 // const a: string
}</code></pre>
タイプガードの場合。これは<code>Foo</code>や<code>Bar</code>に絞り込みます。
<pre><code class="language-ts">interface Foo {
 foo: string;
}
interface Bar {
 bar: string;
}

const isFoo = (value: unknown): value is Foo =&gt; {
 return typeof value === 'object' &amp;&amp; typeof (value as Foo).foo === 'string';
}

const isBar = (value: unknown): value is Bar =&gt; {
 return typeof value === 'object' &amp;&amp; typeof (value as Bar).bar === 'string';
}


const a: unknown = {};
if (isFoo(a)) {
 // const a: Foo
} else if (isBar(a)) {
 // const a: Bar
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#unknown_型+使い所" aria-label="使い所のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="unknown_型+使い所" class="n-md_h3-heading">使い所</h3>
 </div>
 <ol>
<li>スコープの中で最初からあるわけではないデータ</li>
<li>API を<code>interface</code>で定義していく時に後回しにしたいプロパティの型</li>
<li>関数のオーバーロード定義時ただ引数の数を合わせたいだけの時の型</li>
<li>型の種類が多い（そして数が不明かつ API ドキュメントの無いカオスプロジェクト）</li>
</ol>
みたいな所とかは一旦<code>unknown</code>で置いておいて、使う時になってから実際の型に置き換えたり、キャストしたりするといいかなと思います。
例えば<code>http.createServer</code>と<code>body-parser</code>などの組み合わせで API を実装する時に<code>bodyParser.json()(req, res, next)</code>が終わるまでは<code>req.body</code>へのアクセスはさせたくありません。 そのような時に、最初<code>{body: unknown}</code>としておいて<code>bodyParser</code>のミドルウェア部分が終わった後<code>{body: 実際の方}</code>と設定してあげたりするといいかなと考えます。ミドルウェア部分が終わる前の<code>req.body</code>
あと最近だと強制型変換などで一旦<code>unknown</code>に置いてから目当ての型に再度変換しないと駄目な ESLint ルールとかありしますね。
<pre><code class="language-ts">const a: Foo = {...};
(a as unknown) as Bar</code></pre>

unknown 型

<code>unknown</code>型にとても良く似ています。違うのはあらゆるプロパティにアクセスできる点です。この型を使うと JavaScript のコードを書いてるように型を気にせず書くことができます。
<code>any</code>は以下のように、そんなプロパティは無いので普通なら型エラーになる所ですが、型エラーにならずに記述することができます。もちろんこれは、実行すると「 Uncaught TypeError: Cannot read property &#39;b&#39; of undefined （<code>undefined</code>から<code>b</code>プロパティへアクセスはできせん）」エラーになります。
<pre><code class="language-ts">const num: any = 1;
num.a.b.c
// Uncaught TypeError: Cannot read property 'b' of undefined</code></pre>
使い所はディレクターに実装を急かされてるときです。

any 型

<code>never</code>は、 TypeScript で「あるはずない」を表現するための型です。

 <div class="n-md_h3-box">
 <a href="#never_型+正常に_return_されない可能性のある関数で使う" aria-label="正常に return されない可能性のある関数で使うのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="never_型+正常に_return_されない可能性のある関数で使う" class="n-md_h3-heading">正常に return されない可能性のある関数で使う</h3>
 </div>
 これは例えば、
<ol>
<li>エラーで<code>throw</code>される</li>
<li><code>process.exit</code>で途中で処理を途中で中断する</li>
</ol>
などの時<code>never</code>が当てはまります。
<pre><code class="language-ts">const fn: () =&gt; never = () =&gt; {
 throw new Error('...');
 // process.exit(1)
}</code></pre>
ただ<a href="https://github.com/DefinitelyTyped/DefinitelyTyped">DefinitelyTyped/DefinitelyTyped</a>で型ファイルを追加しようとした時に、<code>never</code>型を使っていたら「<code>never</code>いらないから削除して」と言われたので<code>void</code>と同じで基本省略する形で統一すればいいかもしれません。

 <div class="n-md_h3-box">
 <a href="#never_型+Conditional_Types_でありえない状態の戻り型に指定" aria-label="Conditional Types でありえない状態の戻り型に指定のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="never_型+Conditional_Types_でありえない状態の戻り型に指定" class="n-md_h3-heading">Conditional Types でありえない状態の戻り型に指定</h3>
 </div>
 Conditional Types で型を変換する時に<code>string</code>か<code>number</code>しか期待しないのに<code>Foo</code>という良くわからないものが来てしまった時に、想定外なので<code>never</code>に設定するということが良くあると思います。
<pre><code class="language-ts">type StringOrNumber&lt;T&gt; =
 T extends string
 ? string
 : T extends number
 ? number
 : never</code></pre>

never 型

<div class="n-md_h3-box">
 <a href="#enum+enum_のイメージ" aria-label="enum のイメージのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="enum+enum_のイメージ" class="n-md_h3-heading">enum のイメージ</h3>
 </div>
 同レベルで細分化できるものを羅列したものです。例えば<a href="https://github.com/pricing">GitHub</a>には Free プランと$7 の Pro プランがあるのでこれを<code>enum</code>化するとこうなります。
<pre><code class="language-ts">enum Plan {
 Free,
 Pro
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#enum+型として" aria-label="型としてのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="enum+型として" class="n-md_h3-heading">型として</h3>
 </div>
 例えば以下<code>Person</code>インターフェースは人の名前とプラン情報を持ちます。<code>plan</code>では<code>Plan</code>の何かしらの値を渡さなければならないので値を限定できます。
<pre><code class="language-ts">interface Person {
 name: string;
 plan: Plan;
}

const nju33: Person = {
 name: 'nju33',
 plan: Plan.Pro
};</code></pre>

 <div class="n-md_h3-box">
 <a href="#enum+生成後" aria-label="生成後のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="enum+生成後" class="n-md_h3-heading">生成後</h3>
 </div>
 上の<code>Plan</code>はトランスパイル後このように変換されます。うーん、なんだこりゃ。
<pre><code class="language-js">var Plan;
(function(Plan) {
 Plan[(Plan['Free'] = 0)] = 'Free';
 Plan[(Plan['Developer'] = 1)] = 'Developer';
})(Plan || (Plan = {}));</code></pre>
コードがここだけだとして、ちと簡単にしてみます。
<pre><code class="language-js">var Plan = {};
Plan['Free'] = 0;
Plan[0] = 'Free';
Plan['Developer'] = 0;
Plan[1] = 'Developer';</code></pre>
なるほど。<code>Plan.Free</code>ではその値が、<code>Plan[値]</code>ではそのプロパティ名が取れるようです。このようなオブジェクトということですね。
<pre><code class="language-js">{
 0: "Free"
 1: "Pro"
 Free: 0
 Pro: 1
}</code></pre>
値からも取得できるようにすることをリバースマッピングと言うようです。 

 <div class="n-md_h3-box">
 <a href="#enum+const_enum" aria-label="const enumのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="enum+const_enum" class="n-md_h3-heading">const enum</h3>
 </div>
 これを const enum とするとリバースマッピングが無くなり、<code>Plan.Free</code>のようなオブジェクト値へアクセスの形でしか使えなくなります。
<pre><code class="language-ts">const enum Plan {
 Free,
 Pro
}

console.log(Plan.Free);</code></pre>
これがトランスパイルされるとこうなります。
<pre><code class="language-js">console.log(0);</code></pre>
定義も無くなっています。外からの影響が無いものに使うと良いと思います。

 <div class="n-md_h3-box">
 <a href="#enum+カスタム値" aria-label="カスタム値のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="enum+カスタム値" class="n-md_h3-heading">カスタム値</h3>
 </div>
 <code>=</code>を使って値を代入することができます。
<h4 id="数値">数値</h4><code>enum</code>はデフォルトで<code>0</code>,<code>1</code>...が入るようになっているのでもちろん入れれます。ただ好きな値を入れれます。
<pre><code>enum Plan {
 Free = 2
 Pro = 3
}</code></pre><h4 id="文字列">文字列</h4>文字列を代入できます。1つでも文字列にした場合、それ以外の値も文字列を入れる必要があります。。
<pre><code class="language-ts">enum Plan {
 Free = 'Free',
 Pro = 'Pro'
}</code></pre>
<h4 id="オブジェクト">オブジェクト</h4>残念ながらオブジェクトは代入できません（でした）。ざっくり調べた感じでは代入できるのは上記の数値と文字列だけのようです。
オブジェクトをなんとか<code>enum</code>のように使いたい場合は、その列挙値を<code>switch</code>に渡してその値でオブジェクト値をたぐり寄せる感じで実装する方法があります。
<pre><code class="language-ts">enum Plan {
 Free
 Pro
}

const getPlanObject = (plan: Plan) =&gt; {
 switch (plan) {
 case Plan.Free: {
 return {/*...*/};
 }

 case Plan.Pro: {
 return {/*...*/};
 }
 }
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#enum+前の何かしら値を使う" aria-label="前の何かしら値を使うのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="enum+前の何かしら値を使う" class="n-md_h3-heading">前の何かしら値を使う</h3>
 </div>
 定義の中でなら前に宣言したある enum の値を使って新しい値を作ることができます。
<pre><code class="language-ts">enum Foo {
 A = 1;
 B = A + 1;
 C = A + 2;
}</code></pre>
これはこのように、計算済みの値が使われる形でトランスパイルされます。
<pre><code class="language-js">var Foo;
(function (Foo) {
 Foo[Foo["A"] = 1] = "A";
 Foo[Foo["B"] = 2] = "B";
 Foo[Foo["C"] = 3] = "C";
})(Foo || (Foo = {}));</code></pre>

enum

単にその型の持つプロパティを足し算したようなものです。JavaScriptが分かる人ならオブジェクト同士を<code>Object.assign</code>したようなものだと想像すると分かりやすいと思います。

 <div class="n-md_h3-box">
 <a href="#Intersection+Intersection_の例" aria-label="Intersection の例のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="Intersection+Intersection_の例" class="n-md_h3-heading">Intersection の例</h3>
 </div>
 <pre><code class="language-ts">interface Foo {
 foo: string;
}

interface Bar {
 bar: string;
}

type FooBar = Foo &amp; Bar;
// 以下と同等
// interface FooBar {
// foo: string;
// bar: string;
// }

const fooBar: FooBar = {
 foo: 'foo',
 bar: 'bar'
};</code></pre>

 <div class="n-md_h3-box">
 <a href="#Intersection+使用場所" aria-label="使用場所のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="Intersection+使用場所" class="n-md_h3-heading">使用場所</h3>
 </div>
 個人的には、自分で渡したいのは<code>T</code>だけだけど、実際の関数渡されるのは<code>T &amp; U</code>にしたいというのような場合に使っています。ここで言う<code>U</code>という型は、デフォルト値だったり別な所から渡ってきたりするものです。
<pre><code class="language-ts">interface Props {
 something: any;
}

interface RouterProps {
 history: any;
}

const Router = {
 // モック
 get(): RouterProps {
 return;
 }
}

// こっちは自分から呼び出すことはしない
const realRender: (props: Props &amp; RouterProps) =&gt; null = props =&gt; null;
const render: (props: Props) =&gt; null = props =&gt; {
 const routerProps = Router.get();
 const realProps = {
 ...props,
 ...routerProps,
 };
 return realRender(realProps);
};</code></pre>
例えばこれは<a href="https://www.typescriptlang.org/docs/handbook/decorators.html">Decorator</a>で同じプロパティを使う時とか、ReactのContextと<code>props</code>で一緒に渡したい時とかに使うことができます。

TypeScript の `Intersection` について

Intersection

<code>T</code>か<code>U</code>どちらでも扱えるときに間に<code>|</code>を挟んで<code>T | U</code>という感じで記述します。<code>飲む</code>関数の場合<code>Water | Curry</code>どちらも成り立つというような感じです。

 <div class="n-md_h3-box">
 <a href="#Union+Union_の例" aria-label="Union の例のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="Union+Union_の例" class="n-md_h3-heading">Union の例</h3>
 </div>
 以下は<code>Number</code>でキャストするので<code>string</code>と<code>number</code>どちらでも大丈夫です。
<pre><code class="language-ts">const onePlus = (num: string | number) =&gt; Number(num) + 1;
console.log(onePlus('1')); // 2</code></pre>
次もそれぞれに存在するプロパティを使うので大丈夫な関数です。
<pre><code class="language-ts">interface Value {
 value: number;
}

interface Foo extends Value {
 foo: any;
}

interface Bar extends Value {
 bar: any;
}

const onePlus = (value: Foo | Bar) =&gt; value.value + 1;</code></pre>
<h4 id="JavaScript 構文で絞り込み">JavaScript 構文で絞り込み</h4>次のコードは<code>string | string[]</code>を受け取って必ず<code>string[]</code>で返したい関数です。つまり<code>string</code>だった時は配列に変換してあげる必要があります。　　
こういう時に使うのが<code>typeof</code>や<code>Array.isArray</code>です。TypeScriptは賢いのでこの辺りを使うと型を絞り込んでくれます。
<pre><code class="language-ts">const ensureArray = (value: string | string[]) =&gt; {
 if (typeof value === 'string') {
 // ここで`value`は`string`型
 value = [value];
 }
 // または `!Array.isArray(value)`を使う
 return value;
}</code></pre>
他に型の絞り込みに使えるもので
<ul>
<li><code>instanceof</code></li>
<li><code>in</code><ul>
<li>例えば <code>&#39;foo&#39; in value</code>で<code>Foo</code>に絞込</li>
</ul>
</li>
</ul>
があります。
<h4 id="複雑な絞り込みは Type Guards を使う">複雑な絞り込みは Type Guards を使う</h4>複雑な絞り込みの時は<code>Type Guards</code>を使うとスッキリします。これには<code>arg is T</code>という奇妙な戻り値を返すようにします。 例えば以下の<code>isFoo</code>は値の<code>type: &#39;foo&#39;</code>で<code>hoge</code>プロパティを持ってたら<code>Foo</code>ということにしてる関数です。
<pre><code class="language-ts">interface Foo {
 type: 'foo';
 hoge: string;
}

interface Bar {
 type: 'bar';
 fuga: string;
}

function isFoo(arg: Foo | Bar): arg is Foo {
 return (
 arg.type === 'foo' &amp;&amp; Object.prototype.hasOwnProperty.call(arg, 'hoge')
 );
}

// モック
const arg: Foo | Bar = undefined as any;
if (isFoo(arg)) {
 // ここで`arg`は`Foo`型
 console.log(arg.hoge);
}</code></pre>

Union

「<code>T</code>というジェネリック型が<code>IFoo</code>なら<code>A</code>、違うなら<code>B</code>」というように与えられた型によって分岐した結果の型を返すことができます。

 <div class="n-md_h3-box">
 <a href="#Conditional_Type+基本" aria-label="基本のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="Conditional_Type+基本" class="n-md_h3-heading">基本</h3>
 </div>
 例えばこれはこのような形です。
<pre><code class="language-ts">/**
 * P(arent), C(hild)
 */
type T&lt;U, V&gt; = C extends P ? U : V;</code></pre>
これは<code>C</code>が<code>P</code>の拡張形式なら<code>U</code>型に、違うなら<code>V</code>型になるという意味になります。
<blockquote>
同じプロパティを持ってれば<code>true</code>な感じ、なので継承は<code>true</code>
</blockquote>
<pre><code class="language-ts">class P {}
class C {}
// type T = U

class P {
 foo: any;
}
class C extends P {}
// type T = U

class P {
 foo: any;
}
class C {}
// type T = V</code></pre>

 <div class="n-md_h3-box">
 <a href="#Conditional_Type+Generics_で複数の型を提供する" aria-label="Generics で複数の型を提供するのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="Conditional_Type+Generics_で複数の型を提供する" class="n-md_h3-heading">Generics で複数の型を提供する</h3>
 </div>
 <code>if-else-if-else</code>のように 2 つ以上の条件も設定できます。
<blockquote>
これは属すから<code>true</code>な感じ
</blockquote>
<pre><code class="language-ts">enum StatusCode {
 BadRequest = 400,
 NotFound = 404,
 InternalServerError = 500
}
/** @alias */
type Code = StatusCode;

interface BadRequestResponse {
 code: Code.BadRequest;
 fields: any[];
}

interface NotFoundResponse {
 code: Code.NotFound;
 errors: any[];
}

interface InternalServerErrorResponse {
 code: Code.InternalServerError;
 message: any;
}

type Response&lt;C extends Code&gt; = Code.BadRequest extends C
 ? BadRequestResponse
 : Code.NotFound extends C
 ? NotFoundResponse
 : InternalServerErrorResponse;

type A = Response&lt;Code.NotFound&gt;;
// type A = NotFoundResponse
type B = Response&lt;Code.InternalServerError&gt;;
// type B = InternalServerErrorResponse</code></pre>
<h4 id="Generic Type の再帰はできない">Generic Type の再帰はできない</h4>以下の<code>ReturnTypeRecursive</code>は関数の場合は再帰的に結果を辿っていって最終的な結果の型を取得しようと思ったものですが、これは「循環参照してますよ（Type alias &#39;ReturnTypeRecursive&#39; circularly references itself.ts(2456)）」エラーを起こします。
<pre><code class="language-ts">type ReturnTypeRecursive&lt;
 Fn extends (...args: any[]) =&gt; any
&gt; = ReturnType&lt;Fn&gt; extends (...args: any[]) =&gt; any
 ? ReturnTypeRecursive&lt;Fn&gt;
 : ReturnType&lt;Fn&gt;;</code></pre>
<h4 id="Generic じゃないなら再帰できるようです">Generic じゃないなら再帰できるようです</h4><pre><code class="language-ts">type AFunction = (...args: any[]) =&gt; any | AFunction;</code></pre>
<h4 id="ネストを深くすればそのようなことはできる">ネストを深くすればそのようなことはできる</h4>ネストが浅いのであれば使用したいケースまでの再帰ライクに定義するといった使い方は可能です。
<pre><code class="language-ts">export type ReturnTypeRecursive&lt;Fn extends AFunction&gt; = ReturnType&lt;
 Fn
&gt; extends AFunction
 ? ReturnType&lt;ReturnType&lt;Fn&gt;&gt; extends AFunction
 ? ReturnType&lt;ReturnType&lt;ReturnType&lt;Fn&gt;&gt;&gt; extends AFunction
 ? never
 : ReturnType&lt;ReturnType&lt;ReturnType&lt;Fn&gt;&gt;&gt;
 : ReturnType&lt;ReturnType&lt;Fn&gt;&gt;
 : ReturnType&lt;Fn&gt;;

const aFn = () =&gt; () =&gt; () =&gt; 'foo' as const;
type A = ReturnTypeRecursive&lt;typeof aFn&gt;;
// type A = "foo"</code></pre>

 <div class="n-md_h3-box">
 <a href="#Conditional_Type+<code>infer</code>_で一部分の型を取得する" aria-label="<code>infer</code> で一部分の型を取得するのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="Conditional_Type+<code>infer</code>_で一部分の型を取得する" class="n-md_h3-heading"><code>infer</code> で一部分の型を取得する</h3>
 </div>
 以下は関数の戻り値を取得できます。<code>infer</code>はパターンマッチみたく、その場の型を条件結果の部分で使うことができます。
<pre><code class="language-ts">type ReturnType&lt;T extends Function&gt; = T extends (...args: any[]) =&gt; infer F
 ? F
 : never;
type A = ReturnType&lt;() =&gt; number&gt;;
// type A = number;</code></pre>
実は<code>ReturnType</code>は最初から定義されてるので実装はいりません。
<pre><code class="language-ts">type A = ReturnType&lt;Fn&gt;;</code></pre>
例えば、第 2 引数の型が取りたい場合は、引数の型指定部分で<code>infer</code>を使います。
<pre><code class="language-ts">// tslint:disable:no-unused
type SecondArg&lt;T extends Function&gt; = T extends (
 a1: any,
 // F が [tslint] TypeParameter 'F' is unused. [no-unused]
 // になってしまうので tslint:disable してます
 a2: infer F,
 ...args: any[]
) =&gt; any
 ? F
 : never;
// tslint:enable:no-unused
type A = SecondArg&lt;(_a: number, _b: string, _c: boolean) =&gt; {}&gt;;
// type A = string</code></pre>

TypeScript の `Conditional Type` について

Conditional Type

それぞれ<code>undefined</code>と<code>null</code>型が用意されてます。
<pre><code class="language-ts">const foo: undefined = undefined;
const bar: null = null;
</code></pre>
もし、<code>string | undefined</code>のようなUnionの場合、if構文などで絞り込むことができます。
<pre><code class="language-ts">const foo: string | undefined = '';

if (foo !== void 0) {
 foo; // const foo: string;
}
</code></pre>

 <div class="n-md_h3-box">
 <a href="#Undefined_と_Null+Optional_Chaining" aria-label="Optional Chainingのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="Undefined_と_Null+Optional_Chaining" class="n-md_h3-heading">Optional Chaining</h3>
 </div>
 TypeScriipt@^3.7 から<code>undefined</code>かもしれないオブジェクトのプロパティへのアクセスを簡易に記述できるようになりました。
それ以前までは以下のような型の時、
<pre><code class="language-ts">interface MyObject {
 foo?: {
 bar?: {
 baz(): void;
 };
 };
}
</code></pre>
プロパティ<code>baz</code>へ安全にアクセスしたいなら以下のようにする必要がありました。
<pre><code class="language-ts">const obj: MyObject = {} as MyObject;

if (
 obj.foo !== void 0 &amp;&amp;
 obj.foo.bar !== void 0
) {
 obj.foo.bar.baz();
}
</code></pre>
@^3.7 からは以下のように書くことができます。
<pre><code class="language-ts">obj.foo?.bar?.baz();
</code></pre>
<code>?.</code>という書き方でプロパティにアクセスすることで、値が対象のプロパティが<code>undefined</code>や<code>null</code>の場合は<code>undefined</code>を返し、そうでない場合は対象のプロパティ値を返すようになります。つまり、途中に<code>undefined</code>や<code>null</code>があれば<code>undefined</code>、そうでなければ期待した結果が返ります。

 <div class="n-md_h3-box">
 <a href="#Undefined_と_Null+Nullish_Coalescing" aria-label="Nullish Coalescingのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="Undefined_と_Null+Nullish_Coalescing" class="n-md_h3-heading">Nullish Coalescing</h3>
 </div>
 TypeScriipt@^3.7 から対象の値が<code>undefined</code>か<code>null</code>の時用のフォールバック値を設定する為の構文が追加されました。これは<code>undeefinedかnullかもしれない値 ?? フォールバック値</code>のように<code>??</code>を間に記述します。<code>undefined</code>や<code>null</code>でない場合はそのままその値が使われます。
例えば以下の<code>fn</code>は渡したプリミティブ値をそのまま返してくれるものです。
<pre><code class="language-ts">const fn = &lt;
 Str extends string,
 Num extends number
&gt;(obj: {
 str?: Str;
 num?: Num;
}) =&gt; {
 const str = obj.str ?? ('str' as const);
 const num = obj.num ?? (123 as const);

 return { str, num };
};

const result = fn({
 str: '' as const,
 num: 0 as const
});
// const result: {
// str: "" | "str";
// num: 0 | 123;
// }

console.log(result);
// {str: "", num: 0}
</code></pre>
古くからある<code>||</code>を使うと<code>&#39;&#39;</code>や<code>0</code>はfalsy（<code>false</code>として扱われる）値なので<code>{str: &quot;str&quot;, num: 123}</code>という値が返るようになるという違いがあります。

 <div class="n-md_h3-box">
 <a href="#Undefined_と_Null+組み合わせる" aria-label="組み合わせるのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="Undefined_と_Null+組み合わせる" class="n-md_h3-heading">組み合わせる</h3>
 </div>
 Optional Chaining は値が空の時必ず<code>undefined</code>を返すため、空の時のフォールバック値を設定できる Nullish Coalescing との相性が良いです。
これは深いネストを持つオブジェクトにデフォルト値を設定するのに便利です。
<pre><code class="language-ts">type Obj = { foo?: { bar?: { baz: string } } };

const expectToReturnDefault: Obj = {};
console.log(
 expectToReturnDefault.foo?.bar?.baz ?? "default"
);
// 'default'

const expectToReturnBazValue: Obj = {
 foo: { bar: { baz: "baz" } }
};
console.log(
 expectToReturnBazValue.foo?.bar?.baz ?? "default"
);
// 'baz'
</code></pre>

Undefined

Undefined と Null

<div class="n-md_h3-box">
 <a href="#TypeScript_自身が提供する役立つ_Type_まとめ+Partial" aria-label="Partialのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="TypeScript_自身が提供する役立つ_Type_まとめ+Partial" class="n-md_h3-heading">Partial</h3>
 </div>
 <code>type Partial&lt;T&gt; = { [P in keyof T]?: T[P]; }</code>で定義されてます。<code>T</code>はオブジェクトです。全部のプロパティを<code>?:</code>へ変換しています。これによりすべてのプロパティが省略できる新しい型が取得できます。
<pre><code class="language-ts">type Foo = {
 value: string;
};

type Result = Partial&lt;Foo&gt;;
// type Result = { value?: string; }</code></pre>

 <div class="n-md_h3-box">
 <a href="#TypeScript_自身が提供する役立つ_Type_まとめ+Required" aria-label="Requiredのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="TypeScript_自身が提供する役立つ_Type_まとめ+Required" class="n-md_h3-heading">Required</h3>
 </div>
 <code>type Required&lt;T&gt; = { [P in keyof T]-?: T[P]; }</code>で定義されてます。これは<code>Partial</code>の完全に逆です。そのオブジェクトが持っている<code>?:</code>なプロパティを<code>:</code>へ変換した新しい型が取得できます。
<pre><code class="language-ts">type Foo = {
 value?: string;
};

type Result = Required&lt;Foo&gt;;
// type Result = { value: string; }</code></pre>

 <div class="n-md_h3-box">
 <a href="#TypeScript_自身が提供する役立つ_Type_まとめ+Record" aria-label="Recordのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="TypeScript_自身が提供する役立つ_Type_まとめ+Record" class="n-md_h3-heading">Record</h3>
 </div>
 <code>type Record&lt;K extends string | number | symbol, T&gt; = { [P in K]: T; }</code>で定義されてます。オブジェクトの値の型（<code>T</code>）がすべて同じ時に、それらプロパティ（<code>K</code>）の型をすべて<code>T</code>となるようにまとめて定義することができます。
<pre><code class="language-ts">type Result = Record&lt;'foo' | 'bar' | 'baz', string&gt;;
// type Result = {
// foo: string;
// bar: string;
// baz: string;
// }</code></pre>

 <div class="n-md_h3-box">
 <a href="#TypeScript_自身が提供する役立つ_Type_まとめ+Pick" aria-label="Pickのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="TypeScript_自身が提供する役立つ_Type_まとめ+Pick" class="n-md_h3-heading">Pick</h3>
 </div>
 <code>type Pick&lt;T, K extends keyof T&gt; = { [P in K]: T[P]; }</code>で定義されてます。ある Interface からその型だけの新たな Interface を作ります。
<pre><code class="language-ts">interface Values {
 foo: string;
 bar: number;
 baz: boolean;
}

type Result = Pick&lt;Values, 'foo'&gt;
// type Result = { foo: string; }</code></pre>

 <div class="n-md_h3-box">
 <a href="#TypeScript_自身が提供する役立つ_Type_まとめ+Omit" aria-label="Omitのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="TypeScript_自身が提供する役立つ_Type_まとめ+Omit" class="n-md_h3-heading">Omit</h3>
 </div>
 (TypeScript v3.5 から)これは<code>Pick</code>の逆の動きをします。
<pre><code class="language-ts">interface Values {
 foo: string;
 bar: number;
 baz: boolean;
}

type Result = Pick&lt;Values, 'foo'&gt;
// type Result = { bar: number; baz: boolean }</code></pre>

 <div class="n-md_h3-box">
 <a href="#TypeScript_自身が提供する役立つ_Type_まとめ+Exclude" aria-label="Excludeのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="TypeScript_自身が提供する役立つ_Type_まとめ+Exclude" class="n-md_h3-heading">Exclude</h3>
 </div>
 <code>type Exclude&lt;T, U&gt; = T extends U ? never : T</code>で定義されてます。<code>T</code>と<code>U</code>は文字列リテラル Union 型で<code>T</code>と<code>U</code>を比較し、<code>T</code>にしかない文字列リテラル (Union) 型を返します。
<pre><code class="language-ts">type Result = Exclude&lt;'foo' | 'bar' | 'qux', 'foo' | 'baz'&gt;;
// type Result = 'bar' | 'qux'</code></pre>
TypeScript v3.5 以前では<code>Omit</code>型の代わりに使うことができます。
<pre><code class="language-ts">interface Values {
 foo: string;
 bar: number;
 baz: boolean;
}

type Result = Pick&lt;Values, Exclude&lt;keyof Values, 'foo'&gt;&gt;
// type Result = { bar: number; baz: boolean }</code></pre>

 <div class="n-md_h3-box">
 <a href="#TypeScript_自身が提供する役立つ_Type_まとめ+Extract" aria-label="Extractのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="TypeScript_自身が提供する役立つ_Type_まとめ+Extract" class="n-md_h3-heading">Extract</h3>
 </div>
 <code>type Extract&lt;T, U&gt; = T extends U ? T : never</code>で定義されてます。<code>Exclude</code>に似てますが、こちらは両方にある文字列リテラル (Union) 型を返します。
<pre><code class="language-ts">type Result = Extract&lt;'foo' | 'bar' | 'qux', 'foo' | 'baz'&gt;;
// type Result = 'foo'</code></pre>

 <div class="n-md_h3-box">
 <a href="#TypeScript_自身が提供する役立つ_Type_まとめ+NonNullable" aria-label="NonNullableのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="TypeScript_自身が提供する役立つ_Type_まとめ+NonNullable" class="n-md_h3-heading">NonNullable</h3>
 </div>
 <code>type NonNullable&lt;T&gt; = T extends null ? never : T</code>で定義されてます。<code>T</code>は何でも受け取れます。もしその<code>T</code>が Union で<code>null</code>や<code>undefined</code>を含んでいる場合、それらを取り除いてくれます。
<pre><code class="language-ts">type Result = NonNullable&lt;true | 1 | 'a' | null | undefined&gt;;
// type Result = true | 1 | 'a'</code></pre>

 <div class="n-md_h3-box">
 <a href="#TypeScript_自身が提供する役立つ_Type_まとめ+ReturnType" aria-label="ReturnTypeのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="TypeScript_自身が提供する役立つ_Type_まとめ+ReturnType" class="n-md_h3-heading">ReturnType</h3>
 </div>
 <code>type ReturnType&lt;T extends (...args: any[]) =&gt; any&gt; = T extends (...args: any[]) =&gt; infer R ? R : any</code>で定義されてます。<code>T</code>は関数型になります。これは<code>T</code>の戻り値の型を取得できます。
<pre><code class="language-ts">type Result = ReturnType&lt;() =&gt; number&gt;;
// type Result = number</code></pre>

 <div class="n-md_h3-box">
 <a href="#TypeScript_自身が提供する役立つ_Type_まとめ+InstanceType" aria-label="InstanceTypeのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="TypeScript_自身が提供する役立つ_Type_まとめ+InstanceType" class="n-md_h3-heading">InstanceType</h3>
 </div>
 <code>type InstanceType&lt;T extends new (...args: any[]) =&gt; any&gt; = T extends new (...args: any[]) =&gt; infer R ? R : any</code>で定義されてます。<code>T</code>にはクラスを渡してそのインスタンスの型を取得できます。
<pre><code class="language-ts">class Foo {
 static staticMethodFn() {}
 methodFn() {}
}

type Result = InstanceType&lt;typeof Foo&gt;;
// type Result = Foo ( === {methodFn() {}} )</code></pre>
ただあまりこれは使い方が分からない。<code>(typeof Foo)[&#39;methodFn&#39;]</code>とかはできないので、それを<code>InstanceType&lt;typeof Foo&gt;[&#39;methodFn&#39;]</code>とかする為なのかなとか思います。

TypeScript 自身が提供する役立つ Type まとめ

関数は<code>function</code>から始まる書き方のものとアロー関数どちらも JavaScript のものと同じように書けます。違いは型を追加するだけです。

 <div class="n-md_h3-box">
 <a href="#関数+plusOne_関数" aria-label="plusOne 関数のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="関数+plusOne_関数" class="n-md_h3-heading">plusOne 関数</h3>
 </div>
 ある数値に<code>1</code>足すだけの<code>plusOne</code>関数を定義してみます。まず<code>function</code>のほうで書くと、
<pre><code class="language-ts">function plusOne(num: number) {
 return num + 1;
}
// 暗黙的に戻り値は`number`</code></pre>
アロー関数で書くと、
<pre><code class="language-ts">const plusOne = (num: number) =&gt; {
 return num + 1;
};</code></pre>
のようになります。引数で<code>変数名: 型, 変数名: 型</code>の形で定義していきます。上記のような関数は単純でだいたい何をしているか分かるので TypeScript が暗黙的に設定した戻り値の型(<code>number</code>)で済ますしても大丈夫そうですが、もし複雑で他人が見た時にすぐに判断できないような内容になっていると思ったら戻り値も明確にしておくといいと思います。 戻り値は<code>(...引数): 型</code>のように引数の括弧の後に型を書きます。上記で書いた関数にそれぞれ戻り値情報を足すと、
<pre><code class="language-ts">function plusOne(num: number): number {
 return num + 1;
}

const plusOne = (num: number): number =&gt; {
 return num + 1;
};</code></pre>
という形になります。

 <div class="n-md_h3-box">
 <a href="#関数+ジェネリック_関数" aria-label="ジェネリック 関数のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="関数+ジェネリック_関数" class="n-md_h3-heading">ジェネリック 関数</h3>
 </div>
 引数が<code>object</code>のように単純ではないけれど、ある程度制約を持たせたい（<code>foo</code>というプロパティを持っている構造体を受け取ってその構造体を返したい）ような場合に便利です。ジェネリックは関数名のあとに<code>&lt;T, U&gt;</code>のような感じで定義できるもので、これにより型定義を柔軟にすることができます。
<pre><code class="language-ts">interface A {
 value: number;
}

interface B extends A {}
interface C extends A {}

function plusOne&lt;T extends A&gt;(obj: T): T {
 obj.value = obj.value + 1;
 return obj;
};

const b: B = {value: 1};
const c: C = {value : 2}

plusOne(b); // {value: 2};
plusOne(c); // {value: 3};</code></pre>
<code>extends</code>を使うことで<code>T</code>は<code>A</code>を持っている、または<code>A</code>に属していなければいけないというような制約付けができます。つまり、<code>plusOne({foo: 1})</code>というなものは<code>value</code>プロパティがないので型エラーになります。
また、上記では動的に<code>T</code>の型を設定しています。
<ol>
<li><code>plusOne(b)</code>で<code>b</code>が渡ることで<code>(obj: T)</code>が<code>(obj: B)</code>ということになります。</li>
<li><code>(obj: B)</code>から<code>function plusOne&lt;B&gt;(obj: B)</code>とジェネリクスが埋まり</li>
<li>つまり、<code>function plusOne&lt;B&gt;(obj: B): B</code></li>
</ol>
のように解決されます。もちろんジェネリクスは自分で設定することもできます。その場合は関数呼び出しの名前のあとにジェネリクスを設定します。
<pre><code class="language-ts">plusOne&lt;A&gt;(b);</code></pre>
ただし、このようにジェネリクスを自分で設定できるのは<code>function</code>から書く記法だけです。アロー関数の場合自分でジェネリクスを設定するにはキャストが必要ですが、以下のようにジェネリクスなアロー関数を定義することはできます。
<pre><code class="language-ts">const plusOne = &lt;T extends A&gt;(obj: T): T {
 obj.value = obj.value + 1;
 return obj;
};</code></pre>

 <div class="n-md_h3-box">
 <a href="#関数+動的解決でプロパティを絞り込む" aria-label="動的解決でプロパティを絞り込むのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="関数+動的解決でプロパティを絞り込む" class="n-md_h3-heading">動的解決でプロパティを絞り込む</h3>
 </div>
 動的の利点の１つにどのプロパティ値を受け取ったか分かるというのがあると思います。
<pre><code class="language-ts">interface A {
 str: string;
 num: number;
}

function getProp&lt;T extends A, P extends keyof T&gt;(obj: T, prop: P): T[P] {
 return obj[prop];
};

const a: A = {
 str: 'a',
 num: 1,
}

getProp(a, 'str');
getProp(a, 'num');</code></pre>
それぞれ戻り値が<code>getProp(a, &#39;str&#39;)</code>とした時は<code>string</code>、<code>getProp(a, &#39;num&#39;)</code>とした時は<code>number</code>になります。これは<code>P extends keyof T</code>（つまりここでは<code>P extends &#39;str&#39; | &#39;num&#39;</code>）の<code>P</code>に実際に指定されたプロパティの値を設定してくれることで、<code>T[P]</code>が<code>T[&#39;str&#39;]</code>,<code>T[&#39;num&#39;]</code>と解決してくれるためです。
例えばこれは、<code>getProp&lt;A, keyof A&gt;(a, &#39;num&#39;)</code>と使ったらどうなるでしょう。これは<code>P</code>にすべてのプロパティが来る可能性がでてくるので、オブジェクトの値の型の Union　、今回であれば<code>string | number</code>という戻り型になります。

関数

クラスは<code>Class</code>で定義できます。 JavaScript と同じですね。同じなのでメソッドの定義の仕方やゲッターセッターなどはだいたい同じです。

 <div class="n-md_h3-box">
 <a href="#クラス+値の初期化" aria-label="値の初期化のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="クラス+値の初期化" class="n-md_h3-heading">値の初期化</h3>
 </div>
 クラスなので<code>constructor</code>で定義するのが一般的です。
<pre><code class="language-ts">class A {
 value: number;

 constructor(value: number) {
 this.value = value;
 }
}</code></pre>
先に使うプロパティの型だけ定義しておいて、<code>constructor</code>でそこに代入する感じです。ですがこれだけなら、 TypeScript ではもっと短縮して書くことができます。以下は上の書き方と結果がまったく同じです。
<pre><code class="language-ts">class A { 
 constructor(public value: number) {
 }
}</code></pre>
<code>public</code>とアクセス修飾子を付けています。これは他に<code>private</code>、<code>protected</code>などがありますがこれらの意味は、
<ol>
<li><code>public</code>はどこからでもアクセス可能</li>
<li><code>protected</code>はそれ自身、または継承したものからだけアクセス可能</li>
<li><code>private</code>はそれ自身からしかアクセスできない</li>
</ol>
です。例えば、<code>private</code>を使う場合はこうなります。
<pre><code class="language-ts">class A { 
 constructor(private value: number) {
 }
}</code></pre>
これを逆に短縮じゃない方法にすると、
<pre><code class="language-ts">class A {
 private value: number;

 constructor(value: number) {
 this.value = value;
 }
}</code></pre>
のようになります。定義のほうでアクセス修飾子を付ける感じですね。

 <div class="n-md_h3-box">
 <a href="#クラス+constructor_以外で値の初期化" aria-label="constructor 以外で値の初期化のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="クラス+constructor_以外で値の初期化" class="n-md_h3-heading">constructor 以外で値の初期化</h3>
 </div>
 TypeScript の<code>strictPropertyInitialization</code>設定を有効にしていると<code>constructor</code>で初期化していないプロパティは警告を受けます。例えば以下のような感じのときです。
<pre><code class="language-ts">class A {
 // Property 'value' has no initializer 
 // and is not definitely assigned in the constructor.
 value: number;

 componentDidMount() {
 this.value = 123;
 }
}</code></pre>
もし<code>componentDidMount</code>が100%呼ばれるから<code>value</code>には<code>number</code>が入っているんだと自信がある場合は、
<pre><code class="language-ts">class A {
 value!: number;

 componentDidMount() {
 this.value = 123;
 }
}</code></pre>
<code>value!: number;</code>のように<code>!</code>を付けることで警告を回避できます。

 <div class="n-md_h3-box">
 <a href="#クラス+スタティック値" aria-label="スタティック値のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="クラス+スタティック値" class="n-md_h3-heading">スタティック値</h3>
 </div>
 スタティック値とは、プロトタイプではないそれ自信のプロパティ（クラス自体に生やす）の値のことです。これを定義するには<code>public</code>のように頭に<code>static</code>と書くだけです。
<pre><code class="language-ts">class A {
 static foo = 'static foo';
}

A.foo; // 'static foo'</code></pre>

 <div class="n-md_h3-box">
 <a href="#クラス+ジェネリクスなクラス" aria-label="ジェネリクスなクラスのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="クラス+ジェネリクスなクラス" class="n-md_h3-heading">ジェネリクスなクラス</h3>
 </div>
 クラス名のあとにジェネリクス型の設定を書くことができます。
<pre><code class="language-ts">class A&lt;T&gt; {
 // ...
}</code></pre>
<code>constructor</code>まで自分で定義しているなら動的に<code>T</code>を解決できるかもしれませんし、もし設定してからじゃないと使えない場合は、
<pre><code class="language-ts">const a = new A&lt;Foo&gt;();
// T === Foo</code></pre>
のように型を指定して使うことができます。

クラス

抽象クラス（<code>abstract class</code>）を使うと、あるプロパティ値の定義を必ず行ってほしいことを継承先のクラスへ伝えることができます。
抽象クラスは、単体では使うことができません。必ずクラスで継承して使います。 インターフェース（<code>interface</code>）との違いは、抽象クラスは共通になりそうな部分はプロパティ値を入れたりやメソッドを実装した状態で用意できる点です。

 <div class="n-md_h3-box">
 <a href="#抽象クラス+抽象クラスを定義する" aria-label="抽象クラスを定義するのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="抽象クラス+抽象クラスを定義する" class="n-md_h3-heading">抽象クラスを定義する</h3>
 </div>
 クラスは<code>class</code>というワードで定義していましたが、これは<code>abstract class</code>というワードで定義します。
<pre><code class="language-ts">abstract class A {
 abstract foo: string;

 abstract bar(): string;

 baz() {
 console.log('baz');
 }
}</code></pre>
そして、クラスの継承のように<code>extends</code>のあとに置くだけです。以下のように書いただけの時<code>AA</code>は型エラーになります。
<pre><code class="language-ts">class AA extends A {}
// Non-abstract class 'AA' does not implement inherited 
// abstract member 'bar' from class 'A'.
//
// Non-abstract class 'AA' does not implement inherited
// abstract member 'foo' from class 'A'.</code></pre>
これは<code>abstract</code>アクセス修飾子を付けて宣言したものは、継承先で必ず実装しなければならない為です。<code>foo</code>と<code>bar</code>を以下のように実装すれば型エラーは解消できます。
<pre><code class="language-ts">class AA extends A {
 foo = 'foo';
 bar() {
 return 'bar';
 }
}</code></pre>
インスタンスを作成した時に、<code>baz</code>は抽象クラスで宣言したものがそのまま使うことができます。もちろん<code>AA</code>で実装した<code>foo</code>と<code>bar</code>も使えます。
<pre><code class="language-ts">const aa = new AA();
aa.baz();
// 'baz'

aa.foo;
aa.bar();</code></pre>

 <div class="n-md_h3-box">
 <a href="#抽象クラス+抽象クラスの継承" aria-label="抽象クラスの継承のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="抽象クラス+抽象クラスの継承" class="n-md_h3-heading">抽象クラスの継承</h3>
 </div>
 抽象クラスは以下のように継承することができます。
<pre><code class="language-ts">abstract class AA extends A {
 foo = 'foo';
 abstract qux: string;
}</code></pre>
<code>foo</code>を抽象プロパティではなくしたり、新たな抽象プロパティ・メソッドを宣言することができます。
これを継承して作るクラスは<code>bar</code>と<code>qux</code>の実装が必須になります。
<pre><code class="language-ts">class AAA extends AA {
 bar() {
 return 'bar';
 }
 qux = 'qux';
}</code></pre>

抽象クラス

JavaScript と同じようにクラスのプロパティ宣言時に名前の頭に<code>get</code>を付けるとゲッター、<code>set</code>を付けるとセッターを定義できます。
<pre><code class="language-ts">class Foo {
 private _value: string;

 public get value() {
 // Type 'string | undefined' is not assignable to type 'string'.
 // Type 'undefined' is not assignable to type 'string'
 return this._value;
 }

 public set value(value: string) {
 this._value = value;
 }
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#ゲッター、セッター+ゲッターの戻り値はセッターの引数の型になる" aria-label="ゲッターの戻り値はセッターの引数の型になるのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="ゲッター、セッター+ゲッターの戻り値はセッターの引数の型になる" class="n-md_h3-heading">ゲッターの戻り値はセッターの引数の型になる</h3>
 </div>
 以下のコードはエラーになります。
<pre><code class="language-ts">class Foo {
 private _value: string | undefined;

 public get value() {
 return this._value;
 }

 public set value(value: string) {
 this._value = value;
 }
}</code></pre>
セッターで<code>string</code>を代入していることでゲッターは<code>string</code>の戻り値を期待するようになりますが、肝心の<code>_value</code>は<code>undefined</code>である可能性があるということになるからです。

ゲッター、セッター

コメントは JavaScript と同じ、一行コメント<code>// ...</code>と<code>/* ... */</code>ブロックコメントが使えます。
<pre><code class="language-ts">// 1行...
// 1行...
// 1行...

/*
 * 1行
 * 2行
 * 3行
 */</code></pre>

 <div class="n-md_h3-box">
 <a href="#コメント+特殊なコメント" aria-label="特殊なコメントのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="コメント+特殊なコメント" class="n-md_h3-heading">特殊なコメント</h3>
 </div>
 <code>// @ts-ignore</code>というコメントを TypeScript の型エラーが置きている部分の1行上に書くと、その型エラーを無視することができます。例えば以下のようなコードのとき、
<pre><code class="language-ts">const a = { a: 1 };
// @ts-ignore
a.foo;</code></pre>
<code>a.foo</code>の箇所は本来<code>Property &#39;foo&#39; does not exist on type &#39;{ a: number; }&#39;.</code>というエラーになりますが、これを無視しています。

<code>tsconfig.json</code>で<code>declaration</code>は<code>true</code>にする必要があります。また<code>outDir</code>で出力先も指定します。
<pre><code class="language-json">{
 "compilerOptions": {
 "declaration": true,
 "outDir": "./dist/types"
 }
}</code></pre>
あとは、<code>--emitDeclarationOnly</code>フラグを<code>tsc</code>コマンドにつけて実行するだけです。
<pre><code class="language-sh">tsc --emitDeclarationOnly
# 設定ファイル指定
# tsc -P tsconfig.types.json --emitDeclarationOnly</code></pre>

 <div class="n-md_h3-box">
 <a href="#型定義ファイル（d.ts）ファイルのみ出力する+設定晒し" aria-label="設定晒しのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="型定義ファイル（d.ts）ファイルのみ出力する+設定晒し" class="n-md_h3-heading">設定晒し</h3>
 </div>
 僕は<code>tsconfig.types.json</code>でこんな設定でやってます。
<pre><code class="language-json">{
 "extends": "@nju33/tsconfig-types",
 "include": ["src/**/*"],
 "exclude": ["src/__tests__/**/*", "src/**/*test*"],
 "compilerOptions": {
 "outDir": "dist/types"
 }
}</code></pre>
おおまかなところは自分の設定ファイルとして<a href="https://github.com/nju33/config/blob/master/packages/tsconfig/types/tsconfig.json">別パッケージ</a>にまとめてしまって、プロジェクト毎にそれをインストールして<code>include</code>などパス関連のものだけ再設定している感じです。

tsc コマンドを使って TypeScript ビルド時に型定義ファイル（d.ts）ファイルのみ出力する方法

型定義ファイル（d.ts）ファイルのみ出力する

<code>tsc</code>コマンドに<code>--showConfig</code>を付けることで「ちゃんと対象のファイルが<code>include</code>に含まれているか」など内容を確認できます。
<pre><code class="language-sh">tsc --showConfig</code></pre>
もし、<code>tsconfig.*.json</code>のように複数の設定ファイルがあるなら<code>-P</code>オプションフラグで指定することで、その設定ファイルでの内容を確認できます。
<pre><code class="language-sh">tsc --showConfig -P tsconfig.types.json</code></pre>

tsconfig.json の内容を確認する

大きなプロジェクトになるとパスが複雑になってくることがあります。例えば<code>../../../../foo/bar</code>のように深いネストにあるファイルから別の深いネストにあるファイルを参照したい場合などです。
そのような場合は<code>tsocnfig.json</code>で<code>paths</code>セクションを設定することで<code>foo/bar</code>のように短いパスとすることができます。先に「<code>foo/</code>以下はアレを入れるディレクトリだ」というように決めてから設定しましょう。

 <div class="n-md_h3-box">
 <a href="#モジュールパスのエイリアス+エイリアスを設定する" aria-label="エイリアスを設定するのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="モジュールパスのエイリアス+エイリアスを設定する" class="n-md_h3-heading">エイリアスを設定する</h3>
 </div>
 設定が必要なセクションは２つです。
<table>
<thead>
<tr>
<th align="left">セクション</th>
<th align="left">説明</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><code>baseUrl</code></td>
<td align="left"><code>paths</code>の共通パス</td>
</tr>
<tr>
<td align="left"><code>paths</code></td>
<td align="left"><code>baseUrl</code>以降のパスのマップ</td>
</tr>
</tbody></table>
<h4 id="例">例</h4>このように設定してみました。
<pre><code class="language-json">{
 "baseUrl": "src",
 "paths": {
 "foo/*": [
 "foo/*",
 "foo/*/src/index.ts"
 ],
 "foo": [
 "foo",
 "foo/src/index.ts"
 ]
 }
}</code></pre>
これは<code>foo</code>や<code>foo/bar/baz</code>というエイリアス名と何かしらの対象ファイルを紐付ける設定です。
例えば、<code>foo/*</code>であれば<code>[&quot;foo/*&quot;,&quot;foo/*/src/index.ts&quot;]</code>を見ると設定していますね。これは<code>foo/bar/baz</code>という名前でインポートしようとした時に、まずは<code>src/foo/bar/baz/package.json</code>に<code>main</code>や<code>module</code>などの記載があり、その対象のファイルが存在すればそれを使ってくださいという設定です。もし、それが無ければ配列の次の要素の「<code>src/foo/bar/baz/src/index.ts</code>を使ってね」となります。
２つ設定しているのは、残念ながら<code>foo</code>で読み込みたい時に<code>foo/*</code>という設定は効かない為、同じ用な設定が必要になります。

 <div class="n-md_h3-box">
 <a href="#モジュールパスのエイリアス+注意" aria-label="注意のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="モジュールパスのエイリアス+注意" class="n-md_h3-heading">注意</h3>
 </div>
 僕がよくエイリアスの設定が効かない問題に引っかかります。そんな時は大抵これです。
<ol>
<li>この<code>.ts</code>ファイルはどの<code>tsconfig</code>を見ているのか</li>
<li>その<code>tsconfig</code>の<code>files</code>に対象の<code>.ts</code>ファイルは含まれているか</li>
</ol>
を確認しましょう。

TypeScript の paths を効かせる

TypeScript の paths 設定が効くようにする

TypeScript と使う設定

モジュールパスのエイリアス

こんな感じで静的プロパティに値を定義しているような値を想定します。
<pre><code class="language-ts">function foo() {
 /* ... */
}
foo.hoge = '...';
foo.fuga = () =&gt; {
 /* ... */
};</code></pre>

 <div class="n-md_h3-box">
 <a href="#関数の静的プロパティの型付け+依存パッケージの型付け" aria-label="依存パッケージの型付けのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="関数の静的プロパティの型付け+依存パッケージの型付け" class="n-md_h3-heading">依存パッケージの型付け</h3>
 </div>
 上の<code>foo</code>が<code>foo</code>パッケージで提供されていて、型ファイルが提供されていない時はこのように定義できます。
<pre><code class="language-ts">declare module 'foo' {
 function foo(): any;
 namespace foo {
 export let hoge: string;
 export let fuga: () =&gt; any;
 }

 export = foo;
}</code></pre>
これをどこかプロジェクトに<code>foo/index.d.ts</code>として作成します。そのモジュールを読み込むと型が効いているはずです。
<pre><code class="language-ts">import foo from 'foo';

foo();
foo.hoge = 'ads';
foo.fuga();</code></pre>

 <div class="n-md_h3-box">
 <a href="#関数の静的プロパティの型付け+ソースコードの中で" aria-label="ソースコードの中でのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="関数の静的プロパティの型付け+ソースコードの中で" class="n-md_h3-heading">ソースコードの中で</h3>
 </div>
 同じようにコードの中で定義すればいいです。 <code>function</code>で定義するものはそのまま値を入れることで型が付きます。
<pre><code class="language-ts">function foo() {}
foo.hoge = 'string';
// `foo.hoge` は `string`
foo.hoge = 123;
// `foo.hoge` は `string | number`</code></pre>
厳密にしたいなら<code>namespace</code>を使います。
<pre><code class="language-ts">function foo() {}
namespace hoge {
 export let paths: string;
}
foo.hoge = 'string';
// `foo.hoge = 123` は型エラー</code></pre>
しかし、この方法は関数の中で定義する関数には効きません。 やっぱり、変数に置いて変数の型を設定してあげるといいです。
<pre><code class="language-ts">const foo: {(): void; hoge: string} = function() {};
foo.hoge = 'string';

const createFn = () =&gt; {
 const fn: {(): void; hoge: string} = function() {};
 fn.hoge = 'string';

 return fn;
};</code></pre>

関数の静的プロパティの型付ける方法

関数の静的プロパティの型付け

以下はちゃんと管理されているプロジェクトでは、こんなことはあまり起こらないだろうなという内容です。
僕は Flux の State 部分をこのように定義して使ったりすることが多いです。
<pre><code class="language-ts">interface State {
 values: {foo: any; bar: any}[];
}</code></pre>
オブジェクト部分なども直で書いてます。（APIの仕様がはっきりしないままで、どの値を使えばいいのか曖昧なことが多いというのが大きい、今の会社）
そして、例えばその<code>values</code>のうちの１つ、つまり<code>{foo: any; bar: any}</code>だけを受け取る関数などを定義したいときに、指定に例えば<code>(value: {foo: any; bar: any}) =&gt; void</code>のようにしても問題はあまりないですが、できれば先程定義した<code>State</code>から使いたいです。
TypeScript の型は子プロパティ名で絞り込んでいくことができます。つまり、<code>{foo: any; bar: any}[]</code>は<code>State[&#39;values&#39;]</code>とも書くことができます。ただここで「<code>[]</code>はどうすれば取り払えるんだろう」と頭をひねりました。ただそれはすぐ解決することができました。

 <div class="n-md_h3-box">
 <a href="#配列型_T[]_から_T_だけ取り出して使う方法+配列型_T[]_から_T_だけ取り出して使う" aria-label="配列型 T[] から T だけ取り出して使うのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="配列型_T[]_から_T_だけ取り出して使う方法+配列型_T[]_から_T_だけ取り出して使う" class="n-md_h3-heading">配列型 T[] から T だけ取り出して使う</h3>
 </div>
 ここでいう<code>T[]</code>ですが、実は TypeScript では以下のように定義したものとほぼ同じです。
<pre><code class="language-ts">interface StateValues extends Array&lt;string&gt; {
 [n: number]: string
}

const state: StateValues = ['foo'];</code></pre>
この<code>[n: number]: string</code>部分はインデックス署名と言い、<code>extends number</code>なプロパティ名ならプロパティへのアクセスが許可されるようになります。これは型のプロパティ名での絞り込みで<code>extends number</code>な型を指定することで、さらに絞ることができるということになります。
つまり、以下のような絞り込み方法があります。（僕的には<code>number</code>がいいかなと思います）
<pre><code class="language-ts">const value0: State['values'][number] = 'foo';
const value1: State['values'][0] = 'foo';
const value2: State['values'][1] = 'foo';
const value99: State['values'][99] = 'foo';</code></pre>
<iframe src="https://codesandbox.io/embed/oxr0k0w59q?module=%2Fsrc%2Findex.ts&view=editor" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" title="検証/T[] から T を使う"></iframe>

ちなみに、<code>State[&#39;values&#39;][]</code>とするとこれは<code>{foo: any; bar: any}[][]</code>となってしまうので注意です。

配列型 T[] から T だけ取り出して使う方法です。何か新たに`type`を宣言したりしなくても取り出すことができます。

配列型 T[] から T だけ取り出して使う方法

ざっとこのようになります。ちなみに<code>yarn</code>を使います。
<ol>
<li><code>package.json</code>を作ってプロジェクト化する</li>
<li><code>typescript</code>インストール</li>
<li>TypeScript の設定ファイルを作る</li>
<li>適当に<code>.ts</code>ファイルを作る</li>
<li>変換して<code>.js</code>ファイルを作る</li>
</ol>

 <div class="n-md_h3-box">
 <a href="#環境構築から_JavaScript_に変換まで+package.json_を作ってプロジェクト化する" aria-label="package.json を作ってプロジェクト化するのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="環境構築から_JavaScript_に変換まで+package.json_を作ってプロジェクト化する" class="n-md_h3-heading">package.json を作ってプロジェクト化する</h3>
 </div>
 適当なディレクトリに移動するか作成して、<code>yarn init -y</code>で<code>package.json</code>を生成します。
以下の例では<code>/tmp/ts2js</code>というディレクトリで作業する想定です。
<pre><code class="language-sh">mkdir -p /tmp/ts2js
cd /tmp/ts2js
yarn init -y</code></pre>

 <div class="n-md_h3-box">
 <a href="#環境構築から_JavaScript_に変換まで+typescript_インストール" aria-label="typescript インストールのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="環境構築から_JavaScript_に変換まで+typescript_インストール" class="n-md_h3-heading">typescript インストール</h3>
 </div>
 <code>/tmp/ts2js</code>ディレクトリ上で以下でインストールします。
<pre><code class="language-sh">yarn add -D typescript</code></pre>
<code>package.json</code>に<code>devDependencies</code>セクションに<code>typescript</code>が追加されれば完了です。
<pre><code class="language-json">{
 "devDependencies": {
 "typescript": "^3.4.4"
 }
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#環境構築から_JavaScript_に変換まで+TypeScript_の設定ファイルを作る" aria-label="TypeScript の設定ファイルを作るのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="環境構築から_JavaScript_に変換まで+TypeScript_の設定ファイルを作る" class="n-md_h3-heading">TypeScript の設定ファイルを作る</h3>
 </div>
 <code>/tmp/ts2js/tsconfig.json</code>となるように<code>tsconfig.json</code>を作ります。これは「どのファイルを変換対象にするか」や「どこまで TypeScript の機能を使うか」などを設定する為のファイルです。
ここでは<code>/tmp/ts2js/src/index.ts</code>をこれから作り、<code>/tmp/ts2js/dist/index.js</code>となるように出力させたいと思います。なのでその<code>index.ts</code>が変換対象できるような設定を追加します。
これには<code>include</code>セクションと<code>compilerOptions.outDir</code>セクションを<code>tsconfig.json</code>へ置きます。それぞれ、「どのファイルを変換対象にするか」と「どこへ出力するか」の設定です。
<pre><code class="language-json">{
 "include": ["src"],
 "compilerOptions": {
 "outDir": "dist"
 }
}</code></pre>
<code>src</code>と設定していますがこれは<code>src/**/*</code>のようなものでそのディレクトリ以下すべてのファイルという意味になります。
では確認するために<code>index.ts</code>ファイルを作ります。
<pre><code class="language-sh">mkdir -p /tmp/ts2js/src/
touch /tmp/ts2js/src/index.ts
yarn tsc --showConfig</code></pre>
<code>yarn tsc --showConfig</code>は先ほど作った<code>tsconfig.json</code>を見てちゃんと設定されているか確認するためのコマンドです。実は<code>include</code>というのは動的なオプションで変換コマンド実行時に<code>src</code>以下のファイルをチェックして都度変換ファイルに含めてくれるセクションです。
うまく行けばこのように<code>files</code>というセクションが追加された状態のものが表示されると思います。これが動的に設定された変換対象ファイルになります。
<pre><code class="language-json">{
 "compilerOptions": {
 "outDir": "dist"
 },
 "files": [
 "./src/index.ts"
 ],
 "include": [
 "src"
 ]
}</code></pre>

 <div class="n-md_h3-box">
 <a href="#環境構築から_JavaScript_に変換まで+index.ts_ファイルを編集する" aria-label="index.ts ファイルを編集するのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="環境構築から_JavaScript_に変換まで+index.ts_ファイルを編集する" class="n-md_h3-heading">index.ts ファイルを編集する</h3>
 </div>
 確認のために型を使う簡単な<code>.ts</code>ファイルを作ります。こんな感の<code>1</code>足すだけの<code>plusOne</code>を定義・使ってみました。
<pre><code class="language-ts">const plusOne = (num: number) =&gt; num + 1;
console.log(plusOne(2));</code></pre>

 <div class="n-md_h3-box">
 <a href="#環境構築から_JavaScript_に変換まで+変換して_JavaScript_ファイルを作る" aria-label="変換して JavaScript ファイルを作るのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="環境構築から_JavaScript_に変換まで+変換して_JavaScript_ファイルを作る" class="n-md_h3-heading">変換して JavaScript ファイルを作る</h3>
 </div>
 これも以下を実行するだけです。
<pre><code class="language-sh">yarn tsc</code></pre>
問題が無ければ<code>/tmp/ts2js/dist/index.js</code>というファイルが作られているはずです。ついでに実行してみます。
<pre><code class="language-sh">node dist/index.js
# 3</code></pre>
ちゃんと<code>3</code>が得られたのでうまく動いてるようです。

環境構築から JavaScript に変換まで

<div class="n-md_h3-box">
 <a href="#エラー+ビルド時" aria-label="ビルド時のアンカー" class="n-md_h3-anchor"></a>
 <h3 id="エラー+ビルド時" class="n-md_h3-heading">ビルド時</h3>
 </div>
 <h4 id="TS2564: Property &#39;...&#39; has no initializer and is not definitely assigned in the constructor.">TS2564: Property &#39;...&#39; has no initializer and is not definitely assigned in the constructor.</h4><code>tsconfig.json</code>の<code>strictPropertyInitialization</code>を<code>false</code>にするか、対象ファイルのプロパティ型宣言部分を<code>foo!: string</code>のように<code>!</code>を付ける。
<h4 id="TS2339: Property &#39;includes&#39; does not exist on type &#39;...&#39;">TS2339: Property &#39;includes&#39; does not exist on type &#39;...&#39;</h4><code>tsconfig.json</code>の<code>lib</code>に<code>es7</code>を含める。
<h4 id="TS2339: Property &#39;entries&#39; does not exist on type &#39;...&#39;">TS2339: Property &#39;entries&#39; does not exist on type &#39;...&#39;</h4><code>tsconfig.json</code>の<code>lib</code>に<code>esnext</code>を含める。
<h4 id="import {...} from &#39;microrouter&#39;; SyntaxError: Unexpected token {">import {...} from &#39;microrouter&#39;; SyntaxError: Unexpected token {</h4><code>commonjs</code>での実行が必要な部分に<code>esnext</code>を使っている可能性があります。<code>compilerOptions.module</code>が<code>commonjs</code>になってないならそれかもしれません。
<h4 id="&#39;this&#39; implicitly has type &#39;any&#39; because it does not have a type annotation.">&#39;this&#39; implicitly has type &#39;any&#39; because it does not have a type annotation.</h4><code>function</code>の<code>this</code>の型を指定してあげる。
<pre><code class="language-ts">function foo(this: Foo) {
 /*...*/
}</code></pre>
<h4 id="Duplicate identifier &#39;...&#39;">Duplicate identifier &#39;...&#39;</h4><a href="https://gyazo.com/b40dfdab1d4bb956dc80d4e20becc306"><div data-tag="img" data-src="https://i.gyazo.com/b40dfdab1d4bb956dc80d4e20becc306.png" alt="null" style="min-height: 30em"></div></a>
<code>tsconfig.json</code>の<code>compilerOptions.types</code>を使っているパッケージだけにする。 直接使っている型なら、<code>node_modules</code>の削除と<code>yarn cache clean</code>、またモノレポであればその型パッケージバージョンをすべてのワークスペースで統一するなど。

 <div class="n-md_h3-box">
 <a href="#エラー+jest" aria-label="jestのアンカー" class="n-md_h3-anchor"></a>
 <h3 id="エラー+jest" class="n-md_h3-heading">jest</h3>
 </div>
 <h4 id="Cannot find name &#39;test&#39;. Do you need to install type definitions for a test runner? Try <code>npm i @types/jest</code> or <code>npm i @types/mocha</code> and then add <code>jest</code> or <code>mocha</code> to the types field in your tsconfig.ts(2593)">Cannot find name &#39;test&#39;. Do you need to install type definitions for a test runner? Try <code>npm i @types/jest</code> or <code>npm i @types/mocha</code> and then add <code>jest</code> or <code>mocha</code> to the types field in your tsconfig.ts(2593)</h4><code>compilerOptions.typeRoots</code>や<code>compilerOptions.types</code>が変なことになっていないか確認する。上の<code>Duplicate identifier &#39;...&#39;</code>の対応で<code>jest</code>を含めていないなど。