typescript基础入门

typescript是js的超集，使用了强类型让我们在编译阶段就能发现大部分错误，减少了比如拼错字母导致运行失败的问题TT，也会让我们的代码更整洁，可读性和维护性更高。下面我整理了一些ts的一些常规用法，供大家参考：

1. 基础类型

let isTrue: boolean = false
let price: number = 3
let name: string = 'zhangsan'

2. 数组：元素个数不确定

let arr: Array<number> = [1, 2, 3]
let arr: number[] = [1, 2, 3]

3. 元组：元素个数和类型确定的数组

let x: [string, number, number] = ['zhangsan', 12, 23]
x[3] = 'world' //当访问一个越界的元素，会使用联合类型替代、

4. 枚举：用于一些可数的变量，比如一个星期七天，或者订单的五种状态。

枚举跟普通的对象有些类似，可以给成员赋值（可以是非数字），优势在于可以通过枚举值去获得枚举名，也可反向通过名称获得枚举值，

enum Status {
    waitPay = 16,
    waitDelivery = 2,
    received,
}
let order: Status = Status.waitPay //16
let order1: Status = Status[2] // waitDelivery
// 如果赋值为数字可根据前一个枚举值向后递增
let order2: Status = Status.received // 3 

5. any：任意类型，有时候偷懒用用，尽量少用

let price: any = 10
let arr: any[] = [1, true, 'zhangsan']

6. void, undefined, null：使用较少，可以在联合类型中应用，比如一个值可能返回null或undefined

let table: void = undefined // 或null 函数没有返回值时使用
let u: undefined = undefined
let n: null = null

7. 联合类型：该变量可能是多种类型

let table: string | null | undefined

8. 类型断言：我理解的类型断言就是强制的类型转换，如下实例

两种写法：val as string 或 <string>val

// 函数的参数val可能有两个类型字符串或数字
function func(val: string | number): number {
    // 本意判断如果val不为空，返回val的长度，但是number类型是没有length属性的，所以在此处强制将val变为字符型，编译器就不会报错了
    if ((val as string).length) {
        return (val as string).length
    } else {
        return val.toString().length
    }
}

 9. interface（接口）：定义了一个结构，包括属性和类型，之后所有相同结构的对象就可以用这个接口定义类型了，省去了挨个定义变量类型的步骤

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在，使用？可选属性，使接口更通用

interface Feature {
    id?: number
    name: string
}
let features: Feature = {
  id: 1,
  name: 'zhangsan',
}

10. 类型交叉：与可选属性功能相反用于扩充接口，目的都是使接口更通用

虽然有了接口，但是大部分的结构不可能一摸一样，比如9中的例子可能会多个select：Boolean，如果没有类型交叉，这些不同的接口需要重新自已定义，类型交叉就是在原来的接口上补充，以满足不同结构的需求

type FeatureSelect = Feature & {
    select:Boolean
}

11. 类型别名（与 interface相似）使用更灵活

type Feature = {
    id: number
    name: string
}
let features: Feature = {
  id: 1,
  name: 'zhangsan',
}

12. 泛型：类似于函数封装的原理，可以为(接口，类，函数)等封装类型，然后以参数的形式传类型值，如下<T>表示需要传的类型可以是string，也可以是number等其它类型

type Feature<T> = {
    id: number
    data: T
}
let features: Feature<string> = {
    id: 1,
    data: 'zhangsan',
}
let features1: Feature<number> = {
    id: 1,
    data: 123,
}

13. 函数：需要定义参数值和返回值的类型

function greeting(person: string): string {
        return 'Hello, ' + person
}

14. 可选参数：该参数可以不传

function greeting(person: string, msg?: string): string {
        return 'Hello, ' + person
}

15. 装饰器@

假如我们点一杯奶茶，装饰器相当于小料，我们可以为奶茶添加椰果、啵啵、布丁、红豆，一种小料就是一个装饰器可以随意搭配，如下实例中@Path就是一个装饰器，为HelloService类添加了一个额外功能

function Path(target:any) {
    console.log("I am decorator.")
}

@Path
class HelloService {}

//装饰器本身其实就是一个函数,可以为原有函数附加一个功能