前言

在学习TypeScript过程中,我也是遇到了很多的阻力,因为并未有太多深入挖掘的场景,之前做IONIC的时候,也只是用TS,现如今,这一个系列也是记录自己学习和收获,同时希望自己的这系列教程对想要学习TypeScript的同学有一定的帮助,我尽量以简洁的语言以及代码来将我的东西阐述清楚。

如果,在文章中有错误和疏漏,希望大家多多指出和包涵,大家可以通过邮箱来联系我:869345843@qq.com

什么是TypeScript

关于TypeScript有一种很有趣的说法,说TypeScript = Typed + JavaScript,仔细想来,确切的说TypeScript应该是对JavaScript的扩展 + 类型系统,所以这个公式应该是Typed + JavaScript + Extends

而官方文档也说明了一件事情,那就是TypeScript是JavaScript的超集,为了让我们可以无缝从JavaScript切换到TypeScript,微软的TypeScript只是提供了TypeScript到JavaScript的编译,并不包含运行时,它的运行时也就是JavaScript的运行时,所以TypeScript可以说是一种JavaScript的新的编码实现。

TypeScript和JavaScript的类型

先让我们来看一下JavaScript的基本类型系统:Boolean、Null、Undefined、String、Number,以及ES6之后,新增的Symbol类型。

TypeScript有哪些类型呢?下面让我们来看一下TypeScript的基本类型:Boolean、Null、Undefined、String、Number、Symbol + TypeScript扩展的类型。

上方TypeScript的基本类型正是JavaScript的基础类型 + 自行扩展的类型系统。

TypeScript对于JavaScript的扩展类型借鉴了强类型语言的类型系统,有Void、Never、泛型等以及高阶类型。

TypeScript的表达形式

明确了TypeScript和JavaScript类型方面的差异化,我们来看看如何将JavaScript改写成为TypeScript呢?

先上一段JavaScript代码:

  1. let str = 'Hello JavaScript'
  2. let num = 10
  3. let arr = [1, 2, 3]
  4. const htmlStr = `${str}_${num}_${arr.join()}`
  5.  
  6. document.querySelectorAll('.app')[0].innerHTML = str

对于上述一段代码,如果运行在TypeScript环境下,也是可以正常运行,因为TypeScript是JavaScript的超集,兼容这种写法。

那么,上面的代码,对应TypeScript又是如何的呢?下面我们用代码描述:

  1. let str: string = 'Hello JavaScript'
  2. let num: number = 10
  3. let arr[] = [1, 2, 3] //Array<number>
  4. const htmlStr = `${str}_${num}_${arr.join()}`
  5.  
  6. document.querySelectorAll('.app')[0].innerHTML = str

由此可见,TypeScript是更规范化的将变量类型声明化,他的格式如下:

  1. let variable: Type = value

TypeScript中的数据类型

说道TypeScript的数据类型,我们就可以用一段代码来展示:

  1. // 原始类型
  2. let bool: boolean = true
  3. let num: number = 13
  4. let str: string = 'abc'
  5.  
  6. // 数组
  7. let arr1: number[] = [1, 2, 3]
  8. let arr2: Array<number> = [1, 2, 3]
  9. let arr3: Array<number | string> = [1, '2']
  10.  
  11. // 元组
  12. let tuple: [number, string] = [0, '2'] // 特殊数组,限定数组元组类型和个数
  13. tuple.push(2) // [0 , '2', 2]
  14. // tuple[2] //不允许越界访问
  15.  
  16. // 函数
  17. let add = (x: number, y: number): number => x + y
  18. let func: (x: number, y: number) => number
  19. func = (a, b) => a + b
  20.  
  21. //对象
  22. let obj: object = { x: 1, y: 2 }
  23. // obj.x = 100 // wrong
  24. let obj2: { x:number, y:number } = { x: 1, y: 2 }
  25. obj2.x = 100
  26.  
  27. //void
  28. let noReturn = () => {}
  29. void 0 === undefined
  30.  
  31. // any
  32. let x // 可以任意赋值
  33.  
  34. // never 永远不会有返回值
  35. let error = () => {
  36. throw new Error()
  37. }
  38.  
  39. // 枚举
  40. enum Role { // 数字 或者声明字符串
  41. Teacher, // 默认0开始以下依次+1
  42. Student, // 1
  43. }

TypeScript的类型推断

当然,我们在书写代码的过程中,如果忘记加类型,写出纯JavaScript代码,那么TypeScript也会通过类型推断,帮助我们推断出大部分类型。

比如我们最初的JavaScript代码,类型推断依照代码做出如下说明:

  1. let str = 'Hello JavaScript'
  2. str = 100 // error因为赋值操作,已经将str推断为string类型,这样赋值在TypeScript会报错
  3.  
  4. let num = 10
  5. num = 'some string' // error,此时num已经推断为number类型,不可以将string类型赋值给它
  6.  
  7. let arr = [1, 2, 3]
  8. arr = true // error, 类型推断为数组类型Array<number>,不能赋值Boolen
  9. arr = ['1', '2', '3'] // error,类型推断为Array<number>,不能赋值为Array<string>类型
  10.  
  11. const htmlStr = `${str}_${num}_${arr.join()}`
  12.  
  13. document.querySelectorAll('.app')[0].innerHTML = str

为什么要有类型

由上面代码可以知道,TypeScript对代码进行了比较严格的类型判断,那么我们肯定想问,为什么要这样做?

其实,这样做最大的好处,就可以让代码简单的文档化,并且规范我们的代码操作,避免一些不必要的边界值问题,这对于开发大型应用和写测试用例都有极大的帮助。

