TypeScriptの基本備忘録
Angularを触る上でTypeScriptは必須なので勉強した内容を残しておこう。
・型 ・変数宣言 ・関数 ・アロー関数 ・クラス ・アクセス修飾子 ・クラスの継承 ・インターフェース
型
配列型: string[ ], number[ ]
オブジェクト型: {[index: string]: string}
タプル型: [number, string]
enum型(列挙型) :Color{red,blue,green}
※stringやnumberなどの基本的な型省略します
変数宣言
var =>変数の巻き上げが起こる let => 変数の巻き上げが起こらない const => 定数にする 再代入が不可能 誤った代入を防ぐ
主にletとconstを使うようにする
関数
仮引数と返り値に型指定できるない場合は:voidを指定
例：
function greet(name: string = 'Taro') :string{
return 'hello + name + !!!';
}
アロー関数
例：
let hello = (name:string): string => {
return 'hello, ${name}!';
}
・オブジェクトのthisが固定出来る
・javascriptのアロー関数thisは曖昧らしい
・functionの代わりになる
クラス
class クラス名 {
アクセス修飾子 プロパティ名: 型 = 値;
// クラス自身のアクセスの制御
constructor(引数: 型) {
this.プロパティ２ = 'プロパティ2';
} //クラスの初期化時に実行
メソッド(引数: 型): 返り値の型 {
console.log(this.プロパティ === 'プロパティ')
}
}
例：
class Animal {
age: number = 10;
constructor(private isCry: boolean, private legs: number) {} //初期化
cry(): void { //メソッド
if(this.isCry) {
alert('legs:' + this.legs);
}
}
}
let dog = new Animal(true, 4); //インスタンス化
dog.cry();
アクセス修飾子
public : 外部のどこからでもOK デフォルト protected : 自身のクラスとその派生クラス private : そのクラスのみ
クラスの継承
クラスの上書き、使いまわせる、クラスの肥大化を防げる
例：
class Animal {
age: number = 10;
constructor(private isCry: boolean, private legs: number) {} //初期化
cry(): void { //メソッド
if(this.isCry) {
alert('legs:' + this.legs);
}
}
}
class Dog extends Animal { //extends Animal アニマルクラスを継承したdogクラスを作った
cry(): void { //メソッドを変更
super.cry(); //superアニマルクラス・メソッドを呼び出すことができる
if (this.isCry) {
alert('ばうばう');
}
}
}
let dog = new Dog(true, 4);
dog.cry();
// アニマルクラスののcryメソッドが上書きされる意味
インターフェース
・定義だけで実装がないクラスのようなもの
・クラスの特定の機能を強制的する
・実装の設計図みたいなもの
interface Animal {
name: string;
legs: number;
isCry: boolean;
cry(): void;
} //実装の設計図
class Dog implements Animal { //implementsはクラスにインターフェースを適用 Animalは使うインターフェース名
name: string = 'taro';
legs: number = 4;
isCry: boolean = true;
cry(): void {
if (this.isCry) {
alert('ばうばう');
}
}
}
一言
とりあえずメモした内容を残しておく。
クラスは設計図でその設計図から出来上がったのがインスタンス。
ようやく意味がわかったのでした。
この辺は後でイラストにして書こうっと♪
Angular勉強中:@Iputと@Output
もっぱらAngular勉強中の私です。
今日は忘れない内にAngularの基礎となる@Inputと@Outputの整理を。
まずInputと@Outputとはなんぞやと。
@Input
親コンポーネントから子コンポーネントへの単方向バインディング
@Output
子コンポーネントから親コンポーネントへイベントを送る
簡単にイラストで起こすとこんな感じ
@Input
@Output
このゆるいストーリーを早速コードに起こしてみます。
用意したのは2つのコンポーネント
・ParentComponent (親：子が選んだケーキを表示する) ・ChildComponent (子：メニューを見てケーキを選ぶ)
ParentComponent
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<ul>
<li *ngFor="let cake of cakes">
<app-child
[dessert]="cake"
(selected)="show($event)"
></app-child>
</li>
</ul>
`,
})
export class ParentComponent implements OnInit {
cakes = [
{ name: 'イチゴのショートケーキ' ,price: 280},
{ name: 'チョコレートケーキ' ,price: 300},
{ name: 'モンブラン', price: 320},
];
show(dessert: any) {
console.log(dessert.name);
}
}
ChildComponent
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<div>
名前:{{dessert.name}},値段: {{dessert.price}}
<input type="button" value="選ぶ" (click)="click(dessert)" />
</div>
`,
})
export class ChildComponent {
@Input() dessert: any;
@Output() selected = new EventEmitter();
click(dessert): any {
this.selected.emit(dessert);
}
}
出来た画面がこちら
css当ててないのとても殺風景ですみません(デザイナーのくせに)
自分なりに整理をすると
ChildComponent編
1.名前:{{dessert.name}},値段: {{dessert.price}}
は親から受け取った情報を表示している。
それを設定するのが@Input() dessert: any;
(dessertはstring型とnumber型なのでany型で受け取るよ)
2.(click)="click(dessert)"で親にイベントを渡す
渡す内容をまず@Output() selected = new EventEmitter();を入力
(これはこういう呪文だと覚えておく…selectedは親で記述したイベント)
3.次に
click(dessert): any {
this.selected.emit(dessert);
}
(引数で選択したのを送るよと言う意味。emitは呪文)
ParentComponent編
1.ケーキ一覧の情報を持っている
2.[dessert]="cake"子で表示する為の情報[dessert]にケーキの一覧(ここで言うcake)を設定
([]はDOMの対応する＠Inputプロパティへ値、まやは参照を渡す)
3.(selected)="show($event)"
子からのイベントバインディング(先程、子で＠Outputで記述したselectedのこと)をどうするか記述
自分の言葉で整理
子コンポーネント：
・親が持っている情報(ここで言うケーキ一覧)をどのように表示するか。
・選択(イベント)をする
親コンポーネント：
子コンポーネントで設定した情報をどうするのか記述する。
(ここで言う、ケーキ情報を渡す、選択したケーキをコンソールに表示する)
なのかなと。(何か語弊があったらすみません。)
今度はserviceを加えて少し複雑な@Input@Outputに挑戦しよう。
ブログになれてないのでコードが見づらく申し訳ないです><
おまけ
@Input@Outputを記述する時import忘れずに!!
InputとOutputは記述したのにEventEmitter忘れてた。
OutputとEventEmitterはセットで覚えましょう★
CSS基本：ブロックレベル要素とインライン要素
css基本のブロック要素とインライン要素自分用にメモ
ブロックレベル要素とは
文章の骨組みとなる要素
- 縦並び
- 幅と高さの指定OK
- marginとpaddingの指定OK
- vertical-align指定NG
対象タグ
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、 <h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
インライン要素とは
ブロックレベル要素の内容として用いられる要素
- 横並び
- 幅と高さの指定NG
- marginとpaddingの左右のみ指定OK
- vertical-align指定OK
対象タグ
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、 <em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、 <small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
display:block
インライン要素をブロックレベル要素として生成する
display:inline-block
- 横並び
- 幅と高さの指定OK
- marginとpaddingの指定OK
- vertical-align指定OK
今までブロック要素を無理やりfloatかけて横並びしてた・・・反省
