変数の宣言、変数への代入、変数の参照 - TypeScript
TypeScriptでの変数の宣言、代入、参照するための書式やコードを紹介します。
書式
変数の宣言
変数の宣言は下記の書式を利用します。
let
同一の型で複数の変数を宣言する場合は下記の書式が利用できます。
let 変数名1, 変数名2, ... 変数名n:型名;
異なる型の変数を複数宣言する場合は下記の書式が利用できます。
let 変数名1:型名, 変数名2:型名, ... 変数名n:型名;
また、型は省略できるため、下記の書式も利用できます。
メモ
varとletの動作の違いは
こちらの記事を参照してください。
var
同一の型で複数の変数を宣言する場合は下記の書式が利用できます。
var 変数名1, 変数名2, ... 変数名n:型名;
異なる型の変数を複数宣言する場合は下記の書式が利用できます。
var 変数名1:型名, 変数名2:型名, ... 変数名n:型名;
また、型は省略できるため、下記の書式も利用できます。
代入
変数への値の代入は下記の書式を利用します。
代入は"="演算子を利用します。左辺に代入される変数名、右辺に代入する値を記述します。
変数宣言時の代入
変数の宣言時に代入することもできます。
型名は省略した場合は下記の書式となります。
参照
参照は変数名を記述します。
型
変数の型は以下が利用できます。
また、上記の型以外にオブジェクト型が利用できます。
補足
型(プリミティブ型)には,number
boolean
string
void
null
undefined
がありますが、変数で利用できるのは上記の3つの型とオブジェクト型です。
プログラム例
コード
下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="variable.js"></script>
</head>
<body onload="calc();">
<div id="output"></div>
</body>
</html>
function calc() {
var a, b, c: number;
var elem: HTMLElement;
a = 6;
b = 3;
c = a + b;
elem = document.getElementById("output");
elem.innerHTML=c.toString();
}
解説
下記のコードで変数を宣言しています。
a
,
b
,
c
3つの数値型の変数と、HTMLElementオブジェクトの変数
elem
を宣言しています。
var a, b, c: number;
var elem: HTMLElement;
変数 a,bに数値の値を代入し、変数cに変数aとbの和を代入しています。
a = 6;
b = 3;
c = a + b;
getElementById()メソッドを呼び出し、outputのIDを持つ要素を取得します。取得した要素のinnerHTMLプロパティに変数cの値を代入し、画面に変数cの値を表示します。
elem = document.getElementById("output");
elem.innerHTML=c.toString();
実行結果
上記のプロジェクトを実行します。variable.htmlファイルをWebブラウザで表示します。
下図の画面が表示されます。変数aとbの和の値が画面に表示されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-06-03
作成日: 2018-03-13