【Angular】TypeScript class

用法

  • 列別名稱通常用「大駝峰式命名」
  • 函數與變數通常用「小駝峰式命名」
class 類別名 {
    訪問修飾符 屬性名: 型別=値;

    constructor(參數: 型別) {
        this.屬性名2='屬性名2'; //這行可以透過private 建構子參數省略不寫
    }

    函數(參數: 型別): 回傳値型別{
        console.log(this.屬性名='屬性名');
    }
}

訪問修飾符的種類

  1. public
    外部可存取,無指定訪問修飾符時為default設定
  2. protected
    原生類別或派生類別可存取
  3. private
    僅限原生類別可存取

※TypeScript最終還是JavaScript,指定訪問修飾符可以讓開發時檢查程式碼,如果硬要無視他,仍然可以執行。

範例

//定義類別
class Animal { 

    // 屬性名
    age: number = 10;

    // 建構子
    constructor(private isCry: boolean, private legs: number) {
        //這邊參數用private代表默認代入↓
        //this.isCry=isCry;
    }

    // 函數
    cry(): void {
        if (this.isCry) { 
            console.log(`legs: ${this.legs}`)
        }
    }

}

//使用類別
let dog = new Animal(true, 4);
//因為有定義函數
dog.cry(); //'legs: 4';

getter / setter

class Animal {
    private _age: number = 10;

    //取得上方private _age的值
    get age(): number {
        //除了取得值以外也可以進行處理
        // console.log(this._age);

        return this._age;
    }

    //要用跟getter相同的method名
    set age(value: number) {
        //除了取得值以外也可以進行處理
        // console.log(this._age);

        if (value < 0) { throw new Error('age cannot > 10')
        }
        this._age = value; //設定_age的值
    }
}

let dog = new Animal();
console.log(dog.age); //dog.age=10;
dog.age = 11; //set dog.age=11;

繼承

以舊有class為基礎,定義新的class

建構新的Method

class Animal{
    age: number = 10;

    constructor(private isCry: boolean, private legs: number) {
        
    }

    cry(): void {
        if(this.isCry) {
            alert('legs: ' + this.legs);
        }
    }
}

// あるクラスを基に別のクラスを定義することは継承と言います
// Animalクラスを継承してしてDogクラスを定義する
class Dog extends Animal {
    cry(): void {
        if (this.isCry) {
            alert('bow, wow!');
        }
    }
}

let dog = new Dog(true, 4);
dog.cry();

沿用舊有Method

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 {

    // constructor() {
           //也可以用super定義constructor的繼承
    //     super();
    // }

    cry(): void {

        // 親のクラスにアクセスためのOBJです
        super.cry();
        //処理を追加することも可能です
        console.log('hello!');
    }
}

let dog = new Dog(true, 4);
dog.cry();

 

 

【CSS】Color Name

REF: W3Schools

Color Name HEX Display
White #FFFFFF
Ivory #FFFFF0
LightYellow #FFFFE0
Yellow #FFFF00
Snow #FFFAFA
FloralWhite #FFFAF0
LemonChiffon #FFFACD
Cornsilk #FFF8DC
SeaShell #FFF5EE
LavenderBlush #FFF0F5
PapayaWhip #FFEFD5
BlanchedAlmond #FFEBCD
MistyRose #FFE4E1
Bisque #FFE4C4
Moccasin #FFE4B5
NavajoWhite #FFDEAD
PeachPuff #FFDAB9
Gold #FFD700
Pink #FFC0CB
LightPink #FFB6C1
Orange #FFA500
LightSalmon #FFA07A
DarkOrange #FF8C00
Coral #FF7F50
HotPink #FF69B4
Tomato #FF6347
OrangeRed #FF4500
DeepPink #FF1493
Fuchsia #FF00FF
Magenta #FF00FF
Red #FF0000
OldLace #FDF5E6
LightGoldenRodYellow #FAFAD2
Linen #FAF0E6
AntiqueWhite #FAEBD7
Salmon #FA8072
GhostWhite #F8F8FF
MintCream #F5FFFA
WhiteSmoke #F5F5F5
Beige #F5F5DC
Wheat #F5DEB3
SandyBrown #F4A460
Azure #F0FFFF
HoneyDew #F0FFF0
AliceBlue #F0F8FF
Khaki #F0E68C
LightCoral #F08080
PaleGoldenRod #EEE8AA
Violet #EE82EE
DarkSalmon #E9967A
Lavender #E6E6FA
LightCyan #E0FFFF
BurlyWood #DEB887
Plum #DDA0DD
Gainsboro #DCDCDC
Crimson #DC143C
PaleVioletRed #DB7093
GoldenRod #DAA520
Orchid #DA70D6
Thistle #D8BFD8
LightGray #D3D3D3
LightGrey #D3D3D3
Tan #D2B48C
Chocolate #D2691E
Peru #CD853F
IndianRed #CD5C5C
MediumVioletRed #C71585
Silver #C0C0C0
DarkKhaki #BDB76B
RosyBrown #BC8F8F
MediumOrchid #BA55D3
DarkGoldenRod #B8860B
FireBrick #B22222
PowderBlue #B0E0E6
LightSteelBlue #B0C4DE
PaleTurquoise #AFEEEE
GreenYellow #ADFF2F
LightBlue #ADD8E6
DarkGray #A9A9A9
DarkGrey #A9A9A9
Brown #A52A2A
Sienna #A0522D
YellowGreen #9ACD32
DarkOrchid #9932CC
PaleGreen #98FB98
DarkViolet #9400D3
MediumPurple #9370DB
LightGreen #90EE90
DarkSeaGreen #8FBC8F
SaddleBrown #8B4513
DarkMagenta #8B008B
DarkRed #8B0000
BlueViolet #8A2BE2
LightSkyBlue #87CEFA
SkyBlue #87CEEB
Gray #808080
Grey #808080
Olive #808000
Purple #800080
Maroon #800000
Aquamarine #7FFFD4
Chartreuse #7FFF00
LawnGreen #7CFC00
MediumSlateBlue #7B68EE
LightSlateGray #778899
LightSlateGrey #778899
SlateGray #708090
SlateGrey #708090
OliveDrab #6B8E23
SlateBlue #6A5ACD
DimGray #696969
DimGrey #696969
MediumAquaMarine #66CDAA
RebeccaPurple #663399
CornflowerBlue #6495ED
CadetBlue #5F9EA0
DarkOliveGreen #556B2F
Indigo #4B0082
MediumTurquoise #48D1CC
DarkSlateBlue #483D8B
SteelBlue #4682B4
RoyalBlue #4169E1
Turquoise #40E0D0
MediumSeaGreen #3CB371
LimeGreen #32CD32
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
SeaGreen #2E8B57
ForestGreen #228B22
LightSeaGreen #20B2AA
DodgerBlue #1E90FF
MidnightBlue #191970
Aqua #00FFFF
Cyan #00FFFF
SpringGreen #00FF7F
Lime #00FF00
MediumSpringGreen #00FA9A
DarkTurquoise #00CED1
DeepSkyBlue #00BFFF
DarkCyan #008B8B
Teal #008080
Green #008000
DarkGreen #006400
Blue #0000FF
MediumBlue #0000CD
DarkBlue #00008B
Navy #000080
Black #000000

