基本型

プログラムが役に立つためには、数値、文字列、構造体、真偽値など、最も単純なデータ単位を扱うことができなければなりません。TypeScriptでは、JavaScriptで期待されるのと同じ型をサポートしており、列挙型を追加して処理を支援しています。

真偽値（Boolean）

最も基本的なデータ型は、単純なtrue/false値であり、JavaScriptとTypeScriptでは`boolean`値と呼ばれます。

ts
let isDone: boolean = false;Try

数値（Number）

JavaScriptと同様に、TypeScriptのすべて数値は浮動小数点数値またはBigIntです。これらの浮動小数点数には`number`型が、BigIntには`bigint`型が割り当てられます。16進数と10進数のリテラルに加えて、TypeScriptはECMAScript 2015で導入された2進数と8進数のリテラルもサポートしています。

ts
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;Try

文字列（String）

Webページとサーバーの両方でJavaScriptを使用してプログラムを作成する際のもう1つの基本的な部分は、テキストデータの処理です。他の言語と同様に、これらのテキストデータ型を参照するために`string`型を使用します。JavaScriptと同様に、TypeScriptも文字列データを囲むために二重引用符（`"`）または単一引用符（`'`）を使用します。

ts
let color: string = "blue";
color = 'red';Try

複数行にまたがり、式を埋め込むことができる*テンプレート文字列*も使用できます。これらの文字列はバックティック/バッククォート（```）文字で囲まれ、埋め込まれた式は`${ expr }`の形式になります。

ts
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.
 
I'll be ${age + 1} years old next month.`;Try

これは、次のように`sentence`を宣言するのと同じです。

ts
let sentence: string =
  "Hello, my name is " +
  fullName +
  ".\n\n" +
  "I'll be " +
  (age + 1) +
  " years old next month.";Try

配列（Array）

TypeScriptは、JavaScriptと同様に、値の配列を扱うことができます。配列型は、2つのいずれかの方法で記述できます。1つ目は、要素の型の後に`[]`を使用して、その要素型の配列を示します。

ts
let list: number[] = [1, 2, 3];Try

2つ目の方法は、ジェネリック配列型`Array<elemType>`を使用します。

ts
let list: Array<number> = [1, 2, 3];Try

タプル（Tuple）

タプル型を使用すると、型のわかっている固定数の要素を持つ配列を表現できますが、同じ型である必要はありません。たとえば、値を`string`と`number`のペアとして表す場合があります。

ts
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error
Type 'number' is not assignable to type 'string'.
Type 'string' is not assignable to type 'number'.2322
2322Type 'number' is not assignable to type 'string'.
Type 'string' is not assignable to type 'number'.Try

既知のインデックスを持つ要素にアクセスすると、正しい型が取得されます。

ts
// OK
console.log(x[0].substring(1));
 
console.log(x[1].substring(1));
Property 'substring' does not exist on type 'number'.2339Property 'substring' does not exist on type 'number'.Try

既知のインデックスのセット外の要素にアクセスしようとすると、エラーが発生します。

ts
x[3] = "world";
Tuple type '[string, number]' of length '2' has no element at index '3'.2493Tuple type '[string, number]' of length '2' has no element at index '3'.
 
console.log(x[5].toString());
Object is possibly 'undefined'.
Tuple type '[string, number]' of length '2' has no element at index '5'.2532
2493Object is possibly 'undefined'.
Tuple type '[string, number]' of length '2' has no element at index '5'.Try

列挙型

JavaScriptの標準データ型セットに役立つ追加機能として、enum（列挙型）があります。C#などの言語と同様に、列挙型は数値のセットにわかりやすい名前を付ける方法です。

ts
enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;Try

デフォルトでは、列挙型はそのメンバーの番号付けを0から開始します。これは、メンバーのいずれかの値を手動で設定することで変更できます。たとえば、前の例を0ではなく1から開始できます。

ts
enum Color {
  Red = 1,
  Green,
  Blue,
}
let c: Color = Color.Green;Try

または、列挙型のすべての値を手動で設定することもできます。

ts
enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
let c: Color = Color.Green;Try

列挙型の便利な機能は、数値から列挙型のその値の名前に変換できることです。たとえば、値2があるが、上記のColor列挙型でそれが何を表しているかわからない場合は、対応する名前を調べることができます。

