资讯专栏INFORMATION COLUMN

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

dailybird / 3501人阅读

摘要:出现的背景前端项目趋向工程化之后,模块化开发模式开始成为主流公用的逻辑和都被抽出来,独立成模块,供外部调用。的强类型等语法检查和编译都是在编译时实现的,运行时还是。静态类型静态类型是的核心特性。先通过示例来看看和的对比。

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
}

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

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

对比下来,感受很明显:

TypeScript参数和返回值类型明确,调用时不会用错

TypeScript中的数据结构也是明确的,不需要查文档也能确定如何使用

TypeScript让代码描述自身

IDE

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105502.html

相关文章

  • SegmentFault 技术周刊 Vol.40 - 2018,来学习一门新的编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    caspar 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习一门新的编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    nihao 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习一门新的编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    Drummor 评论0 收藏0
  • 前端每周清单半年盘点之 JavaScript 篇

    摘要:前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。背后的故事本文是对于年之间世界发生的大事件的详细介绍,阐述了从提出到角力到流产的前世今生。 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎...

    Vixb 评论0 收藏0
  • 2019年前端趋势分析

    摘要:据状态调查显示,只有的前端开发人员使用过,但是有惊人的的开发人员已经听说过它并希望使用它。事实上,在调查中,的评分高于本身,为,而最受喜爱的语言为。在年,的下载数量大幅增长,而保持不变。 2018年TypeScript 全面开花,GraphQL 蠢蠢欲动,WebAssembly 更是打开了浏览器上多语言的大门。所有这一切跟现在的前端有哪些关系呢?下面小编来分享一下 1.三大框架标准化 ...

    Anonymous1 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<