【CSS】outline

説明

outline位在border外面

.box
.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 outline: 1px solid red

Display

.

FireFox的outline bug

如果裡面的東西超出box的話,outline也會被撐開
※其他瀏覽器不會有這個問題

.box
 .inner
.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 outline: 1px solid red

.inner
 background-color: moccasin
 height: 300px
 width: 100px 

Display

解決方法

改用box-shadow做出outline的效果

.box
 .inner
.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 // outline: 1px solid red
 box-shadow: 0 0 0 1px red
 
.inner
 background-color: moccasin
 height: 300px
 width: 100px

Display

.

【Angular】TypeScript 函式與參數

參數與回傳値的型別定義

TypeScript的函式寫法有以下需求

  1. 必須指定參數型別
  2. 必須指定回傳値型別
function hello(name: string, number: number): string{ //這邊指定回傳值型別
 return `hello ${name} and ${number}`;
}

console.log(hello("blank", 100)); //hello blank and 100

如果函式沒有回傳値的話,回傳値的型別為「void」

function hello(name: string): void{
 return `hello ${name}`;
}

console.log(hello("blank")); //hello blank

省略指定參數

參數的冒號「:」前面加問號「?」表示這個參數可以省略

function hello(name?: string): string{
    return `hello ${name}`;
}

console.log(hello()); //hello undefine
//如果沒有設問號的話,使用hello()時,括號裡面一定要放參數。直接使用hello()的話會造成錯誤。

函式內定義參數

可以在定義函式時就指定好參數內容

function hello(name: string = 'Taro'): string{
    return `hello ${name}`;
}

console.log(hello()); //hello Taro

指定複數參數

參數前面多加「…」就可以指定數個同類型的參數

function sum(...values: number[]) { 
    let total = 0;
    for (let i: number = 0; i < values.length; i++) { 
        total += values[i];
    }

    return total;
}

console.log(sum(10, 100, 10000, 100000)); //110110

 

【Angular】TypeScript型別宣告

説明

宣告字串

var title: string = 'Angular';
//title = 10000 ←不可以把變數的型態改成數值

title = 'Angular4'; //如果用var宣告的話就可以改變文字內容

宣告數值

var num: number = 9;

宣告布林值

var isOpen: boolean = true;

宣告陣列

文字陣列

var array: string[] = ['name', 'email', 'body'];

數字陣列

var numbers: number[] = [1, 5, 7];

混合陣列

var data: [number, string, number] = [0, 'apple', 99]

宣告物件

var options: { [key: string]: string; } = {name: 'gggg'} 
//key可以自己換別的字

宣告任意型別

任意型別類似JavaScript的一般變數,宣告後可以改變他的型別。

var something: any = 'go'; //最初宣告為任意型別,給定型別為字串

something = 2000; //改變型別為數值
something = false; //改變型別為布林值

用了any的話,型別就不會被檢查。所以一般推薦少用為妙。

不給定型別也可以

不給型別的話,TypeScript會自己辨認型別。

var aaa = "string";

//aaa = 1000 //還是不能更動型別,所以這樣會error

宣告複數型別

var sample: string | number;

sample = "aaaaa";
sample = 100000; //這個變數可以代入字串或數值

型別轉換

function log(message: string) { 
 return `text content is ${message}`
}

log('ggg') //text content is ggg;

//轉換參數型別為任意型別
log(<any>1000); //text content is 1000