从零开始的web前端学习-TypeScript

目录

• 1TypeScript简介
• 2开发环境搭建
• 3变量
• 4any关键字
• 5函数
• 6对象
• 7类型别名
• 8数组
• 9联合
• 10元组
• 11枚举
• 12接口
• 13项目初始化（简陋）
• 14类
• 15类型修饰符
• 16getter、setter方法
• 17继承
• 18接口实现
• 19抽象类
• 20泛型
• 21类型缩小

这篇文章仅仅是分享 TypeScript 的部分内容，并没有完整地对其进行学习总结，想要完整地学习 TypeScript，请移至：https://www.typescriptlang.org/docs/

1TypeScript简介

TypeScript 通常被认为是 JavaScript 的超集，但这并不仅仅意味着其增加许多功能，而是我们以更加精确的方式编写 JavaScript，以便代码错误减少，实际上 TypeScript 最终会被编译成为 JavaScript，本质上其应被看作是一种开发工具

TypeScript 实际的作用是 Staic checking（静态检查），这意味着无论何时编写代码，整个语法都会被分析检查，减少错误，而不需要等待实际运行渲染时出现错误

TypeScript 可以以 .ts 格式编写，这是一种最简单、基础的 TypeScript 格式

2开发环境搭建

对于 TypeScript 的安装，可以使用 Node 的 npm 工具进行局部安装，这可以使得每个项目的版本独立，互不影响，同时也可以选择进行全局安装

REM 局部安装
npm i typescript --save-dev

REM 全局安装
npm i typescript -g

REM 查看 TypeScript 版本
tsc -v

在开发环境搭建好后，可以尝试实际编写代码，并将其转换为 JavaScript

// test.ts
console.log('hello world')

在编写完 TypeScript 文件后，并不能以 .ts 格式运行代码，而需要在命令行用 tsc 命令对 .ts 格式的文件进行转换

REM .ts 转换 .js
tsc test.ts

3变量

TypeScript 可以说是关于 type（类型）的 JavaScript，其中包含十分多的变量类型如 number、string、boolean、underfined、object、array、null、void、tuples 等等，还有 any 关键字，使用它则意味着我们并不用被变量类型所困扰，unknown 这种 TypeScript 设置的特殊类型等等

// variable.ts
// 创建变量 -- let variableName: type = value
let greetings: string = 'Hello World'

// JavaScript 语法也适用，并且更简洁
let myNum = 6

// 使用变量
console.log(greetings)

// 消除某些报错
export {}

注意：

• 当你在 TypeScript 中对变量类型进行确定后，对应的变量不再能够使用其他类型的方法，若使用则它会报错告知，而仅仅能使用同类型的方法
• 为变量进行类型确定显得低效冗余，实际上，TypeScript 在赋值时会对变量类型自动进行推断，所以可以使用更加简洁的语法

4any关键字

any 关键字并不意味着任何类型，它仅仅是 TypeScript 中的一个标记，被标记的变量将会取消掉对其值的类型推断，这在大部分时候并不推荐，可以配置 noImplicitAny 将任何隐式标记为错误

// 当变量声明不赋值时，该变量就会被 any 标记
let anyType

5函数

any 关键字标记对于变量来说，在部分时候是可用的，甚至极少情况下，我们需要 any 关键字标记，但在函数中，any 标记参数是会引发错误的，所以在函数部分，确定参数类型是十分有必要的

// function.ts
// JavaScript 语法，但此时参数 num 会被 any 标记
function addTwo (num) {
  return num + 2
}

// 确定参数类型，取消 any 标记
function addTwo (num: number) {
  return num + 2
}

// 箭头函数，参数带默认值
let loginUser = (name: string, email: string, isPaid: boolean = false) => {}
// 若带默认值，则可以省略参数传递
loginUser('Tom', '123@q.com')

// 确定返回值类型
function addTwo (num: number): number {
  return num + 2
}

// 箭头函数同样适用
function getStr = (s: string): string {
  return ''
}

// 方法同样适用
const heros = ['thor', 'spiderman', 'ironman']
heros.map((hero): string => { // 由于 heros 是一个字符串数组，所以会自动推断 hero 是字符串类型
  return `hero is ${hero}`
})

