Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Typescriptの変数の型定義メモ

More than 5 years have passed since last update.

はじめに

Typescriptで、変数の型で何度か悩んだので忘れない為にメモ。

基本の型

  • number・・・数値
  • string・・・文字列
  • boolean・・・真偽値

型の定義方法

変数の型定義方法

typescript
//var 変数名: 型名

var hoge:number;

関数の型定義方法

typescript
//function 関数名 (引数名:引数の型) : 関数の戻り値の型 {}

function hoge(str:string):string{
    return '私の名前は'+ str + 'です。';
}

var s:string = hoge('ポンチ');

any型

any型を使うと、通常のjavascriptのように、
変数に文字列でも、数字でも自由に入れることができる。

typescript
var n:number = 12345;
n = '12345';//コンパイルエラー

var hoge:any = 12345;
hoge = '12345';//any型の場合コンパイルエラーにならない

//nullも、undefinedもコンパイルエラーにならない
hoge = undefined;
hoge = null;

any型は何でも入れられるが、コンパイラーの型チェックなどが効かなくなる。
ライブラリを使用した際に、型定義ファイルが無い場合などに使用する。

型推論

全てに型定義の記載をすると、コードが長くなる場合がある。
その場合はコードの文脈(変数の初期化や、戻り値の型など)によって、型が推測できる場合は、
型定義を省略できる。

typescript
var str = '';
str = 123;//初期化時に文字列を入れている為、変数の型定義無しでもコンパイルエラーとなる。
typescript
function hoge(n:number):void{
    alert(n *10);
}

var num = 10;
hoge(num);

var str = 'あいうえお';//引数の型定義をしている為、変数の型定義無しでもコンパイルエラーとなる。
hoge(str);

変数にオブジェクトを入れる場合の型定義方法

基本的には下記のように定義する。

var obj: {key: string} = {key:'string'};

引数としてオブジェクトを渡す場合

typescript
function hoge(obj: { key1: string; key2: number; }): void {

}
hoge({ key1: "ABC", key2: 123 });

◎プロパティを省略する

下記のように指定したプロパティのキー(key)の定義が無いとコンパイルエラーになる。
省略可の識別子として?を使用することで、型定義済みのキーを省略してもエラーが発生しなくなる。

typescript
var obj: {key: string} = {};//エラーになる
var obj2: {key?: string} = {};//省略してもエラーにならない

変数に配列を入れる場合の型定義方法

基本的には下記のように定義する。

typescript
var array:string[] = ['A','B','C'];
var array2:number[] = [1,2,3];

◎2次元配列

typescript
var array:string[][] = [['A','B'],['C','D']];

◎配列にオブジェクトを入れる

typescript
var array : {key:string}[] = [{key:'ABC'},{key:'EFG'}];
var array2 : {key?:string}[] = [{},{}];

◎オブジェクトに配列を入れる

typescript
var obj:{key:string[]} = {key:['ABC']};

void型

関数の戻り値が無い場合に使う。(それ以外での使いどころがわからなかった・・・)

typescript
function hoge(str:string):void{
    alert(str);
}

hoge('test');

型定義ファイル

既存のJSライブラリを使う場合などに、ライブラリのクラスやオブジェクトに型定義を行います。
Typescript標準で用意されている型以外は、型定義ファイルを別途読み込む必要があります。

◎jQueryを使ってみる

下記の記載だとコンパイルエラーになる。

typescript
var j = $('body');

型を定義してみても、コンパイルエラーとなる。

typescript
var j:JQuery = $('body');

コンパイルを通すには、jQueryの型定義をする必要があります。

①まず型定義ファイルを用意します。
下記から、jquery.d.tsをダウンロードします。

https://github.com/borisyankov/DefinitelyTyped

tsd(型定義ファイル管理ツール)コマンドを使ってもインストールできます。

tsd install jquery

tsdのインストール、使い方については下記が分かりやすかったです。

TypeScriptの型定義ファイル管理ツールtsdを使ってみた

②referenceタグを使用して、ダウンロードしたjQueryの型定義ファイルを読み込みます。

typescript
/// <reference path="jquery/jquery.d.ts" />

こちらだと、コンパイルエラーにならない。

typescript
/// <reference path="jquery/jquery.d.ts" />
var j = $('body');
var j2:JQuery = $('body');

※ jquery.d.tsは型定義用の為、jQueryのライブラリは別途読み込む必要があります。

nogson
へっぽこデザイナーです。
https://satofaction.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away