TypeScript 入门

这是一个简单的入门,带你快速了解 TypeScript 类型

# 准备

  • 推荐使用 vs code 编辑器开始下面操作
  • 创建 test.ts 文件

输入下面内容

let flag = true
let number = 1024
let str = 'hello world'
let arr = [1, 2, 3, 4]
let u = undefined
let n = null
let fun = () => {}
const type = 'type'

TIP

然后将鼠标移动至变量名上,弹框显示类型推论。例如: let flag: boolean

可以按照提示类型,完善代码(当然也可以省略)

let flag: boolean = true

尝试将变量修改为其它类型,将报错

flag = 'true'
// 不能将类型“"true"”分配给类型“boolean”

# 基础类型

# boolean

表示是一个布尔值

let flag: boolean = true

flag = false

# number

表示是一个数字

let number: number = 1024

number = 0b1010

# string

表示是一个字符串

let str: string = 'hello world'

str = `number: ${number}`

# null

表示 null。默认情况下null是所有类型的子类型

let n: null = null

# undefined

表示是 undefined。默认情况下undefined是所有类型的子类型

let u: undefined = undefined

# array

表示是一个数组

let arrString: Array<string> = ['a', 'b', 'c', 'd']
let arr: number[] = [1, 2, 3, 4]

# object

表示是一个对象

let b: object = {}
let a: {} = {}

let cat: {
  readonly name: string // readonly 表示该项只读
  age: number
  like?: string // ? 表示该项可选(相当于 like: string | undefined)
  eat?: (food: string) => void
} = {
  name: 'jack',
  age: 2
}
let obj: {
  [key: string]: string // 表示键为 string 类型,值为 string 类型
} = {
  a: 'aa',
  b: 'bb'
}

# symbol

表示是一个 symbol

let sym: symbol = Symbol('key')

# Date

表示是一个时间

let time: Date = new Date()

# RegExp

表示是一个正则表达式

let reg: RegExp = /^[0-9][a-z]/i

# Function

表示是一个函数

const fun: Function = () => {}

function myName(name: string) {
  console.log(name)
}

# any

表示可以是一个任意类型的值。不建议过多使用,不然就失去意义了

let a: any = 'hello world'

a = 1024

let b: string = a

# unknown

表示可以是一个任意类型的值。所有类型都可以分配给unknown,但unknown只能够分配给unknown或any

let a: unknown = 'hello world'

a = 1024

let b: string = a
// let b: string
// 不能将类型“unknown”分配给类型“string”

# tuple

表示是一个元组。已知元素数量和类型的数组

let cat: [string, number] = ['喵', 2]

cat[1] = 3

# enum

表示是一个枚举。定义数值集合

enum Vip {vip, svip, wip}

# void

表示一个函数没有返回值

let fun: () => void = () => {}

function myName(name: string): void {
  console.log(name)
}

# never

表示一个不存在的值的类型

function error(message: string): never {
  throw new Error(message)
}

# 联合类型

将变量设置多种类型

let flag: boolean | string = true
flag = 'true'

let arr: (string | number)[] = [1, 'a', 3. 'd']
let arr2: Array<string | number> = ['a', 2, 'c', 4]

let obj: {
  a: number | boolean
} = {
  a: 1
}
obj.a = true

联合类型只能够访问联合类型下相同的方法

let flag: boolean | string

flaga.valueOf()
flaga.length
// 类型“string | boolean”上不存在属性“length”。
//  类型“false”上不存在属性“length”

# 类型断言

指定一个联合类型当前的类型

let flag: boolean | string

if (!flaga) {
  flaga = 'true'
}

(<string>flaga).length
// or
(flaga as string).length

对于可选对象的断言

let cat: {
  readonly name: string
  age: number
  like?: {
    food?: string
  }
} = {
  name: 'jack',
  age: 2
}

if (!cat.like?.food) {
  cat.like = { food: 'fish' }
}

console.log(cat.like!.food);

# 接口和类型别名

当类型过长不但影响阅读而且不利于重复使用,通过接口和类型别名可以更好组织类型

interface Cat { // 通常使用大驼峰表示类型声明
  readonly name: string
  age: number
  like?: string
  eat?: (food: string) => void
}

let cat: Cat = {
  name: 'jack',
  age: 2,
  eat(food) {
    console.log(`${this.name} eat ${food}`)
  }
}

type Method = 'get' | 'post' | 'put' | 'delete'
type Test = boolean | string | number | Cat | Cat[]

# 模块

通过模块可以将多个文件中的类型进声明行集中管理。一般类型声明会放在 @typestypes 文件夹下的 *.d.ts

修改代码文件夹结构如下

|-- src
  |-- index.ts
  |-- ...
|-- types
  |-- index.d.ts
  |-- ...

同 ES6 的模块,使用 export 导出类型声明

// types -> index.d.ts
export interface Cat {
  readonly name: string
  age: number
  like?: string
  eat?: (food: string) => void
}

使用 import 导入类型声明

// src -> index.js
import { Cat } from '../types/index.js'

let cat: Cat = {
  name: 'jack',
  age: 2,
  eat(food) {
    console.log(`${this.name} eat ${food}`)
  }
}

TIP

可以将鼠标至类型名上,按住 ctrl 点击,可以跳转到类型定义

至此就可以开始尝试将 js 代码迁移到 ts 了

TypeScript 进阶

TypeScript 进阶

这是一个简单的进阶,带你快速了解如何优化 TypeScript 类型开发

小米5 PixelExperience 体验

小米5 PixelExperience 体验

突然发现 PixelExperience 这个 ROM 包,花了些时间刷机体验下,用起来比 MIUI 好很多 漂亮、流畅、没有注入广告。最重要的就是可以最大幅度的体验安卓原生的系统