title: Quick Start TypeScript
date: 2022-02-17 14:09:14
toc: true
category:
- typescript
tags: - Quick Start
- TypeScript
Basic Syntax#
This article will skip the three simple basic syntaxes: basic data types
, logical control
, and enumeration types
.
Arrays#
See code:
let a = [1, 2]
console.log(`Check array length ${a.length !== 0}`)
a.push(3, 4)
a.pop()
console.log(`Add and remove elements from the end of the array ${a}`)
a.unshift(3, 4)
a.shift()
console.log(`Add and remove elements from the beginning of the array ${a}`)
let b = a.slice(1, 3)
console.log(`Get a new array from the original array range ${b}`)
console.log(`Original array ${a} after removing 2 elements at index 1 ${a.splice(1, 2)}, original array ${a}`)
a = [4, 1, 2, 3]
console.log(`Elements removed from array ${a} and new elements added ${a.splice(1, 2, 11, 22)}, resulting in ${a}`)
a.unshift(22, 33)
console.log(`Index of element 22 in array ${a} is ${a.indexOf(22)}`)
console.log(`Index of element 22 starting from index 1 in array ${a} is ${a.indexOf(22, 1)}`)
console.log(`Array ${a} after dictionary sorting ${a.sort()}`)
let [a1, a2] = a
console.log(`Array ${a} expanded to specified variables by index position ${a1} ${a2}`)
let s = "a,b,c,d,e,f,g"
console.log(`Splitting string ${s} by delimiter , into an array ${s.split(',')}, with a length of ${s.split(',').length}`)
console.log(`Joining array ${a} together with delimiter % ${a.join('%')}`)
console.log('If the array is not reassigned, it is best to use the const declaration')
Result:
[LOG]: "Check array length true"
[LOG]: "Add and remove elements from the end of the array 1,2,3"
[LOG]: "Add and remove elements from the beginning of the array 4,1,2,3"
[LOG]: "Get a new array from the original array range 1,2"
[LOG]: "Original array 4,1,2,3 after removing 2 elements at index 1 1,2, original array 4,3"
[LOG]: "Elements removed from array 4,1,2,3 and new elements added 1,2 resulting in 4,11,22,3"
[LOG]: "Index of element 22 in array 22,33,4,11,22,3 is 0"
[LOG]: "Index of element 22 starting from index 1 in array 22,33,4,11,22,3 is 4"
[LOG]: "Array 22,33,4,11,22,3 after dictionary sorting 11,22,22,3,33,4"
[LOG]: "Array 11,22,22,3,33,4 expanded to specified variables by index position 11 22"
[LOG]: "Splitting string a,b,c,d,e,f,g by delimiter , into an array a,b,c,d,e,f,g, with a length of 7"
[LOG]: "Joining array 11,22,22,3,33,4 together with delimiter % 11%22%22%3%33%4"
[LOG]: "If the array is not reassigned, it is best to use the const declaration"
Objects#
See code:
let a = {
name: {
first: "" as string,
last: '',
},
age: 0,
bonus: undefined as (number | undefined),
}
console.log('Object declaration', a)
console.log(`Object converted to JSON string ${JSON.stringify(a)}`)
console.log('JSON string converted to object ', JSON.parse(JSON.stringify(a)))
Result:
[LOG]: "Object declaration", {
"name": {
"first": "",
"last": ""
},
"age": 0,
"bonus": undefined
}
[LOG]: "Object converted to JSON string {"name":{"first":"","last":""},"age":0}"
[LOG]: "JSON string converted to object ", {
"name": {
"first": "",
"last": ""
},
"age": 0
}
Functions#
See code:
// Function overloading
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))
// Optional parameters
function div(a: number, b: number, opt?: string) {
console.log(`${a} ${opt || "/"} ${b} = ${a / b}`)
}
div(1, 2, "/")
div(1, 2)
// Default parameters
function mul(a: number, b: number, opt: string = '*') {
console.log(`${a} ${opt || 0} ${b} = ${a * b}`)
}
mul(1, 2, '*')
mul(1, 2)
// Rest parameters
function sub(a: number, ...b: number[]) {
let tips = `${a} - (`
// Last element of the array
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)
// Object parameters
function post(param: {
url: string,
method: 'GET' | 'POST' | 'OPTION'
}) {
console.log(`${param.method} ${param.url}`)
}
post({
url: "https://qq.com",
method: 'GET'
})
// Object methods
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)
Result:
[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
}