typescript使用手册

安装依赖

yarn add typescript -dev

使用

yarn tsc xxx.ts

生成配置文件tsconfig.json

yarn tsc --init

原始数据类型

const a: string = 'foobar'

const b: number = 100 // NaN Infinity

const c: boolean = true // false

// 在非严格模式（strictNullChecks）下，
// string, number, boolean 都可以为空
// const d: string = null
// const d: number = null
// const d: boolean = null

const e: void = undefined

const f: null = null

const g: undefined = undefined

// Symbol 是 ES2015 标准中定义的成员，
// 使用它的前提是必须确保有对应的 ES2015 标准库引用
// 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015
const h: symbol = Symbol()

配置文件中需要再lib中加上对应的库

 "lib": ["ES2015", "DOM"], // DOM解决bom和dom的库引用  

在使用的过程中可能会出现命名重复的问题。在每个js文件中加一个export {}

对象类型

// Object 类型
export {} // 确保跟其它示例没有成员冲突
// object 类型是指除了原始类型以外的其它类型
const foo: object = function () {} // [] // {}
// 如果需要明确限制对象类型，则应该使用这种类型对象字面量的语法，或者是「接口」
const obj: { foo: number, bar: string } = { foo: 123, bar: 'string' }

数组类型

// 数组类型
export {} // 确保跟其它示例没有成员冲突
// 数组类型的两种表示方式
const arr1: Array = [1, 2, 3]
const arr2: number[] = [1, 2, 3]
// 案例 -----------------------
// 如果是 JS，需要判断是不是每个成员都是数字
// 使用 TS，类型有保障，不用添加类型判断
function sum (...args: number[]) {
  return args.reduce((prev, current) => prev + current, 0)
}
sum(1, 2, 3) // => 6

元组

const tuple: [number, string] = [18, 'zce']
// const age = tuple[0]
// const name = tuple[1]
const [age, name] = tuple
// ---------------------
const entries: [string, number][] = Object.entries({
  foo: 123,
  bar: 456
})
const [key, value] = entries[0]
// key => foo, value => 123

枚举

// 一定声明为常量，避免生成的代码里还有对应的枚举声明
const enum PostStatus {
  Draft,
  Unpublished,
  Published
}
const post = {
  title: 'Hello TypeScript',
  content: 'TypeScript is a typed superset of JavaScript.',
  status: PostStatus.Draft // 3 // 1 // 0
}

函数

function func1 (a: number, b: number = 10, ...rest: number[]): string {
  return 'func1'
}
func1(100, 200)
func1(100)
func1(100, 200, 300)
// -----------------------------------------
const func2: (a: number, b: number) => string = function (a: number, b: number): string {
  return 'func2'
}

类型断言

// 假定这个 nums 来自一个明确的接口
const nums = [110, 120, 119, 112]
const res = nums.find(i => i > 0)
// const square = res * res
const num1 = res as number
const num2 = <number>res // JSX 下不能使用

接口

interface Post {
  title: string
  content: string
  subtitle?: string
  readonly summary: string // 只读属性，第一次声明后不可修改
}
const hello: Post = {
  title: 'Hello TypeScript',
  content: 'A javascript superset',
  summary: 'A javascript'
}
// hello.summary = 'other'
// ----------------------------------
interface Cache {
  [prop: string]: string // 可动态添加属性
}
const cache: Cache = {}
cache.foo = 'value1'
cache.bar = 'value2'

类

class Person {
  public name: string // = 'init name'
  private age: number // 外部不能直接访问
  protected readonly gender: boolean // 子类可以访问, 设置readonly只读属性后，
  
  constructor (name: string, age: number) {
    this.name = name
    this.age = age
    this.gender = true
  }

  sayHi (msg: string): void {
    console.log(`I am ${this.name}, ${msg}`)
    console.log(this.age)
  }
}

class Student extends Person {
  // 构造函数私有化后外部不能直接实例化，需要实例化时需要类提供对应的静态的实例化方法。
  private constructor (name: string, age: number) { 
      super(name, age)
    console.log(this.gender)
  }

  static create (name: string, age: number) {
    return new Student(name, age)
  }
}

const tom = new Person('tom', 18)
console.log(tom.name)
// console.log(tom.age)
// console.log(tom.gender)
// 调用类提供的实例化方法创建实例对象
const jack = Student.create('jack', 18)

类和接口

interface 声明接口 implements 去实现

interface Eat {
  eat (food: string): void
}
interface Run {
  run (distance: number): void
}
class Person implements Eat, Run {
  eat (food: string): void {
    console.log(`优雅的进餐: ${food}`)
  }
  run (distance: number) {
    console.log(`直立行走: ${distance}`)
  }
}
class Animal implements Eat, Run {
  eat (food: string): void {
    console.log(`呼噜呼噜的吃: ${food}`)
  }
  run (distance: number) {
    console.log(`爬行: ${distance}`)
  }
}

抽象类

abstract 声明一个抽象类或者方法，子类去具体实现对应的方法即可

abstract class Animal {
  eat (food: string): void {
    console.log(`呼噜呼噜的吃: ${food}`)
  }
  // 声明一个抽象方法
  abstract run (distance: number): void
}
class Dog extends Animal {
  // 实现抽象方法
  run(distance: number): void {
    console.log('四脚爬行', distance)
  }
}
const d = new Dog()
d.eat('嗯西马')
d.run(100)

泛型

function creatArr (length: number, content: number):number[] {
  return Array(length).fill(content)
}
// 使用泛型
function createArray<T> (length: number, value: T): T[] {
  const arr = Array<T>(length).fill(value)
  return arr
}
// 实际使用时再给出对应的类型
createArray<string>(3, '123')
createArray<number>(3, 123)

类型声明

解决在定义时没有声明类型的时候，我们在使用时先看有没有对应的声明模块，如"@types/lodash"，没有时使用declare 自己去声明

import { camelCase } from 'lodash'
import qs from 'query-string'
qs.parse('?key=value&key2=value2')
// 类型声明
// declare function camelCase (input: string): string
const res = camelCase('hello typed')