【書いて覚えるTypeScript 】変数・定数宣言、関数編

動作環境

TypeScript Playground

参考

TypeScript Handbook

変数・定数宣言

let 変数名: 型 = 初期値;
var 変数名: 型 = 初期値;
const 変数名: 型 = 初期値; 

基本的な例

object型、enum型、tuple型など他にも色々ありますが、書き方の問題なので、必要になった際に公式Handbookを見たほうが頭に残りやすいでしょう。

※ オブジェクトについては、後述するInterfaceを活用することが多いと思うので割愛。

// boolean
let isDone: boolean = true;
// number
let decimal: number = 6;
// string
let firstName: string = 'Taro';
let lastName: string = 'Yamada';
let fullName: string = `${firstName} ${lastName}`;

// array
let numArray: number[] = [1, 2, 3]; // 要素がnumber型のarray
let strArray: string[] = ['Japan', 'China', 'Korea']; // 要素がstring型のarray
// any 何でも入れれる
// 異なる型を代入してもエラーにならない。
let anyVar: any = 1;
anyVar = 'hoge';
anyVar = [1, 2, 3];

// null, undefined
let u: undefined = undefined;
let n: null = null;

複数の型を指定したい場合

nullとnumberを許容したいというケースがあると思います。（例えば、idとか）
そういった場合は、|で複数指定します。

let userId: number | null = 1;
userId = null; // エラーにならない
userId = '2'; // => Type '"2"' is not assignable to type 'number | null'.

型推論

letやvarではデータ型を省略して、初期値を与えた場合、型推論が働きます。

let status = 'close';
status = 'open';
status = 10; // エラー。Type '10' is not assignable to type 'string'.

初期値として、String型のデータを代入しているので、その後に異なる型の値を代入しようとするとエラーになります。

また、初期値も省略してしまうと、Any型になるので、どんなデータ型でも代入することができます。

let antData;
antData = 1;
antData = 'close';
antData = { type: 'close', message: 'close status' };

関数定義

function 関数名(引数1: 型, 引数2: 型): 戻り値の型 {
    ...
}

関数の場合も基本的な例を書いていきましょう。

基本的な例

• 数値同士の足し算をする関数add

function add (num1: number, num2: number): number {
    return num1 + num2;
}
add(1, 2); // => 3
// 引数の型が違うのでエラー
add('1', '2'); // => Argument of type '"1"' is not assignable to parameter of type 'number'

• アロー関数

const calcArea = (width: number, height: number): number => {
    return width * height;
}

calcArea(10, 20);

値を返さない関数の場合

値を返さない場合はvoid型を使います。

function putsError(message: string): void {
    console.error(message);
}

putsError('log error');

オプショナルな引数の場合

オプショナルな引数には、引数名の後ろに?をつけます。

function buildName(firstName: string, lastName?: string): string {
    if (lastName) {
        return firstName + " " + lastName;
    } else {
        return firstName;
    }
}

buildName("Taro");

デフォルト値のある引数の場合

function displayTime(date: Date = new Date()): string {
    return date.toLocaleTimeString();
}
displayTime();

次回は、インターフェース(interface)編です。