【TypeScript入門】特徴と機能の一部をまとめました

初めまして。7月に入社をしたフロントエンドエンジニアのゆーたです。
今回は「TypeScript」についてゆるく話していきたいと思います。

TypeScriptとは

http://www.typescriptlang.org/

TypeScriptは、Microsoft社が開発したaltJSです。
altJSは、JavaScriptへコンパイル（トランスパイル）して使用する中間言語で、CoffeeScriptやDart、Haxeなどがあります。
このような中間言語が出現した背景には、JavaScriptの抱える以下のような問題を解決しようとした流れがあるのだと思います。

• プロトタイプ継承
• モジュールの管理
• スコープ
• 型の欠如

TypeScriptの特徴

つづいて、TypeScriptの特徴を詳しくご紹介します。

• TypeScriptはES2015（ES6）の機能を実装しています。
• 静的型付けやアクセス修飾子を独自実装しています。
• 型などのチェックが厳しいため、保守が必要になる大規模開発に向いています。
• TSファイルをコンパイル（トランスパイル）してJSファイルとして書き出します。

それではTypeScriptの機能の一部を見てみましょう！

ES2015（ES6）実装

let宣言の追加

TypeScriptではletやconstといった宣言が追加されています。
letで宣言すると変数による巻き上げが起こらなくなり、再定義もできなくなります。

// let
let a = 1;

if(true){
    let a = 2;
}

// 1
console.log(a);

// error
let a = 10;

const宣言の追加

constは定数の宣言することができ、代入や変更を受け付けません。

// const
const ID = 1;

// error
ID = 2;

classの追加

classの宣言が追加されました。

class Person {
    constructor(
        private name:string = 'dummy'
    ) {}

    public say():void {
        console.log('Hello, I\'m ' + this.name + '!!');
    }
}

アロー関数の追加

関数はアロー関数で記述できるようになりました。CoffeeScriptを使ってる人にとってはお馴染みですよね！

let callName = (name: string) => console.log('Hi, ' + name + '!!');

// Hi,Steve!!
callName('Steve');

TypeScript独自実装

型宣言

変数に対して型を定義することができます。
型を定義しないと、はじめに代入された値によって自動的に型を決められてしまいます。

let name:string = 'Joe'; //文字列
let count:number = 123;  //数字
let flag:boolean = true; //真偽
let hoge:any = '文字列でも数字でも真偽でもなんでもOK'; //型定義なし

アクセス修飾子

前述でも出てきたクラスです。
3行目、6行目に出てくるprivate、publicがアクセス修飾子になります。
privateはクラス内からのみアクセスでき、publicはクラスの外からもアクセスできます。

class Person {
    constructor(
        private name:string = 'dummy'
    ) {}

    public say():void {
        console.log('Hello, I\'m ' + this.name + '!!');
    }
}

そのため、直接参照しようとすると以下のようになってしまいます。

let p = new Person('Jack');

// Hello, I'm Jack!!
p.say();

// error
p.name;

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。