// 无返回值
function consoleErr (errmsg: string): void {
  console.log(errmsg)
}

// never 意味着函数永远不会返回值，是为错误处理设置的
function handleErr (errmsg: string): never {
  throw new Error(errmsg)
}

// 返回值类型多样时，TypeScript 会自动推断并联合
function getValue (myVal: number) { // 此时返回值类型为 true | "Your value lower than 5"
  if (myVal >= 5) {
    return true
  }
  return "Your value lower than 5"
}

export {}

注意：never 代表从未被观察到的值，在返回类型中，这意味着函数抛出发生异常或终止程序的执行

6对象

// object.ts
// JavaScript 的对象创建语法同样适用于 TypeScript
const user = {
  name: 'Tom',
  email: '123@q.com',
  isActive: true
}

// 常见场景
function createUser ({name: string, isLogin: boolean}) {}
const userOne = createUser({name: 'Tom', isLogin: false})

const userTwo = createUser({name: 'Marry', isLogin: false, email: '123@q.com'}) // 这会报错
const newUser = {name: 'Marry', isLogin: false, email: '123@q.com'}
createUser(newUser) // 这不会报错，但实际上并不存在属性 email

// 返回值类型为对象
function createCourse (): {name: string, price: number} { // 实际上，可读性以及实用性都较差
  return {name: 'react', price: 100} // 当返回值属性无法对应时会报错
}

7类型别名

类型别名简单来讲是一个属性集，它只关注用户的输入参数，获取用户的输入信息，这可以简化函数的输入参数列表，也能够优化返回值为对象的差可读性

// typeAlias.ts
type User = { // 类型别名
  readonly _id: string, // 只读变量，下划线前缀代表该变量故意不使用
  name: string,
  email: string,
  isPaid: boolean,
  credcardDetails?: number // 选择变量，可选择输入或不输入
}

type cardNumber = {
  cardNumber: string
}

type cardDate = {
  cardDate: string
}

type cardDetails = cardNumber & cardDate & { // 混合类型
  cvv: number
}

注意：TS 编译成为 JS 后，JavaScript 并没有相关的只读约束，readonly 仅仅是 TypeScript 的特性，在出现修改只读变量的错误时，它会阻止编译

8数组

// array.ts
const superHeros = [] // never 类型数组
superHeros.push('spiderman') // never 类型数组拒绝接受 string

const scores: number[] = [] // number 类型数组
scores.push(6) // number 类型数组接受 number

const names: Array<string> = [] // string 类型数组

const MLModels: number[][] = [ // 类似二维数组，且仅允许存储 number 数组
  [255, 255, 255],
  [0, 0, 0]
]

9联合

联合允许数据类型的多样化，是多种类型数据的组合

let score: number | string = 33 // 联合类型，score 是 number 或 string 类型

type User = {
  name: string
  id: number
}

type Admin = {
  userName: string
  id: number
}

let Tom: User | Admin = {name： 'Tom', id: 123} // 联合类型，但现为普通用户

Tom = {userName: 'hc', id: 456} // 成为管理员

function getDBId (id: number | string) {
  if (typeof id === 'string'){ // 联合类型视为新的类型，需要细化类型
    id.toLowerCase() // 联合类型不能直接调用对应类型方法
  }
}

const data: number[] | string[] = [] // data 是一个 number 类型数组或一个 string 类型数组
const datas: (number | string)[] = [] // datas 是一个 number 类型与 string 类型混合的数组

let PI: 3.14 = 3.14 // 类似于常量定义，只允许赋值 3.14
let seatPosition = 'aisle' | 'middle' | 'window' // 允许联合类型

10元组

元组从广义上看，它是一个数组，一种特殊的数组，TypeScript 对其存在某些限制

// tuple.ts
let tUser: [string, number, boolean] // 元组声明

tUser = ['hc', 100, true] // 赋值类型必须对应

type User = [number, string] // 类型别名实现元组效果
const newUser: User = [112, 'Tom']

newUser[1] = 'Marry' // 在某些版本中，这是允许的操作，尽管是 const 声明

newUser.push(true) // 数组方法，打破元组限制

注意：TypeScript 对于元组的限制并不严格，在使用元组类型时，更需要自行添加一些限制以防止程序的错误

11枚举

