TypeScript学习1-简介

弱类型的短板

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

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

目前的做法

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

存在的问题

• 第三方库，文档一般都是维护较好的，要多花很多时间去读文档。
• 内部库，如果文档维护不好，可能会出现更新不及时；没有文档就要读代码了，很浪费时间，也容易出错，影响开发质量和进度。

什么是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
  })
}

对比下来，感受很明显：

• TypeScript参数和返回值类型明确，调用时不会用错
• TypeScript中的数据结构也是明确的，不需要查文档也能确定如何使用

TypeScript让代码描述自身

IDE

• VSCode对TypeScript支持也很友好，能达到强类型语言，如Java的语法提示体验。