typescript的基本使用

环境参数： typecript: 4.2.3

typescript的作用

为什么要使用typescript?

• 类型推演与类型匹配
• 开发编译时报错
• 极大程度的避免了低级错误
• 支持JavaScript最新特性（包含ES6/7/8）

二、语法

1、变量声明：let、const

2、TypeScript类型

• 基础类型：boolean、string、 number、 array、null、undefined、object
  ==新增==: tuple、 enum、 void、 never、 any
• 高级类型：union 组合类型、Nullable 可空类型、Literal 预定义类型

3、常见用法

// 1、数组
let list1: Array = [1, 2, 3]
let list2: number[] = [1, 2, 3]
let list3 = [1, 2, ,3]

let list4 = [1, '2', '3']
let list5: any[] = [1, 'b', true]

// 元祖（tuple）
// 固定长度和固定类型的特殊数组。注意声明元祖一定要指定类型。
let person1: [number, string] = [1, 'a']
person1[0] = 'b' // 报错


// 2、联合（Union）和字面量（Literal）类型
let union2: number | string | string[]
union2 = true // 报错

let literal: 1 | '2' | [1, 2]
literal = [1, 2, 3] // 报错

// 3、枚举类型Enum
enum Color {
  red = 'red1',
  blue = 'blue',
  green = 'green'
}
console.log('Color', Color.red) // red1


// 4、any 和 unknown
let randomValue: any = 666
randomValue =  true
randomValue()
randomValue.toUpperCase()

// any，可理解为忽略类型检查；unknow比any更加保险一点，保证类型安全

let randomValue: unknown = 666
randomValue =  true
randomValue() // 报错
randomValue.toUpperCase() // 报错


// 5、void、undefined、 never
function printResult (): undefined {
  console.log('lalala')
  return
}

function thorwError (message: string, errorCode: number): never {
  throw {
    message,
    errorCode
  }
}

4、类型适配（类型断言） Type Assertions

let message: any
message = 'abc'
message.endsWith('c')

let ddd = (message).endsWith('c')
let ddd2 = (message as string).endsWith('c')

5、函数类型

// 函数类型
let log = (message: string, code?: number, desc: string = '404') => {
  console.log(message, code, desc)
}
log('helloWord')

// Object对象类型
const person = {
  firstName: 'hello Word',
  lastName: 'gao',
  age: 18
}
console.log(person.hobby) // 报错

6、 接口、类、访问修饰符

// interFace接口
let drawPoint = (point: Point) => {
  console.log({x: point.x, y: point.y })
}

drawPoint({x: 123, y: 456})
drawPoint({x: '123', y: '456'}) // 报错

interface Point {
  x: number,
  y: number
}

// Class类
interface IPoint {
  x: number,
  y: number;
  drawPoint: () => void;
  getDistances: (p: IPoint) => number
}

class Point implements IPoint {
  constructor(public x: number, public y: number = 2) {

  }

  drawPoint = () => {
    console.log('X:', this.x, 'Y:', this.y)
  }

  getDistances = (p: IPoint) => {
    return Math.pow(p.x - this.x, 2) + Math.pow(p.y - this.y, 2) 
  }
}

const point = new Point(24, 50)
point.drawPoint()


// 访问修饰符
public 、 private, protected

// 私有变量懒人包

7、泛型

数据类型 + 尖括号

// 基本泛型
let list1: Array = [1, 2, 3]

// 动态泛型
let makeTuple = (x: T, y: Y) => [x, y];
const v1 = makeTuple(1, 'one')
const v2 = makeTuple(true, 1)