快速上手 typescript

typescript: js的超集

参考文档

类型注解

例:

let age: string = '18'
// 其中 : string 就是类型注解
age = 20 // 类型错误

可以在一些特殊的场合省略类型注解

1. 声明变量并且初始化时

let a = 18
变量 a 的类型被自动推论为 number

1. 声明函数的返回值

function add(num1: number, num2: number): number {
    return num1 + num2
  }

函数 add 的返回值被自动推论为 number

数组类型

数组类型分为两种格式: 普通函数和箭头函数
格式1:
数组名: 类型[] = [元素1, 元素2, …]

let arr: number[] = [1, 2, 3]
arr.push(4)

数组 arr 中, 只能放 number 类型的元素
格式2:
数组名: Array<类型> = [元素1, 元素2, …]

let arr2: Array<string> = ['a', 'b', 'c']

联合类型

类型1 | 类型2 | 类型3 …

let x: number | string = 'a'
x = 1

x 既可以是 number, 也可以是string

数组联合类型

let arr3: (string | number | boolean)[] = [1, 'a', true]
arr3 = [false]

类型别名

一般首字母大写

type S = string
let str1: S = 'a'

自定义类型

{
  type MyArr = string | number | boolean
  let arr4: MyArr[] = [1, 'a', true]
}

函数: 给两个地方加类型, 参数和返回值

  // 1. 普通函数
  // function add(num1: 类型=默认值, num2: 类型=默认值): 返回值类型 {}
  function add1(num1: number, num2: number): number {
    return num1 + num2
  }
  let a = add1(1, 2)
  // 2. 箭头函数
  // let add2 = (num1: 类型=默认值, num2: 类型=默认值): 返回值类型 => {return num1 + num2}
  let add2 = (num1: number, num2: number): number => num1 + num2
  let b = add2(1, 2)

函数 —— 定义统一函数格式

  const add3 = (a: number, b: number): number => {
    return a + b
  }
  const sub = (a: number, b: number): number => {
    return a - b
  }
  // 自定义类型 右边整体是一个类型
  type MyFnc = (a: number, b: number) => number
  // add4 看成一个变量, MyFnc 看成一个类型 (a, b) => a + b 就是这个变量的值
  const add4: MyFnc = (a, b) => a - b
  const add5: MyFnc = (x, y) => {
    return x + y
  }
  add5(1, 2)

函数返回值 --> void

// void: 如果函数没有返回值, 设置为void格式
  // 三种情况
  // 1. 没有返回值
  // 2. 有 return 但是 return 为空
  // 3. return undefined
  // 普通函数
  function f(): void {
    console.log('这个函数没有返回值')
  }
  const n = f()
  // 箭头函数
  const f2 = (): void => {}
  type MyFn = () => void
  const f3: MyFn = () => {}

函数可选参数 ?

1. 使用函数实现某个功能时，参数可以传也可以不传;
2. 设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的并一定有值;

  const fn1 = (a: number, b?: number) => {
    console.log(a, b)
  }
  fn1(1, 2)
  fn1(1)

对象

对象属性可选, 属性前加问号

  let obj1 = { name: '小明', age: 18 }
  obj1.name = '小红'
  // ts 中定义对象, 是指对象的格式
  let obj2: { address: number; name: string; age: number } = { address: 100, name: '小明', age: 18 }
  obj2.age = 100
  // 自定义类型
  type MyObj1 = { address: number; name: string; age: number; hello: () => string }
  type MyObj2 = { address: number; name: string; age: number; hello(): void }
  let obj3: MyObj1 = {
    address: 1,
    name: '小❀',
    age: 20,
    hello: function () {
      return '你好'
    },
  }
  obj3.address = 2
  const fn = (obj3: MyObj1) => {
    obj3.age = 30
  }
  type Height = 170 | 180
  type MyStu1 = {
    name: string
    gender: '男' | '女'
    score?: number // 分数这个属性是可选的
    height: Height
    hobby: (study: string, game: string) => string
  }
  let stu1: MyStu1 = {
    name: '小华',
    gender: "男",
    // score: 80, 
    hobby: function () {
      return '123'
    },
    height: 180
  }
  let stu2: MyStu1 = {
    name: '小红',
    gender: '女',
    score: 90,
    height: 170,
    hobby: () => {
      return '123'
    },
  }

接口继承

interface 接口1 extends 接口2 { 接口1自己的属性 }
接口1会包含接口2的属性
例:

  interface IPoint2D { x: number, y: number }
  // interface IPoint3D { x: number, y: number, z: number }
  // 相同属性可以继承
  interface IPoint3D extends IPoint2D { z: number }
  const z: IPoint3D = { x: 1, y: 2, z: 3 }
}

元组

  // 元组
  // 元组类型是由若干类型组成的数组
  // number[]: 它只能表示一个数组, 元素是 number 类型
  let position1: [number, number] = [15.265, 20.556]
  let position2: [number, string] = [15.265, '20.556']

字面量

  let str = 'hello'
  const str2 = 'hello'
  // str string 类型
  // str2 字面量类型, str2中只能够保存 hello
  str = 'world'
  type MyType1 = string | number
  // 定义一个新类型, 可能是 string 或 number
  type MyType2 = 'hello' | 'world'
  // 定义一个新类型, 可能是 hello 或 world
  // 字面量类型, 单独使用没有场景
  // 它一般是和联合类型一起使用, 表示多个固定的值中取一个

枚举

  // 需求: 定义一个变量, 它的值只能是 'up' | 'down' | 'left' | 'right' 中一个
  // 四个特殊的字符串表示 四个方向
  type Directive = 'up' | 'down' | 'left' | 'right'
  let dir1: Directive = 'up'

  // 定义一个枚举类型
  enum Direction1 { Up, Down, Left, Right }
  console.log(Direction1.Down) // ==> 0
  console.log(Direction1.Right) // ==> 3
  enum Direction2 { Up = 10, Down, Left, Right }
  // 后面会依次递增
  // 使用枚举
  // 枚举名.值
  let dir2: Direction1 = Direction1.Up
  function fn(d: Direction1) {
    if (d === Direction1.Down) {
      console.log('111')
      
    }
  }
  // 注意: 
  // 1. ts中的类型声明语句转成 js 之后会被丢弃, 但是枚举不会
  // 2. 这个类型有值, 可以正常输出 console.log()这个枚举的值

  // 场景: 后端给我们的性别是0(男),1(女)
  enum Gender { 'man', 'woman' }

any

  // 让 ts 别管了
  // 场景: 临时使用
  let obj: any = { a: 1 }
  obj.b = 2
  // 其他隐式具有 any 类型的情况 
  // 1. 声明变量不提供类型也不提供默认值
  let c 
  // 2. 函数参数不加类型
  function fn(): any {}

类型断言

  // <img src="xxx"id="img"/>
  // const img = document.getElementById('img')
  const img = document.getElementById('img') as HTMLImageElement
  // 关键字 as 后面的类型是一个更加具体的类型
  // document.getElementById()
  // 得到的返回值是 HTMLElement 类型
  // HTMLElement 类型没有src属性
  // HTMLElement 类型==>HTML元素
  // 我们自己知道我们得到是一个图片是一种特殊的htm1元素
  img.src = 'https://www.baidu.com/img/bd_logo1.png'
  // img.src "http://xxxx/xxxx.com/1.png"