TypeScript基础知识-CFANZ编程社区

TypeScript

https://www.tslang.cn/

全局安装: npm i -g typescript

转换命令: tsc xxx.ts

类型

// JS的缺点: 只有动态错误分析 没有 静态错误分析

// 高达有个想法: 拿刀出去溜达一圈...
// 动态分析: 出去溜达... 被抓了
// 静态分析: 不需要真的出去, 立刻告知: 不可以

// JS: 运行时才有报错 -- 程序员无法在书写时立刻知晓错误
// TS: 强类型语言, 可以在代码中规定变量的类型
//    变量类型声明语法:   变量名: 类型名
function show(a: string) {
  // 优势: 工具看到 a是string类型, 则使用时自动给出代码提示
  // a.
  console.log(a.toUpperCase())
}
// 静态报错分析: 编程软件会直接分析代码, 类型不同则立刻给出错误提示 -- 把错误扼杀在萌芽里
// show(1)
show('mike123')

// 问题: TS语言是让程序员书写时比较好用, 但是浏览器不能识别TS代码, 需要转换成JS代码才能执行
// 转换工具需要安装: npm i -g typescript
// 转换命令: tsc xxx.ts

// TS文件会自动分析, 当前编辑器开启的所有文件 会认为是一个整体, 会合并操作
// 如果多个打开的文件 有同名的 变量/方法, 则会自动报错提示

let a: number //数字类型
a = 11
a = 1.2
a = null
a = undefined
// a = true
// a = false
// a = '333'

let b: boolean = true
let c: string = '333'

// any: 任意类型 -- 默认为任意类型, 类似JS的弱类型
let d: any
d = 1
d = true
d = 'mike'

// 自定义可选类型:  用|间隔, 代表两种都可以
let e: string | number
e = 'mike'
e = 12
e = true

// 把开启的其他文件关闭, 否则重名变量会报错

// Array<类型> : 数组中,每个元素都会指定类型的
let a: Array<string>

a = ['mike', 'lucy', 12, true]

// 简化写法:
let c: string[]
c = ['mike', 'lucy', 12, true]

// 指定元素个数和类型
let d: [string, number, boolean]
// d: 3个元素, 顺序是 字符串, 数字, 布尔类型
d = ['mike', 23, 11] //类型错误报错
d = ['mike', 23, true]
d = ['mike', 23, true, 44] //个数错误报错

// 对象类型都需要自定义
let a: object
// object: 任意对象类型, 值随意
a = { x: 10, y: 10, z: 100 }

// 新的关键词: interface
interface Employee {
  eid: string
  eage: number
  ename: string
  married: boolean
}

let b: Employee

b = { eid: '10001', eage: 22, ename: 'mike', married: true }

// 商品: 价格 名字 数量
interface Product {
  price: number
  name: string
  count: number
}

let p1: Product = { name: 'iPhone14', price: 9999, count: 34 }

面向对象相关

// 面向对象
class Demo {
  // 提前声明属性, 方法中才能 this.属性名 来使用
  name: string
  age: number

  //构造方法: new关键词触发
  constructor(name, age) {
    // 在JS中直接  this.属性名 = 值 是可以的, 如果属性名不存在会自动创建新的
    // 在TS中, 作者希望防止写错单词 导致错误的属性声明, 所以要求提前声明属性 再使用
    this.name = name
    this.age = age
  }
}

new Demo('mike', 33)

// 私有属性
// 权限词: 不同的属性可以拥有不同的权限, 限定其使用范围, 更加的安全可靠.
// public   公开的
// protected 保护的
// private  私有
class GaoDa {
  // 实际上每个属性都有权限词, 默认是public 公开的
  public name = '高达'
  // protected: 保护 -- 外部无法访问
  protected money = '99999'
  // private: 私有 -- 子类无法访问, 只有当前类能用
  private avi = '高达的小电影'
}

// 子类
class Son extends GaoDa {
  show() {
    // 子元素可以访问父元素的公开和保护的属性
    this.name
    this.money
    this.avi
  }
}

// GaoDa 类的外部
let gd = new GaoDa()
gd.name
// 类外只能访问 类的公开属性
gd.money
gd.avi

// 接口: interface
// 接口就是一个规定: 要求对象类型必须实现哪些属性

interface NvXu {
  money: number
  maiFang(): void //()说明是个方法,  void代表没有返回值
  maiChe(): void
}

// implements: 承诺实现 指定的接口标准
class GaoDa implements NvXu {
  // 必须在类中书写接口中规定的属性, 才不会爆红
  money: number
  maiChe(): void {}
  maiFang(): void {}
}

导出与导入

// 导出
// JS的旧语法 module.exports = {}
// JS的新语法 export default {}
// TS的写法  export {}
function mapState() {}
function mapGetters() {}

export { mapState, mapGetters }

// 导入

import { mapGetters, mapState } from './08.模块的导出'

mapGetters()
mapState()