banner
biuaxia

biuaxia

"万物皆有裂痕,那是光进来的地方。"
github
bilibili
tg_channel

Get Started with TypeScript Quickly

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
}
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.