基本型_TypeScript ノート 2

一.JavaScript 型

JavaScript には 7 種類の型があります：Boolean、Number、String、Undefined、Null、Object、および ES6 で追加された [Symbol](/articles/symbol-es6 ノート 7/)

これら 7 種類の型は TypeScript すべてがサポートしています：

// JavaScript がサポートする 7 種類の型
let isDone: boolean = false;  // 布尔值
let decimal: number = 6;      // 数值
let color: string = 'blue';   // 字符串
let u: undefined = undefined; // Undefined
let n: null = null;           // Null
let obj: object = {};         // Object
let sym: symbol = Symbol();   // Symbol

変数宣言

上記の例での変数はすべて let で宣言されていますが、実際には 3 種類の変数宣言方法があります：

var：関数スコープ
let：ブロックレベルスコープ
const：ブロックレベルスコープ、定数（変更不可）

例えば：

var a: string = 'a';
let b: string = 'b';
const c: string = 'c';

JavaScript の変数宣言方法と完全に一致しており、詳しくは説明しません。詳細は Variable Declarations を参照

P.S. 実際には、let と const は最終的にすべて var にコンパイルされ、ブロックレベルスコープなどの特長は変数のリネームを通じてシミュレートされます

二.TypeScript 型

TypeScript には合計 13 種類の基本型があり、JavaScript のすべての 7 種類に加えて、以下があります：

Array：配列、同じ型の要素のグループを表す
Tuple：タプル、固定数の要素のグループを表す（要素の型が同じである必要はない）、例えば二元組、三元組
Enum：列挙型、定数の集合
Any：任意の型、未知の型を表す、例えば動的コンテンツ（ユーザー入力、またはサードパーティライブラリ）または型がわからないもの（混合型配列）、any 型を宣言して型チェックを回避できる
Void：空の型、型がないことを表す、例えば戻り値のない関数の戻り値の型
Never：決して存在しない値の型、例えば決して戻らない関数（必ず例外を投げる、または関数本体に無限ループがある）の戻り値の型

例は以下の通り：

// TypeScript が追加した 6 種類の型
let list: number[] = [1, 2, 3];       // 数组
let list: Array<number> = [1, 2, 3];  // 数组
let x: [string, number] = ["hello", 10];        // 元组
enum Color {Red = 'r', Green = 'g', Blue = 'b'} // 枚举
let notSure: any = 4;                 // 任意类型
let list: any[] = [1, true, "free"];  // 任意类型数组（未知类型）
function warnUser(): void {/*..*/}              // 空类型
function neverReturn(): never {throw 'error';}  // 绝不存在的类型

いくつかの点に注意が必要です：

Array 型には 2 種類の宣言形式があります（elemType [] と Array<elemType>）
Tuple にアクセスして境界を超えた場合、ユニオン型（union type）が適用されるため、上記の例で x[10] の型は string | number です
Enum 値は省略可能で、デフォルトでは key の宣言順序に従って 0 から始まります。数値を指定した場合、次の項の値はこれに基づいて増加し、否则その後の項すべてに値を指定する必要があります（デフォルトの数値増加メカニズムが対応できなくなります）
Any 型はローカルの型チェックスイッチに相当し、これは TypeScript と JavaScript コードが共存するプロジェクトで非常に意義があります
Void 型の変数も合法で、値は undefined または null のみに制限されます
Null、Undefined および Never は他の型のサブタイプであるため、他の任意の型の変数に代入できます（例えば let str: string = null も合法です）
他の任意の型も Never 型に代入することはできません、Any でもダメです
Never 型の変数も合法で、此时 Never は型保護として使用できます（例えば declare const name: never; で暗黙的な window.name へのアクセスを回避）

P.S. 特別な場合、推奨は --strictNullChecks オプションをオンにすることで、此时 Undefined と Null は Void および各自対応する型のみに代入できます

P.S.Never が型保護として使用する応用については、Improve type safety of name global variable を参照

三.型アサーション

型アサーションを通じて、TypeScript コンパイラにある値の正確な型を知らせることができます：

Type assertions are a way to tell the compiler "trust me, I know what I'm doing."

他の言語の強制型変換（type casting）に類似していますが、型アサーションはコンパイル時のみで、型変換のようにランタイム影響を持たない点が異なります：

A type assertion is like a type cast in other languages, but performs no special checking or restructuring of data. It has no runtime impact, and is used purely by the compiler.

2 種類の構文��式があり、それぞれ <type> と as type です。例えば

let someValue: any = "this is a string";
// <type>
let strLength: number = (<string>someValue).length;
// as type
let strLength: number = (someValue as string).length;

2 つの方法は同等ですが、JSX では as type のみ使用できます（山括弧構文が JSX 構文と衝突するため）

四.よく使用するテクニック

列挙 key へのアクセス

実際には、TypeScript 列挙型は key-value の双方向インデックスを確立しています。例えば：

enum Color {Red = 1, Green, Blue}
// 对应的 JavaScript 为
var Color;
(function (Color) {
    Color[Color["Red"] = 1] = "Red";
    Color[Color["Green"] = 2] = "Green";
    Color[Color["Blue"] = 3] = "Blue";
})(Color || (Color = {}));
// 得到
// {1: "Red", 2: "Green", 3: "Blue", Red: 1, Green: 2, Blue: 3}

したがって、面白いテクニックは列挙値を通じて key にアクセスすることです：

let colorName: string = Color[2];
// 此时，colorName 为'Green'

global の修正

Any 型はコンパイル時型チェックを回避するために使用されるため、変更できないものを修正するために使用できます。例えば：

window.customFunction = myCustomFunction;

コンパイルエラー：

Property 'customFunction' does not exist on type 'Window'.

any 型を通じて回避できます：

const globalAny: any = window;
globalAny.customFunction = myCustomFunction;

または同等の型アサーション：

(<any> window).customFunction = myCustomFunction;
// 或
(window as any).customFunction = myCustomFunction;

参考資料

Basic Types