TypeScript

• 基于javascript编程之上的语言
• javascript 的超集 / 扩展集
• javascript + 类型系统 + (ES6+)
• 支持ES新特性
• 最终会被编译为javascript，任何一种 javascript 运行环境都支持
• 兼容低版本
• typescript本身就是npm模块，需要安装
  

安装

yarn add typescript --dev

相关命令

yarn tsc --locale zh-CN
修改控制台中的错误消息为中文

配置文件

可以使用命令来创建配置文件 tsconfig.json

yarn tsc --init

• target ：编译后的ES标准版本
• lib ：需要使用的标准库
• module ：输出的代码会使用什么方式来进行模块化
• outDir ：文件编译后存放的目录
• rootDir ：源文件存放的目录
• sourceMap ：开启源代码映射，方便调试代码
• …

类型

• 具有隐式类型推断的能力。
• 在不明确类型的情况下，TS会根据变量的赋值，推断该变量的类型
• 如果在声明该变量时没有赋值，则该变量的类型为任意（any）

原始类型

• 与flow不同的是，在非严格模式下（可在配置文件中设置），string、number、boolean类型可以被赋值 null 和 undifined

const str: string = "Linda"
const num: number = 199 // NaN Infinity
const flag: boolean = false // true

const v: void = undefined
const n: null = null
const u: undefined = undefined

object 类型

• 泛指对象、数组、函数类型
• 单指对象类型，可用 {}

// object类型泛指 数组、对象、函数
const arr: object = []
const obj: object = {}
const fun: object = function () { }

// 单指对象
const singleObj: {} = {}

array 类型

• 使用 Array<泛型> 声明数组
• 使用 基本类型[] 声明数组

const array1: Array<number> = [1, 2, 4, 6, 3, 5]
const array2: number[] = [1, 2, 4, 6, 3, 5]

枚举类型

• 使用关键词 enum 声明枚举变量

enum status {
    waiting = 0,
    success = 1,
    fail = 2
}

// 使用
console.log( status.success ) // 1

• 常量枚举 和 静态枚举

// 动态枚举，在编译后，枚举的 键和值 会做双向指向
enum status {
    waiting = 0,
    success = 1,
    fail = 2
}

// 编译后
var status;
(function (status) {
    status[status["waiting"] = 0] = "waiting";
    status[status["success"] = 1] = "success";
    status[status["fail"] = 2] = "fail";
})(status || (status = {}));

console.log(status.success);

// 静态枚举，编译后，会将原有值替换为对应的 枚举值
const enum status {
    waiting = 0,
    success = 1,
    fail = 2
}

// 编译后
console.log(1 /* success */);

any类型

• 声明为 any类型的 变量，可以接受任何值
• 编译时，也不会去检查其类型

类型断言

• 在声明变量时没有明确类型，但开发者可以肯定该值为某个特定类型时，此时可以使用断言
• 使用 as 关键词
• 使用 <类型>

const array = [1, 2, 3, 4, 5, 6, 7]
const num1 = array[2] as number
const num2 = <number>array[3]

类

• 描述一类具体事物的抽象特征

常规使用

class Person {
    // 成员要么初始化值，要么在构造函数中赋值
    name: string
    age: number
    isStudent: boolean = false
    
    constructor(name: string, age: number, isStudent: boolean) {
        this.name = name
        this.age = age
        this.isStudent = isStudent
    }
    
    say(msg: string): void {
        console.log(`Hi, I'm ${this.name}, ${msg}`)
    }
}

访问修饰符

• 访问修饰符，作用是划分访问级别
• private 私有，只能在类中访问
• public 公有（默认），都允许访问
• protected 受保护的，类中可访问，继承后的子类中可访问，类外不能访问

// 父类
class Person {
    // 成员要么初始化值，要么在构造函数中赋值
    public name: string // 公有属性
    age: number
    isStudent: boolean = false
    private isOld: boolean = false // 私有属性
    protected gender: boolean
    constructor(name: string, age: number, isStudent: boolean) {
        this.name = name
        this.age = age
        this.isStudent = isStudent
        this.gender = true
    }
    say(msg: string): void {
        console.log(`Hi, I'm ${this.name}, ${msg}`)
        console.log(this.isOld)
    }
}
// 子类
class Student extends Person {
    constructor(name: string, age: number) {
        super(name, age, false)
        console.log(this.isStudent) // 可以访问父类的 protected 属性
        console.log(this.age) // 可以访问父类的 public 属性
        console.log(this.isOld) // 不允许访问父类的 private 属性
    }
}
const person = new Person("Linda", 19, true)
console.log(person.isOld) // 报错，函数外无法访问 private 属性
console.log(this.isStudent) // 不允许访问类的 protected 属性

接口

• 约束对象中的结构，对变量进行类型声明时，必须按照接口中的结构实现
• 一个对象实现接口，必须拥有这个接口中的所约束的所有成员
• 使用 interface 关键词来声明
• 使用 ? 来指明接口中的成员非必须
• 使用 readonly 关键词 来声明接口中的成员拥有只读属性
• 在编译后，会被清除

// 约束对象的结构
interface Person {
    name: string
    age: number
    alias?: string //该成员非必须实现
}
function say(person: Person) {
    console.log(`person's name:${person.name}`)
    console.log(`person's age:${person.age}`)
}

// 实现接口中所有的属性
say({
    name: "Linda",
    age: 33
})

• 动态成员
• 在运行中会出现动态键值，可使用接口方式来规定成员

interface Post {
    [key: string]: number
}

const cash: Post = {}
cash["status"] = 1
cash["id"] = 123234

抽象类

• 使用 abstract 关键词声明
• 抽象类只能继承，不能new

/** 抽象类 */
abstract class Animal {
    eat(food: string): void {
        console.log(`大口大口吃：${food}`)
    }
    // 抽象方法，继承的子类必须实现该方法
    abstract run(action: string): void
}
class Dog extends Animal {
    run(actions: string) {
        console.log("dog is running")
    }
}
// 继承的类，既有抽象类的方法，也有自己的方法
const dog = new Dog()
dog.eat("啊呜啊呜")
dog.run("hahah")

泛型

• 在定义时无法明确其类型，在使用时，根据不同的情况，可能会出现不同的类型。此时可以使用泛型 T

const fillArray = function <T>(len: number, value: T): T[] {
    const array = Array<T>(len).fill(value)
    return array
}
console.log(fillArray(5, "abc")) // [ 'abc', 'abc', 'abc', 'abc', 'abc' ]
console.log(fillArray(5, 33)) // [ 33, 33, 33, 33, 33 ]