『Hello World』を表示しよう

コンソールへ出力

もはやお約束の実行確認です。
任意のディレクトリに『hello.ts』を作成し、中身を以下の様に記述します。
　console.log('Hello, world!');

同ディレクトリのアドレスバーに「cmd」と叩き、ターミナルを立ち上げます。
　※ 右クリックからの「ターミナルで開く」は権限が弱いので使わない事

ターミナルから叩く

C:\xxx> tsc hello.ts

C:\xxx> node hello.js
Hello, world!

『tsc』コマンドを使い、[hello.ts]をコンパイルします。
同ディレクトリに[hello.js]が作成されるので、『node』コマンドを使い実行します。

ポイント

【TypeScript ①】の《設定ファイルの作成》で、コンパイル元、コンパイル先の設定をしました。
しかしファイル名を指定してコンパイルした場合、この設定は無効となります。

任意の複数ファイルを同時にコンパイルする

例えばプロジェクト内に100個の「xxx.ts」ファイルが存在する場合。
コンパイル先の設定を有効にするには『tsc』コマンドで100個の「xxx.ts」ファイルをコンパイルする事になります。
しかし、今回コンパイルしたいファイルが3個だった場合、非常に非効率となります。
その場合は、設定ファイルを以下の様に修正します。

tsconfig.json

{
    "compilerOptions": {
        ...
    },
    "include": [
        "ts/hoge.ts",
        "ts/foo.ts",
        "ts/bar.ts",
    ]
}

設定ファイルのあるディレクトリから、相対的にファイルパスを記述します。

基本的な型

定数

○ const

定数定義に使用（再定義できない）
　例）const hoge = 'ほげ';

○ as const

オブジェクトに対して定数を宣言
　例）let obj = {hoge: 'ほげ'} as const; // hogeの値を変更する事はできない

○ as HTMLFormElement

HTMLエレメントに対して定数を宣言
　例）et form = $('#hogeId') as HTMLFormElement; // HTMLのform要素を宣言

プリミティブ型

○ 文字列型

let userName: string = "ほげ"; // 明示的な型指定
let userName = 'ほげ'; // 型推論（型を明示しない）

○ 数値型

let age: number = 25; // 明示的な型指定
let age = 25; // 型推論（型を明示しない）

○ 真偽値型

let isActive: boolean = true; // 明示的な型指定
let isActive true; // 型推論（型を明示しない）

○ null型

let data: null = null; // 明示的な型指定
let data = null; // 型推論（型を明示しない）

○ undefined型

let value: undefined = undefined; // 明示的な型指定
let value = undefined; // 型推論（型を明示しない）

○ bigint型

const a: bigint = 100n;
const b = 100n;
const c = BigInt("9007199254740991");
※ 出力すると末尾に「n」が付与されますが、文字列型へキャストする事で数値の様に扱えます。

配列型とオブジェクト型等

○ 配列型

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ["apple", "banana", "orange"];
let mixs: [string, number, boolean] = ['ほげ', 5, false];

○ オブジェクト型

let user: { name: string; age: number } = {
name: "太郎",
age: 25
};

サンプル

let arr = [];
for(let i=0;i‹3;i++){
    let user: { name: string; age: number } = {name:'', age:0};
    user.name = 'ほげ';
    user.age = 10 + i;
    arr[i] = user;
}
console.log(arr);

型宣言

○ 独自型

CLASSもそうですが、独自の型を宣言できます。
type MyObj = {hoge: string, foo: number};
※MyObj型は、String型プロパティ「hoge」と数値型プロパティ「foo」を持つオブジェクトです

サンプル

type MyObj = {name: string, age: number};
let arr:MyObj[] = [];            // MyObj型のみ格納できる配列
for(let i=0;i<3;i++){
    let user: { name: string; age: number } = {name:'', age:0};    // これはMyObj型と等しい
    user.name = 'ほげ';
    user.age = 10 + i;
    arr[i] = user;            // 同じMyObj型なので追加できる
}
console.log(arr);

○ ユニオン型

型T または型U のような表現ができる型のことです。
type Obj1 = {hoge: string, foo: number};
type Obj2 = {hoge: string, foo: string};
type ObjHoge = Obj1 | Obj2;
※パイプでそれぞれの型を区切る事で、型「ObjHoge」はどちらの型も許容します

○ インターセクション型

型T かつ型U のような表現ができる型のことです。
type Obj1 = {hoge: string, foo: number};
type Obj2 = {hoge: string, bar: string};
type ObjHoge = Obj1 & Obj2;
※[&]でそれぞれの型を区切る事で、型「ObjHoge」はキー項目<hoge><foo><bar>が必須となります

any型

any型は、どんな型でも受け入れる特殊な型です。
※ TypeScriptの型チェックを無効化するため、使用は最小限に留めるべきです
let hoge: any = "文字列";
hoge = 123;
hoge = true;
hoge = "ほげ";
上記代入は全てコンパイルが通ります。

色々な型指定

引数の型指定

型指定

function greet(name: string, age: number): void {
console.log('こんにちは、${name}さん ' + age + '歳');
}
greet("ほげ", 5);

返却値の型指定

型指定

function greet(name: string, age: number): string {
return 'こんにちは、${name}さん ' + age + '歳';
}
console.log(greet("ほげ", 5));

オプショナルパラメータとデフォルト値

型指定

function greet(name: string, age?: number): string {}
※引数の後ろに ? をつけると、その引数は省略可能になります

function greet(name: string, age = 5): string {}
※デフォルト値を設定すると、型推論が働くため型指定を省略できます