TypeScript學習筆記-行前重點整理[SE6]

2023-04-19

SE6重點整理

參考-讓 TypeScript 成為你全端開發的ACE ( https://ithelp.ithome.com.tw/articles/10214714 )裡對於在學習TypeScript 前至少先認識或過目一下 SE6 的語法

let 與 const 宣告方式
解構語法( Destructuring )
箭頭函示( Arrow Function )
模板字串( Template Literals )
匯集-展開運算子 ( Rest-Spread Operator)

解構語法( Destructuring )

可以想像是分解一個物品再分別套入對應的組件中

類型的解構賦值

//陣列的解構賦值
let [a,b] = [1,2]; //a=1 , b=2

//物件的解構賦值
const {attr1:x,attr2:y} = {attr1:10,attr2 : 20}; //x=10 , y=20

//物件屬性的解構賦值
const {admin,user} = {admin:'a',user:'b'}; //admin = 'a' , user = 'b'

//字串的解構賦值
let [string1,string2] = 'Hi'; //string1 = 'H' , string2 = 'i'

基本使用

可以先宣告變數再解構賦值
如果解構失敗或變數沒有對應值，變數的內容就會變成 undefined
可以留空略過某些值
在解構時允許給定預設值

//先宣告變數
let x, y;
[x, y] = [5, 10];

//沒有對應值
let [a, b, c] = [1, 2]; // c = undefined

//留空跳過第二個值
let [a, , b] = [1, 2, 3];// (a,b) = [1,3]

//允許給定預設值
let [x = 'a', y = 'b'] = ['A']; // (x,y) = 'A','b'
let { size = 'big', name = '' } = { name: 'A' }; //(size,name) = 'big' , 'A'

進階使用

交換變數的值
與 rest 參數結合
物件先宣告後解構需要在外層加上 ( )

//交換變數的值
let a = 1, b = 10;
[a, b] = [b, a];// a=10 , b=1

//與 rest 參數結合
let [first, ...other] = [1, 2, 3, 4];//first = 1 , other = [2,3,4]

//物件先宣告後解構 需加上 ()
let x, y;
({ x, y } = { x: 1, y: 2 });

資料參考來源：https://ithelp.ithome.com.tw/articles/10194743

箭頭函示( Arrow Function )

允許使用 => (箭頭)來定義函數，比起一般函數可以用更簡短的語法來表示，讓程式碼的可閱讀性變高

//一般函數寫法
let circleArea = function (r: number) {
    return r * r * 3.14;
}

//箭頭函數寫法
let circleAreaArrow = (r: number) => r * r * 3.14; 

//參數有包含 {} 需加上 ()
let foo = () => ({ x: 10, y: 20 });
console.log(foo());//{ x: 10, y: 20 }

//如後面的程式區塊是陳述式或多條語句 需加上 {}
let getDate = () => {
    let date = new Date();
    return date.toISOString().substring(0, 10);
}
console.log(getDate());//2023-04-19


class Employee {
    empCode: number;
    empName: string;

    constructor(code: number, name: string) {
        this.empCode = code;
        this.empName = name;
    }
    display = () => console.log(`code ${this.empCode} - name ${this.empName}`);
}

let emp = new Employee(1, "Ram");
emp.display();//"code 1 - name Ram"

資料參考來源：https://ithelp.ithome.com.tw/articles/10195669

模板字串( Template Literals )

需使用反引號標識 ` ` 包起來表示
需使用 ${ } 嵌入變數或任何表達式

//可寫入多行字串
let demo1 = `
<ul>
    <li>first</li>
    <li>second</li>
<ul>
`;

//可嵌入變數
let Name = "Bob", Time = "today";
console.log(`Hello ${Name}, how are you ${Time}?`);//Hello Bob, how are you today?

//可嵌入任何表達式
let today = new Date();
console.log(`The time and date is ${today.toLocaleDateString()}`);//The time and date is 2023-4-19

資料參考來源：https://ithelp.ithome.com.tw/articles/10195140

匯集-展開運算子 ( Rest-Spread Operator)

Spread Operator - 簡化展開陣列的過程，此運算子由三個點 … 組成

//展開單一陣列 轉化成獨立參數
let spread = [1, 2, 3];
console.log(spread);//[ 1, 2, 3 ]
console.log(...spread);//1 2 3

//陣列嵌入
let a1 = ['x', 'y'];
let a2 = ['w', ...a1, 'z'];
console.log(a2);//[ 'w', 'x', 'y', 'z' ]

//合併串聯多個陣列
let a3 = [1, 2, 3];
console.log([...a3, ...a1]);//[ 1, 2, 3, 'x', 'y' ]

//將字串展開爲個單一字元
let text = [...'Hello'];
console.log(text);//[ 'H', 'e', 'l', 'l', 'o' ]

//物件合併 有相同屬性名 合併後只會用最後一個物件的值
let obj1 = { Name: 'foo', X: 10 };
let obj2 = { Name: 'foo2', Y: 20 };

let mergeObj = { ...obj1, ...obj2 };
console.log(mergeObj);//{ Name: 'foo2', X: 10, Y: 20 }

const cat = {
    name: "chase",
    type: "cat",
    color: "black",
    age: 2,
    favoriteFood: "fish"
};
//物件複製
const copiedCat = { ...cat };
copiedCat.age = 5;
console.log(cat);
// {
//     name: 'chase',
//     type: 'cat',
//     color: 'black',
//     age: 2,
//     favoriteFood: 'fish'
//   }
console.log(copiedCat);
// {
//     name: 'chase',
//     type: 'cat',
//     color: 'black',
//     age: 5,
//     favoriteFood: 'fish'
//  }

Rest 參數

取得剩下的參數後存放在同一個陣列裡
由三個點組成 … 後面再加上陣列變數名稱，與展開運算子很相似，但兩者是相反的概念
必須是最後一個參數

function foo(...rest: any[]) {
    console.log(rest);
}

foo();//[]
foo(1, 2, 3);//[ 1, 2, 3 ]

//必須是最後一個參數
function greet(greeting: string, ...names: string[]) {
    return `${greeting} ${names.join(",")!}`;
}
console.log(greet("Hello", "Steve", "Bill"));//Hello Steve,Bill

//可使用在解構賦值上
let spread1 = [5, 2, 8];
let spread2 = [6, 1, 3];
//將兩個陣列合併後做排序大小 再取出第一個值
//等號左邊可以使用rest參數 右邊使用spread 展開運算子
let [first, ...rest] = [...spread1, ...spread2].sort();
console.log(first);//1
console.log(rest);// 2, 3, 5, 6, 8 ]

資料參考來源：https://ithelp.ithome.com.tw/articles/10195477

https://ithelp.ithome.com.tw/articles/10195615

https://www.tutorialsteacher.com/typescript/rest-parameters

TypeScript

回首頁