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
38
Help us understand the problem. What is going on with this article?
@Im0_3

TypeScriptのデータ型まとめ

More than 5 years have passed since last update.

TypeScriptをはじめたので基本的なところをメモ。

TypeScriptでは型注釈をすることで、静的型付けをすることができます。

Boolean

真偽値(true or false)を扱うことができます。

var isShow: boolean = false;

Number

数値を扱うことができます。

var width: number = 6;

String

文字列を扱うことができます。

var name: string = "omi";
name = 'yusuke';

Array

配列を扱うことができます。
2通りの書き方ができますがどちらも結果は同じになります。

型の後ろに、[]を付ける
ts
var list:number[] = [1, 2, 3];

Arrayクラスを使用する
ts
var list:Array<number> = [1, 2, 3];

Enum

列挙型、enumはenumurateの略です。

0から始まる連続する整数値が入ります。

enum Color {Red, Green, Blue};
var r: Color = Color.Red;
var g: Color = Color.Green;
var b: Color = Color.Blue;

console.log(`r: ${r}, g: ${g}, b: ${b}`); //r: 0, g: 1, b: 2

また代入文で値を指定することができ、代入文をしようしなかった部分に関しては、ひとつ前の次の数字が入ります。

enum Color {Red = 2, Green, Blue};
var r: Color = Color.Red;
var g: Color = Color.Green;
var b: Color = Color.Blue;

console.log(`r: ${r}, g: ${g}, b: ${b}`); //r: 2, g: 3, b: 4

Any

Any型はJavaScriptと同じようにどんな型でも利用することができる型です。

var something: any = 1;
something = 'hoge';
something = true;

配列に型を指定すると、様々な型が混在した配列を利用することができます。

var list: any[] = [1, 'hoge', true];
list[1] = 2;
console.log(list[1]); // 2

Void

TypeScriptでは関数にも型注釈をすることができますが、void型は値がないことを意味する型です。
関数の戻り値の型注釈に使用します。

var func: (val: string) => void;

func = (val: string):void => {
    console.log(val);
}

参考サイト

Handbook - Welcome to TypeScript
http://www.typescriptlang.org/Handbook

AltJS初心者必見!型注釈と関数にみるTypeScriptの魅力
https://html5experts.jp/_iwate/7650/

38
Help us understand the problem. What is going on with this article?
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
Im0_3
フロントエンドエンジニア 最近はAngularJSを使った開発・運用を行っています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
38
Help us understand the problem. What is going on with this article?