转载本文，请联系味觉小姐姐公众号。在前端有这么多很酷的东西真是太有趣了。但是，JavaScript是个绊脚石，尤其是熟悉了Java这种强类型检查语言之后，每次看到js都觉得不自在。作为后端，写JavaScript真的是一种想吐的感觉。值得庆幸的是，现在有更好的选择。为什么要学习TypeScript？因为它的语法真的和Java很像。有了这个东西，你就可以摆脱烦人的JavaScript，拥抱前端技术栈了。TypeScript是JavaScript的超集。就是说js可以直接用ts写。在我的第一印象中，js就像一个编译后的可执行文件，而ts就像Java语言，或者Scala语言等等。不过，这只是一个类比。其实ts中的大部分语法都是在编译的时候用到的。在真实的js文件中，抹去了很多信息。如上图所示，ts文件通过tsc编译器生成一个普通的js文件。接下来就可以使用node命令来执行这个普通的js文件了。下面是一个简单的ts代码。它类似于Java吗？classAnimal{publicname;protecteda;privateb:string;constructor(name){this.name=name;}sayhi(){return`mynameis${this.name}`;}}classCattextendsAnimal{constructor(name){super(name)}sayhi(){return"meow"+super.sayhi()}staticiaAnimal(a){returnainstanceofAnimal;}}functiongen(name:T):void{console.log(name.name)}下面简单介绍一下基本语法。当然有些文法是ES6的，不过我也把它们放在一起了。类型相关由于js是弱类型语言，运行时转换较多，无法使用类似java的强类型转换方式，所以typescript可以在编译阶段通过语言特性增强一些类型检查功能。在运行时，大部分根本就没有这样的判断，所以ts更像是一个流程工具。对于一门语言来说，基本数据类型和自定义类型肯定是分不开的。ts提供了一系列关键字作为特殊类型代码。其他的都好说。唯一让我感兴趣的是联名款，这是一个非常有趣的功能。typeof关键字用来判断是否是某种类型的字符串，表示是字符串类型。它不同于Java。第一个字母是小写的。0O,0x表示进度问题）any是通用类型，相当于Java中的Object，allany相当于普通的js。所以，如果你讨厌ts，你可以一直走到天亮。Never表示那些从不存在的值类型。object表示非原始类型，这与Java中的不同。字符串|number就是这样的联名款，也是很神奇的一点。这里只允许这两种类型的转换，以及可以调用的方法，取两者交集``之间的字符串，可以用shell-like语法做一个template${}readonly这个其实是一个关键字，表示它是只读的Property[propName:string]:any;这行代码值得研究，但不推荐。number[]数组和Java类似，但是这是声明背后的语法，使用[]而不是{}函数来声明值function和javascript没有区别，有两种声明方式。Lambda绝对是js的强项=>语法也恶心，结合ES6可以写一篇大文章……休息注意这个东西！类似于Java中可变参数的意思，as是关键字，我们可以理解为Java的强制转换，但只是语法检查，运行时无法控制。（任何窗口）很酷，但很容易出错。相关的let用于声明范围较小的普通变量。{}中的var范围很大。函数级或全局const只读变量是静态的；readonly是dynamic的，但是声明后不能改变。declarevar声明全局变量（.d.ts后缀的文件，这是约定俗成的）declarefunction声明全局方法declareclassglobalclassdeclareenum全局枚举类型declarenamespaceglobalnamespaceexport这个主要用于npm，可以用import稍后导入。什么是声明？我个人认为这类似于python中的__init__.py文件，用来暴露一些接口和函数，也为代码自动补全提供了基础。数据。两个默认约定。配置好tsconfig.json后，直接执行tsc命令即可编译。///三斜杠指令，丑陋。从Java过来学Class的同学会发现，这些概念和Java差不多，只是ts的语法更简单。getset其实是一个关键字，可以直接跟在函数后面。您可以更改属性分配和读取的行为！也可以使用静态、实例化、公共、受保护和私有。真的和写Java一样的感觉。默认的构造函数就是构造方法，不像Java，和class的名词一样，还有abstract，表示子类必须要实现，没有区别。关于类和接口的区别，我想熟悉java的都是ts的透明范式。在Java中，语法也很不正常，因为你常常不知道要做什么，把<>放在哪里。在ts里，一样难受。具体如何熟悉，只有在实践中磨练过类型，接口，类接口定义了接口，这里的接口有意思，可以声明实体，但是都必须赋值。你可以加？在成员变量前面表示不需要，但是很丑；？还可以定义函数的可选参数，6的类型和interface一样，编译的时候会被抹掉。两者的语法略有不同。同时type可以定义更多的类型，比如基本类型、联合类型、元组等，class可以在里面实现方法，有点java的味道，所以不会被编译器抹掉。JavaScript使用构造函数来模拟类。开发工具tsc是一个typescript编译器。如果出现编译错误，可以指定底层语法特征。tsc--targetes6建议配置在tsconfig.json文件中，会被自动识别。{"compilerOptions":{"module":"commonjs","outDir":"lib","declaration":true,"target":"es6"}}vscode，通过.d.ts文件，可以自动完成完成和语法检查。但是，对于复杂的个性化配置，仍然无法像idea那样实现智能提示和配置。这样做的结果是，你手头必须有一份参考文件，熟悉参考文件的内容和作用。遇到相应的配置参数，就得浏览到相应的地方，然后复制。这对于javaer来说实在是太痛苦了。作者简介：品味小姐姐（xjjdog），一个不允许程序员走弯路的公众号。专注于基础架构和Linux。十年架构，每天百亿流量，与你探讨高并发世界，给你不一样的滋味。我的个人微信xjjdog0，欢迎加好友进一步交流。
