“前浪” JavaScript,“后浪” TypeScript

2024-01-27 14:12

本文主要是介绍“前浪” JavaScript,“后浪” TypeScript,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 一、“前浪” JavaScript
    • 二、“后浪” TypeScript
    • 三、初见 TypeScript
    • 四、总结

一、“前浪” JavaScript

2007 年 Jeff Atwood 在他的博客里提出了著名的 Atwood 定律,即 “任何能够用 JavaScript 实现的应用系统,最终都必将用 JavaScript 实现。”

JavaScript 的强大毋庸置疑,十余年的时间早已验证了这一点:语法结构简单、万物皆可对象、前后端通吃、单线程…… 这些特点使它几乎无处不在。

正因为它的应用领域之广,对这门语言的安全性、可维护性等方面的要求日渐拔高,可偏偏 “万物皆可对象” 的特点,又使得它注定是一门动态弱类型的编程语言,于是乎使用 JavaScript 的工程师们,他们经常会碰到这么一种情况:

<script>function getLength(str) {return str length;}console.log("1.正在的代码执行");console.log("2.开始函数");getLength("abc"); //正确的调用getLength(); //错误的调用(IDE并不会报错)//当上面的代码报错后,后续所有的代码都无法正常执行了console.log("3.调用结束");
<script>

在 JavaScript 里编译以上代码时,不会出现报错,可在浏览器运行时,就会出现以下画面↓↓

出现这一情况的原因就在于:JavaScript 对我们传入的参数,不会进行任何限制。

二、“后浪” TypeScript

今年的五四,B 站的《后浪》刷了屏,一周了热度也没算完全消退。

尽管 JavaScript 这一 “前浪” 着实优秀,却也有着不可避免的限制和缺陷,在这种情况下,“后浪” TypeScript 出现了,它既能完美融合 JavaScript 已有的优点和特点,也在此基础上,又增加了类型约束。

为什么说 JS 工程师遇到了 TypeScript 会拥有超能力呢?接下来我们将通过课程《TypeScript 基础入门》的第一章,让你初步了解 “后浪” TypeScript。

三、初见 TypeScript

TypeScript 是 JavaScript 的一个超集,他们两个之间有非常深入的联系,所以在学习 TypeScript 之前,你需要学习 JavaScript 相关教程。在本实验我们将会对 TypeScript 进行简单的介绍并初步使用它。

知识点

  • TypeScript 简介
  • 为何选择 TypeScript
  • 安装使用 TypeScript

TypeScript 简介

什么是 TypeScript?

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。它扩展了 JavaScript 的语法,所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。TypeScript 是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。

TypeScript 与 JavaScript 的区别

  1. TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法。
  2. TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。
  3. TypeScript 文件的后缀名 .ts (.ts,.tsx,.dts),JavaScript 文件是 .js。
  4. 在编写 TypeScript 的文件的时候就会自动编译成 js 文件。

用一张表格来更清晰的观察两者的区别:

为何选择 TypeScript

  1. TypeScript 增加了代码的可读性和可维护性
  2. 新增了其他语言的语法,比如 Class(类)、Interface(接口)、Generics (泛型)、Enums (枚举)等。
  3. TypeScript 拥抱了 ES6 规范
  4. 兼容很多第三方库,即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件供 TypeScript 读取。
  5. TypeScript 拥有活跃的社区

更值得一提的是,TypeScript 在开发时就能给出编译错误,而 JavaScript 错误则需要在运行时才能暴露。作为强类型语言,你可以明确知道数据的类型,代码可读性极强,几乎每个人都能理解。TypeScript 被很多业界大佬使用,像 Asana、Circle CL 和 Slack 这些公司都在用 TypeScript。

安装使用 TypeScript

打开终端 terminal 输入全局安装命令:

cnpm install -g typescript 

新建一个文件 index.ts,输入以下内容:

console.log("hello world"); 

var a: string = “2”; // 这是 ts 写法,暂时不需要掌握,后续会讲到

在终端输入 tsc index.ts 编译文件,编译成功则会生成一个同名的 js 文件。

生成的 js 文件里则将 ts 语法转换成了 js 语法。

四、总结

本小节我们学习了以下知识点:

  • TypeScript 简介
  • 为何选择 TypeScript
  • 安装使用 TypeScript

这篇关于“前浪” JavaScript,“后浪” TypeScript的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/650481

相关文章

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现

Spring、Spring Boot、Spring Cloud 的区别与联系分析

《Spring、SpringBoot、SpringCloud的区别与联系分析》Spring、SpringBoot和SpringCloud是Java开发中常用的框架,分别针对企业级应用开发、快速开... 目录1. Spring 框架2. Spring Boot3. Spring Cloud总结1. Sprin

Java实现MD5加密的四种方式

《Java实现MD5加密的四种方式》MD5是一种广泛使用的哈希算法,其输出结果是一个128位的二进制数,通常以32位十六进制数的形式表示,MD5的底层实现涉及多个复杂的步骤和算法,本文给大家介绍了Ja... 目录MD5介绍Java 中实现 MD5 加密方式方法一:使用 MessageDigest方法二:使用

Java中的runnable 和 callable 区别解析

《Java中的runnable和callable区别解析》Runnable接口用于定义不需要返回结果的任务,而Callable接口可以返回结果并抛出异常,通常与Future结合使用,Runnab... 目录1. Runnable接口1.1 Runnable的定义1.2 Runnable的特点1.3 使用Ru

Java中Runnable和Callable的区别和联系及使用场景

《Java中Runnable和Callable的区别和联系及使用场景》Java多线程有两个重要的接口,Runnable和Callable,分别提供一个run方法和call方法,二者是有较大差异的,本文... 目录一、Runnable使用场景二、Callable的使用场景三、关于Future和FutureTa

Spring 中 BeanFactoryPostProcessor 的作用和示例源码分析

《Spring中BeanFactoryPostProcessor的作用和示例源码分析》Spring的BeanFactoryPostProcessor是容器初始化的扩展接口,允许在Bean实例化前... 目录一、概览1. 核心定位2. 核心功能详解3. 关键特性二、Spring 内置的 BeanFactory

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)

《Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)》:本文主要介绍Java导入、导出excel的相关资料,讲解了使用Java和ApachePOI库将数据导出为Excel文件,包括... 目录前言一、引入Apache POI依赖二、用法&步骤2.1 创建Excel的元素2.3 样式和字体2.

Java实现将Markdown转换为纯文本

《Java实现将Markdown转换为纯文本》这篇文章主要为大家详细介绍了两种在Java中实现Markdown转纯文本的主流方法,文中的示例代码讲解详细,大家可以根据需求选择适合的方案... 目录方法一:使用正则表达式(轻量级方案)方法二:使用 Flexmark-Java 库(专业方案)1. 添加依赖(Ma

Spring Boot拦截器Interceptor与过滤器Filter详细教程(示例详解)

《SpringBoot拦截器Interceptor与过滤器Filter详细教程(示例详解)》本文详细介绍了SpringBoot中的拦截器(Interceptor)和过滤器(Filter),包括它们的... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)详细教程1. 概述1