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

2024年2月4日 212次阅读 来源: xie_zhichao

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

对比下来，感受很明显：

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

TypeScript让代码描述自身

IDE

  • VSCode对TypeScript支持也很友好，能达到强类型语言，如Java的语法提示体验。
    原文作者：xie_zhichao
    原文地址: https://segmentfault.com/a/1190000019719669
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