Get Started with TypeScript Quickly

Apr 12, 2023221

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

This article provides a quick introduction to TypeScript. It covers array manipulation, object declaration, and functions. The code examples demonstrate various operations such as array slicing, object declaration, JSON conversion, function overloading, optional parameters, default parameter values, and object methods. The article also includes the corresponding output for each code example.

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
}