TypeScript

1. Object

• 如果需要明确限制对象类型，则需要使用这种类型对象字面量的语法，或者是[接口]

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

2. array

• 数组类型有两种表示方式

  const arr1: Array<number> = [1, 3, 5]
  const arr2: number[] = [1, 4, 5]
  

3. Tuple(元组类型)

4. Enum(枚举)

// 字符串枚举
enum PostStatus {
    Draft: 'aaa',
    Unpublished: 'bbb',
    Published: 'ccc'
}

// 常量枚举，不会侵入编译结果(数字枚举，枚举值自动基于前一个值自增)
const enum PostStatus {
	Draft,
    Unpublished,
    Published
}

5. function(函数类型)

function fun1(a: number, b: number = 10, ...rest: number[]) {
    return 'func1'
}

6. any(任意类型)

let foo: any = 'string'

7. 类型断言

// 假定这个 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 下不能使用

8. interface(接口)

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'
})

9. interface-more(可选成员、只读成员、动态成员)

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'

10. class(类)

class Person {
    name: string
    age: number
    
    construcor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    sayHi(msg: string): void {
		console.log(`I'm ${this.name}, ${msg}`)
    }
}

11. modifiers(类的访问修饰符)

class Person {
	public name: string // 公共的
    private age: number // 私有的（只有本类可以访问）
    protected gender: boolean // 受保护的，子类也可以访问
    
    constructor (name: string, age: number) {
		this.name = name
        this.age = age
        this.gender = gender
    }
    
    sayHi(msg: string) {
        console.log(`I am ${this.name}, ${msg}`)
        console.log(this.age)
    }
}

class Students extends Person {
	private constructor (name: string, age: number) {
        super(name, age) // super需要放到this前面
        console.log(this.gender)
    }
    
    static create (name: string, age: number) {
        return new Students(name, age)
    }
}
const tom = new Person('tom', 18)
const jack = Student.create('jack', 18)

12. assertion(类型断言)

• 告诉系统这个肯定是某个类型

// 假定这个 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 下不能使用

13. class-readonly(类的只读成员)

class Person {
  public name: string // = 'init name'
  private age: number
  // 只读成员
  protected readonly gender: boolean
  
  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)
  }
}

const tom = new Person('tom', 18)
console.log(tom.name)
// tom.gender = false

14. class and interface(类与接口)

interface Eat {
	eat (food: string): void
}
interface Run {
    fun (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}`)
    }
}

15. abstract class(抽象类)

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)

16. generics(泛型)

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)
}
function createArray<T> (length: number, value: T): T[] {
    const arr = Array<T>(length).fill(value)
    return arr
}
const res = createArray<string>(3, 'foo')

17. 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')