title: 極速上手 TypeScript
date: 2022-02-17 14:09:14
toc: true
category:
- typescript
tags: - 極速
- 上手
- typescript
語法基礎#
本文將會跳過 基本數據類型、邏輯控制 和 枚舉類型 這三種簡單的基礎語法。
陣列#
見代碼：
let a = [1, 2]
console.log(`判斷陣列長度 ${a.length !== 0}`)
a.push(3, 4)
a.pop()
console.log(`從陣列尾部添加和刪除元素 ${a}`)
a.unshift(3, 4)
a.shift()
console.log(`從陣列頭部添加和刪除元素 ${a}`)
let b = a.slice(1, 3)
console.log(`從原陣列區間獲得一個新陣列 ${b}`)
console.log(`原陣列 ${a} 刪除下標 1 位置的 2 個元素後得到的陣列 ${a.splice(1, 2)}， 原陣列 ${a}`)
a = [4, 1, 2, 3]
console.log(`在陣列 ${a} 中被刪掉的元素 ${a.splice(1, 2, 11, 22)} 追加新的元素後 ${a}`)
a.unshift(22, 33)
console.log(`元素 22 在陣列 ${a} 中的下標為 ${a.indexOf(22)}`)
console.log(`元素 22 在陣列 ${a} 中 1下標位置起的下標為 ${a.indexOf(22, 1)}`)
console.log(`陣列 ${a} 字典排序後 ${a.sort()}`)
let [a1, a2] = a
console.log(`陣列 ${a} 元組 ${a1} ${a2}，即按照下標位置展開到指定變數`)
let s = "a,b,c,d,e,f,g"
console.log(`將字串 ${s} 按照分隔符 , 分割為陣列 ${s.split(',')}，長度為 ${s.split(',').length}`)
console.log(`將陣列 ${a} 以分隔符 % 拼接到一起 ${a.join('%')}`)
console.log('陣列如果不重新賦值最好使用 const 聲明')
運行結果：
[LOG]: "判斷陣列長度 true"
[LOG]: "從陣列尾部添加和刪除元素 1,2,3"
[LOG]: "從陣列頭部添加和刪除元素 4,1,2,3"
[LOG]: "從原陣列區間獲得一個新陣列 1,2"
[LOG]: "原陣列 4,1,2,3 刪除下標 1 位置的 2 個元素後得到的陣列 1,2， 原陣列 4,3"
[LOG]: "在陣列 4,1,2,3 中被刪掉的元素 1,2 追加新的元素後 4,11,22,3"
[LOG]: "元素 22 在陣列 22,33,4,11,22,3 中的下標為 0"
[LOG]: "元素 22 在陣列 22,33,4,11,22,3 中 1下標位置起的下標為 4"
[LOG]: "陣列 22,33,4,11,22,3 字典排序後 11,22,22,3,33,4"
[LOG]: "陣列 11,22,22,3,33,4 元組 11 22，即按照下標位置展開到指定變數"
[LOG]: "將字串 a,b,c,d,e,f,g 按照分隔符 , 分割為陣列 a,b,c,d,e,f,g，長度為 7"
[LOG]: "將陣列 11,22,22,3,33,4 以分隔符 % 拼接到一起 11%22%22%3%33%4"
[LOG]: "陣列如果不重新賦值最好使用 const 聲明"
物件#
見代碼：
let a = {
name: {
first: "" as string,
last: '',
},
age: 0,
bonus: undefined as (number | undefined),
}
console.log('物件聲明', a)
console.log(`物件轉為 json 字串 ${JSON.stringify(a)}`)
console.log('json 字串轉為物件 ', JSON.parse(JSON.stringify(a)))
運行結果：
[LOG]: "物件聲明", {
"name": {
"first": "",
"last": ""
},
"age": 0,
"bonus": undefined
}
[LOG]: "物件轉為 json 字串 {"name":{"first":"","last":""},"age":0}"
[LOG]: "json 字串轉為物件 ", {
"name": {
"first": "",
"last": ""
},
"age": 0
}
函數#
見代碼:
// 函數重載
function add(a: number, b: number): number
function add(a: string, b: number): number
function add(a: any, b: number): number {
a = parseInt(a)
return a + b
}
console.log(add("1", 1))
console.log(add(1, 1))
// 可選參數
function div(a: number, b: number, opt?: string) {
console.log(`${a} ${opt || "/"} ${b} = ${a / b}`)
}
div(1, 2, "/")
div(1, 2)
// 參數默認值
function mul(a: number, b: number, opt: string = '*') {
console.log(`${a} ${opt || 0} ${b} = ${a * b}`)
}
mul(1, 2, '*')
mul(1, 2)
// 可變參數列表
function sub(a: number, ...b: number[]) {
let tips = `${a} - (`
// 陣列最後一個元素
let [lastVal] = b.slice(-1)
b.forEach(item => {
if (item !== lastVal) {
tips += `${item} + `
} else {
tips += `${item}`
}
a -= item
})
tips += `) = ${a}`
console.log(tips)
}
sub(100, 1, 2, 3, 4, 5, 6, 7, 8, 9)
let a = [1, 2, 3, 4, 5]
sub(20, ...a)
// 物件參數
function post(param: {
url: string,
method: 'GET' | 'POST' | 'OPTION'
}) {
console.log(`${param.method} ${param.url}`)
}
post({
url: "https://qq.com",
method: 'GET'
})
// 物件方法
const obj = {
name: {
first: '三',
last: '張',
},
age: 10,
salary: 8000,
bouns: 2000,
updateBouns(num?: number) {
this.bouns += num || 0
}
}
console.log(obj)
obj.updateBouns()
console.log(obj)
obj.updateBouns(1200)
console.log(obj)
運行結果:
[LOG]: 2
[LOG]: 2
[LOG]: "1 / 2 = 0.5"
[LOG]: "1 / 2 = 0.5"
[LOG]: "1 * 2 = 2"
[LOG]: "1 * 2 = 2"
[LOG]: "100 - (1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9) = 55"
[LOG]: "20 - (1 + 2 + 3 + 4 + 5) = 5"
[LOG]: "GET https://qq.com"
[LOG]: {
"name": {
"first": "三",
"last": "張"
},
"age": 10,
"salary": 8000,
"bouns": 2000
}
[LOG]: {
"name": {
"first": "三",
"last": "張"
},
"age": 10,
"salary": 8000,
"bouns": 2000
}
[LOG]: {
"name": {
"first": "三",
"last": "張"
},
"age": 10,
"salary": 8000,
"bouns": 3200
}