ts
enum Color {
  Red = 1,
  Green,
  Blue,
}
let colorName: string = Color[2];
 
// Displays 'Green'
console.log(colorName);Try

...不明な型

アプリケーションを作成するときに、わからない変数の型を記述する必要がある場合があります。これらの値は、ユーザーからの入力など、動的なコンテンツから取得される場合や、APIですべての値を意図的に受け入れる場合があります。このような場合、コンパイラと将来の読者にこの変数が何でもありうることを伝える型を提供したいので、unknown型を指定します。

ts
let notSure: unknown = 4;
notSure = "maybe a string instead";
 
// OK, definitely a boolean
notSure = false;Try

unknown型の変数がある場合は、typeofチェック、比較チェック、または後の章で説明するより高度な型ガードを実行することで、より具体的な型に絞り込むことができます。

ts
declare const maybe: unknown;
// 'maybe' could be a string, object, boolean, undefined, or other types
const aNumber: number = maybe;
Type 'unknown' is not assignable to type 'number'.2322Type 'unknown' is not assignable to type 'number'.
 
if (maybe === true) {
  // TypeScript knows that maybe is a boolean now
  const aBoolean: boolean = maybe;
  // So, it cannot be a string
  const aString: string = maybe;
Type 'boolean' is not assignable to type 'string'.2322Type 'boolean' is not assignable to type 'string'.
}
 
if (typeof maybe === "string") {
  // TypeScript knows that maybe is a string
  const aString: string = maybe;
  // So, it cannot be a boolean
  const aBoolean: boolean = maybe;
Type 'string' is not assignable to type 'boolean'.2322Type 'string' is not assignable to type 'boolean'.
}Try

...Any型

状況によっては、すべての型情報が利用可能ではない場合や、型の宣言に過度の労力が必要になる場合があります。これらは、TypeScriptを使用せずに記述されたコードやサードパーティライブラリの値に対して発生する可能性があります。このような場合、型チェックをオプトアウトしたい場合があります。そのためには、これらの値にany型を指定します。

ts
declare function getValue(key: string): any;
// OK, return value of 'getValue' is not checked
const str: string = getValue("myString");Try

any型は、既存のJavaScriptを操作するための強力な方法であり、コンパイル中に型チェックを段階的にオプトインおよびオプトアウトできます。

unknownとは異なり、any型の変数は、存在しないプロパティも含め、任意のプロパティにアクセスできます。これらのプロパティには関数が含まれており、TypeScriptはそれらの存在や型をチェックしません。

ts
let looselyTyped: any = 4;
// OK, ifItExists might exist at runtime
looselyTyped.ifItExists();
// OK, toFixed exists (but the compiler doesn't check)
looselyTyped.toFixed();
 
let strictlyTyped: unknown = 4;
strictlyTyped.toFixed();
'strictlyTyped' is of type 'unknown'.18046'strictlyTyped' is of type 'unknown'.Try

anyは、オブジェクト全体に伝播し続けます。

ts
let looselyTyped: any = {};
let d = looselyTyped.a.b.c.d;
   
let d: anyTry

結局のところ、anyのすべての利便性は、型安全性を失うという犠牲を払うことを忘れないでください。型安全性はTypeScriptを使用する主な動機のひとつであり、必要がない場合はanyの使用を避けるようにしてください。

...Void型

voidはanyの反対のようなものです。型がまったくないことを表します。これは、値を返さない関数の戻り値の型としてよく見られます。

ts
function warnUser(): void {
  console.log("This is my warning message");
}Try

void型の変数を宣言することは役に立ちません。なぜなら、null（strictNullChecksが指定されていない場合のみ。次のセクションを参照）またはundefinedしか代入できないからです。

ts
let unusable: void = undefined;
// OK if `--strictNullChecks` is not given
unusable = null;Try

...NullとUndefined

TypeScriptでは、undefinedとnullはそれぞれundefinedとnullという名前の型を持ちます。voidと同様に、それら自体はそれほど役に立ちません。

ts
// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;Try

デフォルトでは、nullとundefinedは他のすべての型のサブタイプです。つまり、nullとundefinedをnumberなどに代入できます。