// enams.ts
const enum SeatChoice { // 枚举声明，const 会防止编译生成过多 JavaScript 代码，而仅生成必要内容
  AISLE = 10, // 默认值设置
  MIDDLE,
  WINDOW
}

const seatPosition = SeatChoice.AISLE // 枚举使用

注意：第一枚举变量默认值为零，后续变量会递增，但可以自行设置默认值，后续变量同样会递增，不仅仅是第一枚举变量，所有枚举变量都可以设置默认值，但请注意，递增操作仅针对于 number 类型，若设置 string 类型，就需要每个都设置默认值，除非有某一枚举变量设置为 number 类型，其后续变量会递增

12接口

// interface.ts
interface User { // 接口声明
  readonly DBId: number, // 只读属性
  email: string,
  userId: number,
  googleId?: string, // 可选属性
  sayHi: () => string, // 方法，返回值类型为 string
  sayBye(): string // 方法，返回值类型为 string
  say(words: string): string // 含参方法，返回值类型为 string
}

interface User { // 接口属性增加
  githubToken: string
}

const Tom: User = {DBId: 123, email: '123@q.com', userId: 123,
  sayHi: () => {
    return 'Hi'
  },
  sayBye: () => {
    return 'Bye'
  },
  say: (word: 'Hello') => { // 传入参数名称可选，但类型必须固定
    return `say {$words}`
  },
  githubToken: 'github' // 增加属性
}

interface Admin extends User { // 接口继承
  role: 'admin' | 'user'
}

13项目初始化（简陋）

REM 项目根目录
tsc --init

在项目文件夹下执行指令，将会得到 tsconfig.json 配置文件

REM 项目根目录
npm init -y

在项目文件夹下执行指令，将会得到 package.json 配置文件
注意：tsconfig.json 用于 TypeScript 配置，package.json 是包管理器配置文件

还需要在项目根目录下创建项目资源文件夹 src 以及打包分发文件夹 dist

// tsconfig.json
"outDir": "./dist" // 输出目录

但通过 tsc 指令将 TS 编译成 JS，不会将文件输出至输出目录

REM 监视模式
tsc -w

通过 tsc 指令进入监视模式后，编译文件将会默认输出至 dist/index.js 文件

14类

// class.ts
class User { // 类声明
  email: string,
  readonly name: string, // 只读属性
  constructor(email: string, name: string){ // 构造函数
    this.email = email,
    this.name = name
  }
}

const Tom = new User('123@q.com', 'Tom') // 实例化
Tom.email = '456@q.com' // 修改属性

15类型修饰符

// class.ts
class User {
  public email: string, // 公有属性，默认公有
  name: string,
  private city: string = 'GuangZhou', // 私有属性
  constructor(email: string, name: string){
    this.email = email,
    this.name = name
  }
}

const Tom = new User('123@q.com', 'Tom')
console(Tom.city) // 这并不会被允许，私有属性不能从外部访问

// 简化语法
class Admin {
  readonly city: string = 'GuangZhou',
  constructor(
    private email: string,
    private name: string
  ){}
}

16getter、setter方法

// class.ts
class User {
  readonly city: string = 'GuangZhou',
  constructor(
    private _email: string, // 下划线可以区分私有属性和公有属性，但并不是规范
    private _name: string
  ){},

  get getEmail(): string { // getter 方法
    return `${this._email}`
  },

  set setName(name: string) { // setter 方法，不应该设置返回值类型，即使为 void
    this._name = name
  }
}

17继承

// class.ts
class User {
  private keyId = 1
  protected _count = 1
}

class subUser extends User {
  changeCount () {
    this.count += 1
  }
}

注意：private 修饰的属性只能在类内部访问，继承类也无法访问，但 protected 修饰的属性可以在类内部和继承类内部访问

18接口实现

// class.ts
interface takePhoto {
  cameraMode: string,
  filter: string,
  burst: number,
  betterPhoto(): void
}

class Instagram implements takePhoto { // 接口实现必须访问所有属性，实现所有方法
  constructor( // 访问属性
    public cameraMode: string,
    public filter: string,
    public burst: number,
    public video: string // 允许丰富接口属性
  ){},
  betterPhoto(): void { // 实现方法
    console.log('Make photos better')
  }
}

