分類彙整:Angular

【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();

 

 

【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

【Angular v4】環境架設

下載檔案

  1. Angular quickstart
  2. node.js

環境建置

  1. 安裝node.js
  2. 解壓縮quickstart
  3. 依序輸入這3個指令
    cd 指向quickstart路徑
    npm install
    npm start

檔案編輯

  • app/component.ts→定義元件
  • index.html→定義首頁
  • main.ts→啟動Web APP
  • style.css→定義全體Web APP的樣式

編輯元件

打開app/component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
   <h1>Hello {{name}}</h1> //變數用2個大括弧包起來
   <h2>text</h2>
  `,
  styles: [` //撰寫style
   h1 {
    color: red;
  }
  h2 {
    color: bluec;
   }
 `]
})

export class AppComponent{ 
 name = 'Fist Angular Application'; //定義變數內容 
}