티스토리 뷰

JS/TypeScript

[JP] TS第三『基本文法』

johnny Hong 2022. 8. 17. 22:46

皆さん!こんばんは初心者みんです!

 

今回は基本文法について話したいと思います!

使い方はJSと違いはありませんが、

データのタイプ宣言っていう制限的な違いがあります!

 

どうやって宣言するのかなどを一緒にやってみましょう

TypeScript基本文法

基本的な構造は

Name:DataType = value;

です!

String&Number&Boolean

文字列と数字・Booleanタイプを宣言する方法です!

// String type
let name:string = 'Hong sungmin';

// Number Type
let myHeight:number = 174;

// Boolean Type
let hasGirlFriend:boolean = true;

もし!Stringの中にNumberをbacktick(`)を使って入れるのか??

let age:number = 18;
let introduce:string = `My age is ${age}!`;

入れますね!問題ないです!もちろん!

let age:number =18;
let introduce:string = 'My age is' + age + '!';

これも使えます!宣言する時だけちゃんとTypeを入れたら使う時は問題なさそうです!

JS&TSでのNumber

JSのようにTSも浮動小数値です!なので浮動小数にはNumberというタイプがつけられます!

他にも2・8・10・16進数のliteralが出来ます!

let binary:number = 0b1010;
let octal:number = 0o744;
let hex:number = 0xf00d;
let decimal:number = 6;

Array(配列)

配列の宣言方法には二つの方式が存在します!

一つ目!「DataType[ ] 」

今まで説明した普通のDataType宣言方法と同じですがデータタイプの後ろに角括弧を付けます。

let classNum: number[] = [1, 2, 3, 4, 5];
let colors: string[] = ['red', 'blue', 'green'];

二つ目!「 Generic配列タイプ」

まだ説明してない概念ですね、この投稿の後Unionと共に genericの概念も扱う予定なので是非読んで下さい!今は一応「なるほど。。こういう方法もあるんだね」でいいと思います!

let classNum: Array<number> = [1, 2, 3, 4, 5];
let color: Array<string> = ['red', 'blue', 'green']

Tuple

Tupleは配列ですがタイプと個数が固定されてる配列とも言えますね

ちなみにタイプは全部同じにする必要はございません!

let tupleTest: [string,boolean,number];

//ただしい
tupleTest = ['Hello', false, 4];

//正しくない
tupleTest = [false,'Hello', 4]; //順番は守ってください

ご覧ください、Tupleはタイプを固定させた時、順番も決められます!なので、使うときにはちゃんと順番を守ってください

Enum

JSの標準資料型集合と一緒に使ったら役立てそうなデータタイプです!

C#のような言語のようにenumは最もいい名をつけてあげられます!

さぁ!やってみましょう

Normal

enum Tomo {Day, Bomy, Riky}

let tomoTest: Tomo = Tomo.Day;

console.log(tomoTest);

//  Result : 0

//値が欲しい場合は配列と同じくしてください
let tomoAtaiTest: Tomo =Tomo[2];

console.log(tomoAtaiTest);

//  Result : Riky

えっ、、なぜ0が結果として出るのかな?

その理由はもし順番が決められてない場合Indexのように0から始めるからです!

ってことは順番も決められるってわけです!

もし一番前の番号を変えてみたら?

enum Tomo {Day = 1, Bomy, Riky}

let tomoTest: Tomo = Tomo.Bomy;

console.log(tomoTest);

//  Result : 2

このようにその番号に合わせて順番になるのを見つけられます!

もし全ての番号を変えたら?

enum Tomo {Day = 2, Bomy = 4, Riky = 0}

let tomoTest: Tomo = Tomo.Riky;

console.log(tomoTest);

//  Result : 0

このように順番がなくなりその番号が結果として出るのを見つけられます!

ここまでがEnumでした、Enumについての詳しい投稿が欲しい方は是非コメント残して下さい!

Void

Voidはどんなタイプも存在することが出来ないのを表してくれます!

次の投稿で出るAnyの反対とも言えますね

通常、関数でのreturnがない場合returnタイプを表現する為に使います!

function noReturn(): void{
	console.log('この関数はreturnがございません!');
}

一般的に変数ではあまり使われておりません。その理由はNullとUndefinedしか入れられません!

let voidVar: void = undefined;
let voidVar: void = null; //--strictNullChecksがない場合だけのみ

基本はここまでです!まだ扱ってないNeverタイプAnyタイプUnknownタイプObjectなどは

次の投稿で扱うことにします!内容も多いし!このポストだけで結構疲れてる初心者の方もおるらしいんで

 

次の投稿で会いましょう!

 

ありがとうございます!

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함