19抽象类

// abstractClass.ts
abstract class takePhoto { // 抽象类，无法实例化
  constructor(
    public cameraMode: string,
    public filter: string
  ){},
  abstract betterPhoto(): void // 抽象方法，无需实现
  getReelTime(): number { // 非抽象方法，需实现
    return 2
  }
}

class Instagram extends takePhoto { // 继承抽象类并实现
  constructor( // 访问属性
    public cameraMode: string,
    public filter: string,
    public burst: number // 丰富属性
  ){
    super(cameraMode, filter)
  },
  betterPhoto(): void { // 实现抽象方法
    console.log('Make photos better')
  }
}

注意：抽象类可以有非抽象方法，但抽象方法必须存在于抽象类中

20泛型

// generics.ts
function identityOne (val: number | boolean): number | boolean { // 联合实现泛型
  return val
} // 存在范围的约束，例如此处 string 类型将会被拒绝

function identityTwo (val: any): any { // any 关键字实现泛型
  return val
} // 类型隐患，any 关键字将会取消类型检查，可能导致类型不一致等问题

function identityThree<Type> (val: Type): Type { // 泛型函数，Type 可以换成其它字符串，但需相同
  return val
} // 在保证类型安全的同时，实现对所有类型的接受

function identityFour<T> (val: T): T { // Type 可以换成其它字符串，但需相同
  return val
}

// 泛型函数，数组输入
function arrayInput<T> (array: T[]): T { // T[] 也可写作 Array<T>
  return array[0] // 返回值类型为 T，则需要返回 T[] 中的值
} // 只有在数组作为输入时，才能使用数组方法
 
// 泛型函数，箭头函数形式
const getScores = <T> (scores: T[]): T => { // <T, > 添加逗号可以表示这不是 JSX 标签，而是泛型
  return scores[0]
}

// 多泛型参数函数，泛型参数限制
function another<T, U extends number> (valOne: T, valTwo: U): object { // U 应为 number 类型
  return {
    valOne,
    valTwo
  }
}

// 泛型类
class Sellable<T> {
  public cart: T[] = [],
  addToCart (product: T) {
    this.cart.push(product)
  }
}

21类型缩小

类型缩小实际上是对泛型或联合等包含多种类型时的类型检查，这是一种类型保护工作，能够避免许多错误

// narrowing.ts
function detectType (val: string | number) {
  if (typeof val === 'string') { // typeof 实现 type narrowing 效果
    return val.toLowerCase()
  }
  return val + 2
}

function printAll(strs: string | string[] | null) {
  if (strs) { // string 类型
    if (typeof strs === "object") { // 数组实际上认为是 object 类型
      for (const s of strs) {
        console.log(s)
      }
    } else if (typeof strs === "string") { // null 类型
      console.log(strs)
    }
  }
} // 代码块实际上存在漏洞，空字符串情况被忽略

// in 运算符
interface User {
  name: string,
  email: string
}

interface Admin {
  name: string,
  email: string,
  isAdmin: boolean
}

function isAdminAccount (account: User | Admin) {
  if ('isAdmin' in account) { // 检查是否含有对应属性
    return account.isAdmin
  }
}

// instanceof 关键字
function logValue(x: Date | string) {
  if (x instanceof Date) { // 检查是否为某类的实例化
    console.log(x.toUTCString())
  } else {
    console.log(x.toUpperCase())
  }
}

// as 谓词
type fish = {swim: () => void}
type bird = {fly: () => void}

function isFish(pet: fish | bird): pet is fish { // 特殊返回值，true 则返回 pet is fish
  return (pet as fish).swim !== undefined // 检查是否含有对应方法
} // 类似 in，但 in 更倾向于“你有我没有”，as 则是“找不同”

interface Circle {
  kind: 'circle',
  radius: number
}

interface Square {
  kind: 'square',
  side: number
}

type Shape = Circle | Square

function getShape (shape: Shape) {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius ** 2
  }
  return shape.side * shape.side
}

// switch 重写
function getArea (shape: Shape) {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2
    case 'square':
      return shape.side * shape.side
    default:
      const _defaultShape: never = shape // never 类型的使用场景
      return _defaultShape
  }
} // default 情况能够避免某些错误，因为它会在错误时告知