TypeScript学习1-背景和简单介绍

dz00

2019-11-09

关注关注

TypeScript出现的背景

前端项目趋向工程化之后，模块化开发模式开始成为主流：

公用的逻辑和UI都被抽出来，独立成模块，供外部调用。在调用这些模块时，就会面临着沟通问题，我们要知道如何去调用，参数是什么，返回值是什么，它们的类型和结构？

传统的做法

第三方库，如JQuery，你想通过看源文件来查看如何调用，难度很大，一般都是压缩混淆过的。只能访问技术文档网站，查API文档。
内部的库，有写文档最好，可以读文档。没有写文档的，只能去读源代码，或当面去问。

存在的问题

第三方库，文档一般都是维护较好的，多花一点时间去读文档就ok了
内部库，如果文档维护不好，可能会出现用法不对，出现问题，影响开发质量和进度

什么是TypeScript

TypeScript是JavaScript的超集，在它的基础上设计了一套新语法，提供了静态类型，高级数据类型等语言特性。但最终还是编译成JavaScript执行。

TypeScript的强类型等语法检查和编译都是在编译时实现的，运行时还是JavaScript。

静态类型

静态类型是TypeScript的核心特性。
先通过示例来看看JavaScript和TypeScript的对比。

// JavaScript
export function formatA(var1) {
    let ret;
    if(typeof var1 === 'string') {
        ret = '[log]' + var1;
    } else {
        throw new Error('param must be a string!');
    }
    
    return ret;
}

// TypeScript
export function formatA(var1: string): string {
    let ret: string = '[log]' + var1;
    return ret;
}

更复杂一点的例子

// JavaScript
export const fetch = function (url, params, user) {
  // dosomething

  return http(options).then(data => {
    return data
  }).catch(err => {
    return err
  })
}

// TypeScript

export interface User {
    userid: number,
    username: string,
    userTags?: Array<string>
}

export const fetch = function (url: string | object, params?: any, user?: User): Promise<object | Error> {
  // dosomething

  return http(options).then(data => {
    return data
  }).catch(err => {
    return err
  })
}

对比下来，感受很明显：