学习 TypeScript

TypeScript 简称 TS

是 JavaScript 的具有类型系统的超集。

TS 代码可以编译为 JS 代码。

本文简单的讲解 TS 的一些基础内容。

var message: string = "Hello World"
var quantity: number = 12
var isEmpty: boolean = false
console.log(message)

安装

通过使用 包管理工具 安装 TypeScript 即可。

在项目目录下执行 tsc --init 就能初始化一个 TS 配置文件 tsconfig.json。

可以通过去更改该配置文件来起到相关的功能应用。

类型

TS 是具有类型的。

const message: string = "这是一条信息"
const messageLength: number = message.length

可以看到在变量名的后面跟随了该变量的类型。一般来说，除了复合类型，比如说数组以及对象这样的。是不需要手动指定类型的。 TS 会自动推导类型。

const array = [] // 这种情况就不行，TS 会推断 array 为 any[] 类型 就是啥都可以放的
const strings: string[] = [] // 这个数组只能存放字符串
const strAndNum: Array<string | number> = [] // 这个数组可以存放 字符串 或 数字类型
const strAndNum2: string[] | number[] = [] // 这个数组只能是纯字符串数组或纯数字数组
const strAndNum3: [string, number, string] = ["",0,""] // 这种情况下会限制数组内容必须和指定类型一致，且顺序也需要一致

泛型

泛型是非常常用的。

使用泛型可以使组件更加容易复用。

function returnData <Data = number>(data:Data): Data {
    // handling data...
    return data
}

returnData<string>("") // good
returnData<string>(0) // bad

上面的例子清晰的表示了泛型的作用。

接口

简单来说就是用于规定一个对象的形式。

interface Example<Value = string> {
    key: string
    value: Value
}

const obj: Example<number> = {
    key: "key",
    value: 12
}

有些时候有些属性是可选的。

interface Example<Value = number> {
    key: string
    // 在冒号前增加一个 ？ 号就可以表示此属性可选
    value?: Value
}

const obj: Example<string> = {
    key: string
}

函数接口

interface FuntionInterfaceExample<Params = number, Result = void> {
    (params1: Params, params2?: Params): Result
}

const example: FunctionInterfaceExample<number,number> = (params1, params2) => params1 + params2

可索引接口

// 数字索引 数组
interface NumberIndexInterface {
    [index: number]: string
}
// 字符串索引接口 对象
interface StringIndexInterface {
    [index: string]: string
}
// 复合索引接口
interface IndexInterface {
    [index: string | number | sybmol]: string
}

接口继承

interface Father {
    father: string
}
interface Mother {
    mother: string
}
// Child 会同时包含 child 和 father， mother 属性
// 如果继承多个接口，以逗号分割
interface Child extends Father, Mother{
    child: number
}

类

// 抽象类 只有类的实现标准而无具体实现
abstract class AbstractClass {
    // 私有属性 无法在子类和外部访问
    private classPrivateAttribute: string
    // 保护属性 只能在内部和子类访问
    protected classProtectedAttribute: string
    // 公共属性 可以在任何地方访问
    public classPublicAttribute: string
    // 静态方法 无需实例化即可调用
    // 无返回值
    static StaticMethods(): void
    // 抽象方法 返回值 number
    asbtract RunMethods(): number
}

// 实现抽象类
class ExampleClass extends AbstractClass {
    // ...
}

// 类的继承
class Father {
    constructor() {
        // ...
    }
}

class Child extends Father {
    constructor () {
        super() // 执行父类的构造函数
    }
}

命名空间

用于区分变量方法等。

简单来讲就是有两个张三，直接叫张三的时候两个都会被叫到。

但是他俩一个在甲公司，另一个在乙公司。

所以叫甲公司的张三，乙公司的张三这样就会叫到准确的那个张三。

甲乙公司就是他俩的命名空间。

namespace N1 {
    function say () {
        console.log("say1")
    }
}
namespace N2 {
    function say () {
        console.log("say2")
    }
}

模块

一个项目中的代码肯定不会少。但是全部堆在一个文件内是不可能的。一份文件几千上万行代码。这会给维护带来很大的损耗。

因此需要拆分代码为相应的模块。

TS 支持 ES6 模块 export 和 import 语法。