ただし、strictNullChecksフラグを使用する場合、nullとundefinedはunknown、any、およびそれぞれの型（undefinedがvoidにも代入できることを除く）にのみ代入できます。これは、多くの一般的なエラーを回避するのに役立ちます。stringまたはnullまたはundefinedを渡したい場合は、共用体型string | null | undefinedを使用できます。

共用体型は、後の章で説明する高度なトピックです。

注意：可能な場合はstrictNullChecksの使用を推奨しますが、このハンドブックでは、オフになっていると仮定します。

...Never型

never型は、決して発生しない値の型を表します。たとえば、neverは、常に例外をスローするか、決して返らない関数式またはアロー関数式の戻り値の型です。変数は、決してtrueになることのない型ガードによって絞り込まれた場合にも、never型を取得します。

never型はすべての型のサブタイプであり、すべての型に代入できます。ただし、never自体を除いて、どの型もneverのサブタイプではなく、neverに代入できません。anyでさえneverに代入できません。

neverを返す関数の例をいくつか示します。

ts
// Function returning never must not have a reachable end point
function error(message: string): never {
  throw new Error(message);
}
 
// Inferred return type is never
function fail() {
  return error("Something failed");
}
 
// Function returning never must not have a reachable end point
function infiniteLoop(): never {
  while (true) {}
}Try

...Object型

objectは、プリミティブ型ではない型、つまりnumber、string、boolean、bigint、symbol、null、またはundefinedではないものを表す型です。

object型を使用すると、Object.createなどのAPIをより適切に表現できます。例えば

ts
declare function create(o: object | null): void;
 
// OK
create({ prop: 0 });
create(null);
create(undefined); // with `--strictNullChecks` flag enabled, undefined is not a subtype of null
Argument of type 'undefined' is not assignable to parameter of type 'object | null'.2345Argument of type 'undefined' is not assignable to parameter of type 'object | null'.
 
create(42);
Argument of type 'number' is not assignable to parameter of type 'object'.2345Argument of type 'number' is not assignable to parameter of type 'object'.
create("string");
Argument of type 'string' is not assignable to parameter of type 'object'.2345Argument of type 'string' is not assignable to parameter of type 'object'.
create(false);
Argument of type 'boolean' is not assignable to parameter of type 'object'.2345Argument of type 'boolean' is not assignable to parameter of type 'object'.Try

一般的に、これを使用する必要はありません。

...型アサーション

TypeScriptよりも値について多くの情報を知っている状況になることがあります。通常、これは、一部のエンティティの型が現在の型よりも具体的である可能性があることがわかっている場合に発生します。

_型アサーション_は、コンパイラに「私を信じてください、私は自分が何をしているかを知っています」と伝える方法です。型アサーションは、他の言語での型キャストのようなものですが、データの特別なチェックや再構築は行いません。実行時の影響はなく、純粋にコンパイラによって使用されます。TypeScriptは、プログラマーであるあなたが、必要な特別なチェックを実行したと想定しています。

型アサーションには2つの形式があります。

1つはas構文です。

ts
let someValue: unknown = "this is a string";
 
let strLength: number = (someValue as string).length;Try

もう1つのバージョンは「山括弧」構文です。

ts
let someValue: unknown = "this is a string";
 
let strLength: number = (<string>someValue).length;Try

2つのサンプルは同等です。どちらか一方を使用するかは、主に好みの問題です。ただし、JSXでTypeScriptを使用する場合は、asスタイルのアサーションのみが許可されます。

...letに関する注意

これまで、JavaScriptのvarキーワードではなく、letキーワードを使用してきたことに気づいたかもしれません。letキーワードは、TypeScriptが利用可能にする新しいJavaScriptの構文です。ハンドブックリファレンスの変数宣言で、letとconstがvarの問題の多くをどのように解決するかについて詳しく読むことができます。

...Number、String、Boolean、Symbol、およびObjectについて

Number、String、Boolean、Symbol、またはObject型が、上記で推奨されている小文字バージョンと同じであると考えるのは魅力的です。ただし、これらの型は言語プリミティブを参照しておらず、型として使用されることはほとんどありません。

ts
function reverse(s: String): String {
  return s.split("").reverse().join("");
}
 
reverse("hello world");Try

代わりに、number、string、boolean、object、およびsymbol型を使用してください。

ts
function reverse(s: string): string {
  return s.split("").reverse().join("");
}
 
reverse("hello world");Try