而TypeScript却也并未限制我们编码的自由,就像是骑马,如果单纯用JavaScript书写代码,就好像是没有缰绳的骑马,会让我们陷入到危险和抓狂之中,但是有了TypeScript,我们就相当于是有了缰绳,可以使得我们的代码更优雅,也更容易控制和理解。

总结

本篇文章探讨了TypeScript和JavaScript中的类型系统,以及在TypeScript中如何处理类型声明和赋值。同时也暴露了一些灵活性的问题,比如不能将一个字符串数组赋值给数字数组。所以我们如果单一的想要定义一个多类型的数组就会遇到麻烦,但这些不是问题,TypeScript中也存在着解决方案。

在下一篇,我们将会看看TypeScript是如何处理这些要求,以及如何给予相应的类型限制和定义的。

参考资料:

TypeScript手册:TypeScript

极客时间TypeScript开发实战专栏:TypeScript开发实战

参考书:TypeScript实战指南

参考书:Leaning TypeScript中文版(这本书讲解的TypeScript的版本为1.5+,不是最新版本,如果买书,不建议买,可以购买上本参考书TypeScript实战指南)

我的个人博客:http://www.gaoyunjiao.fun/?p=114

深入浅出TypeScript(1)的更多相关文章

  1. 深入浅出TypeScript(2)- 用TypeScript创建web项目

    前言 在第一篇中,我们简单介绍了TypeScript的一些简单语法,那么如果我们只是简单使用TypeScript开发一个web项目,应该做哪些准备?接下来我们就结合TypeScript和Webpack ...

  2. 深入浅出TypeScript(3)- 函数重载和泛型

    面向对象特性中,最根本的就是面向对象的三大基本特征:封装.继承.多态.同时,TypeScript中也存在多态的使用,比如函数重载,今天我们先看一下函数重载以及泛型的概念. 什么是函数重载 简单来说,函 ...

  3. 深入浅出TypeScript(4)- 使用接口和类型别名

    在TypeScript中,为了可以约束对象定义,提供了两个新的特性,接口和类型别名. TypeScript中的接口 在强类型语言中,都有接口的概念,那么TypeScript中的接口是如何使用的呢? 接 ...

  4. 深入浅出TypeScript(5)- 在React项目中使用TypeScript

    前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...

  5. 深入浅出 Typescript 学习笔记

    TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计目标是开发大型应 ...

  6. 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1

    [ASP.NET Core]EF Core - “影子属性”   有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...

  7. NodeJs中require use get typescript及其他知识点集合

    NodeJs的Express使用 nodejs事件的监听与事件的触发 TypeScript学习笔记 深入浅出Node.js Nodejs开发Office插件 类百度文库文档上传.转换和展示功能项目开源 ...

  8. 深入浅出 Webpack

    深入浅出 Webpack 评价 Webpack 凭借强大的功能与良好的使用体验,已经成为目前最流行,社区最活跃的打包工具,是现代 Web 开发必须掌握的技能之一.作者结合自身的实战经验,介绍了 Web ...

  9. JavaScript深入浅出第4课:V8引擎是如何工作的?

    摘要: 性能彪悍的V8引擎. <JavaScript深入浅出>系列: JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼? JavaScript深入浅出第2课:函数是一等 ...

随机推荐

  1. Redis持久化背后的故事

    Redis持久化 Redis提供了不同的持久化选项: RDB持久化以指定的时间间隔保存那个时间点的数据快照. AOF持久化方法则会记录每一个服务器收到的写操作.在服务器启动时,这些记录的操作会逐条执行 ...

  2. React躬行记(10)——高阶组件

    高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中 ...

  3. CentOS 下编译安装Apache

    CentOS 下编译安装Apache 卸载原有的apache 首先从 http://httpd.apache.or 下载apache源码包httpd-2.4.4.tar.gz然后从 http://ap ...

  4. SpringBoot入门(一):从HelloWorld开始

    从0开始创建springBoot项目,话不多说,跟着我一步一步来就行了. 1.新建项目 1) 创建新项目,选择project, 点点点就好了 2)  Spring Initializr——>选择 ...

  5. vue教程(一)-html使用vue

    前后端分离.微服务框架是当下比较流行的词汇,而vue就是前端框架的佼佼者.下面重点介绍一下vue的用法: vue起步:1.引包    2.启动new Vue({el:目的地,template:模板内容 ...

  6. module中module.exports与exports的区别(转)

    转https://cnodejs.org/topic/55ccace5b25bd72150842c0a require 用来加载代码,而 exports 和 module.exports 则用来导出代 ...

  7. 关于 64位系统 java连接access 报错java.sql.SQLException: [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序

    报错的原因是url = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=E:/公司/2000.mdb"; 这样是不行 ...

  8. solidity的delete操作汇总

    简介 Solidity中的特殊操作符delete用于释放空间,为鼓励主动对空间的回收,释放空间将会返还一些gas. delete操作符可以用于任何变量,将其设置成默认值0. 删除枚举类型时,会将其值重 ...

  9. ruby镜像报错,compass安装报错

    在这几天在电脑上安装compass一直报错,很无语.因为安装的ruby和sass都没有问题,虽然是很久之前安装的.   sass # 更新sass gem update sass   # 检查sass ...

  10. jumpserver1.4.1 安装过程

    # 修改字符集 localedef -c -f UTF-8 -i zh_CN zh_CN.UTF-8 export LC_ALL=zh_CN.UTF-8 echo 'LANG="zh_CN. ...