关于typescript:TypeScript122

typescript 是 jiavascript 的超集这里记录一些简略的用法，如深刻档次的请查看官网。
typescript 官网

typescript 是属于渐进式的，如果对有的语法不太熟，也没关系，咱们能够齐全依照 javascript 的语法编写代码。

原始数据类型

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()

// Promise

// const error: string = 100

作用域问题：默认文件中的成员会作为全局成员，多个文件中有雷同成员就会呈现抵触。

解决办法 1: IIFE 提供独立作用域
(function () {
const a = 123
})()
解决办法 2: 在以后文件应用 export，也就是把以后文件变成一个模块
模块有独自的作用域
const a = 123

export {}

前面记录都是默认模块导出，有模块作用域。

Object 类型

object 类型是指除了原始类型以外的其它类型
const foo: object = function () {} // [] // {}

如果须要明确限度对象类型，则应该应用这种类型对象字面量的语法，或者是「接口」

const obj: {foo: number, bar: string} = {foo: 123, bar: 'string'}

数组类型

数组类型的两种示意形式

const arr1: Array<number> = [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

元组

咱们晓得数组中元素的数据类型都个别是雷同的（any[] 类型的数组能够不同），如果存储的元素数据类型不同，则须要应用元组。

元组中容许存储不同类型的元素，元组能够作为参数传递给函数。

const tuple: [number, string] = [18, 'zce']
const [age, name] = tuple

const entries: [string, number][] = Object.entries({
  foo: 123,
  bar: 456
})

const [key, value] = entries[0]

枚举（Enum）

规范的数字枚举

enum PostStatus {
  Draft = 0,
  Unpublished = 1,
  Published = 2
}

数字枚举，枚举值主动基于前一个值自增
enum PostStatus {
  Draft = 6,
  Unpublished, // => 7
  Published // => 8
}

字符串枚举
enum PostStatus {
  Draft = 'aaa',
  Unpublished = 'bbb',
  Published = 'ccc'
}
// 常量枚举，不会侵入编译后果
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'}

const func2: (a: number, b: number) => string = function (a: number, b: number): string {return 'func2'}

任意类型（弱类型）

function stringify (value: any) {return JSON.stringify(value)
}
let foo: any = 'string'

any 类型是不平安的

接口

任意值对象在代码里

interface Post {
  title: string
  content: string
}

function printPost (post: Post) {console.log(post.title)
  console.log(post.content)
}

printPost({
  title: 'Hello TypeScript',
  content: 'A javascript superset'
})

interface Post {
  title: string
  content: string
  subtitle?: string// 可选
  readonly summary: string// 只读
}

const hello: Post = {
  title: 'Hello TypeScript',
  content: 'A javascript superset',
  summary: 'A javascript'
}

interface Cache {[prop: string]: string
}
// 定义对象属性名是字符串，值也是字符串

const cache: Cache = {}

cache.foo = 'value1'
cache.bar = 'value2'

class

class Person {
  name: string // = 'init name'
  age: number
  
  constructor (name: string, age: number) {
    this.name = name
    this.age = age
  }

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


class Person {
  public name: string // = 'init name'
  private age: number // 公有 当成员被标记为 private 时，它就不能在申明它的类的内部拜访
  protected gender: boolean //protected 和 private 相似，然而，protected 成员在派生类中能够拜访
  
  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 {
 // 只读成员
  protected readonly gender: boolean
  private constructor (name: string, age: number) {super(name, age)
    this.gender = true;// 必须初始赋值
    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 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 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 createNumberArray (length: number, value: number): number[] {const arr = Array<number>(length).fill(value)
  return arr
}

function createStringArray (length: number, value: string): string[] {const arr = Array<string>(length).fill(value)
  return arr
}

function createArray<T> (length: number, value: T): T[] {const arr = Array<T>(length).fill(value)
  return arr
}

// const res = createNumberArray(3, 100)
// res => [100, 100, 100]

const res = createArray<string>(3, 'foo')

有的库默认没有 typescript 反对，须要下载对应反对库。
如 lodash, 须要装置 @types/lodash。

tsconfig.json 文件配置详情查看：typescript 官网配置阐明