console.log(typeof typescript === 'javascript' ) --- 浅谈typescript

前言

  记录下学习typescript的小结，也算是尝试着本身写些东西，从一个前端开发的角度去看待typescript这个新生物（2020年了，它不新了，是个老东西了，嘿嘿）。

what ?

  首先说说typescript是个什么东西，哦，它不是个东西，它是一种基于js的扩展语言，更强调数据的类型，在我看来更像一个工具，一个规范前端代码，让前端也可以清晰的表达出面向对象这种思想的一个工具，关于具体是什么参考某教程网站以下。

TypeScript是JavaScript的一个超集，支持ECMAScript 6标准。

TypeScript由微软开发的自由和开源的编程语言。

TypeScript设计目标是开发大型应用，它能够编译成纯JavaScript，编译出来的JavaScript能够运行在任何浏览器上。

  嗯。。超集，就像下图这样，能够理解为typescript是js的一种衍生，包含了原来js的全部，还增长了一些新的属性及场景。

至于微软开发的，没啥好说的，能够编译成JavaScript，这点要说明一下，typescript是没法在浏览器上直接运行的，因此须要借助它自带的工具将其编译成JavaScript,而后再运行，这也是我所理解的工具语言。

why ?

  任何事物的产生及存在都有其道理，那么typescript产生的缘由的，先看看官网上的两句英文简介

TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.

  蹩脚的英语水平翻译下，简单来讲，TypeScript 能够提升你的开发速度（确定不少刚开始使用的童鞋要说了，明明是降速，加了那么多类型校验），它是怎么加速的呢，经过在你运行你的代码以前就发现错误并提醒你（好家伙，防患于未然，强！）

  Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly.

  再译，类型提供了一种方法来描述对象的形态，提供更好的文档，并容许TypeScript验证代码是否正常工做。

  经过把类型的概念再详细的描述，来更好的体现对象在js中的形态，不少前端开发，像我，对对象这个概念都是比较模糊的（不管是代码仍是现实中，流下了单身狗的热泪），如何作的，后面章节再细说。validate 这点多是typescript的初衷吧，因为js是一门弱语言，对类型没有特变关注，控制台作下小实验：

  能够看到js的世界，就算道（类型）不一样，也能够一块儿为谋，这像一种包容性，包容了本该出错的一面，可是终究是错误，一个bug可能也会所以而起， typescript的出现某总意义上就是为了解决这个不上不下的类型问题。

  固然typescript的写法上更趋向于java,对后端开发非常友好，更趋向于面向对象的编程，增长了代码的可读性，以及可维护性，这些能够说是typescript产生的缘由。

How ?

  那么ts（简写了，后面同）是如何作的呢，各类官网教程上也都有，简单来讲就是使用ts的语法，编写.ts后缀的文件，而后经过ts编译器器或者Babel将ts文件编译成js,而后就可使用了。

step:1

npm install -g typescript

step:2

编写greeter.ts 指定入参person为string类型

function greeter(person: string) {    
return "Hello, " + person;
}
let user = 1; //这里使用错误的例子
document.body.textContent = greeter(user);复制代码

step:3

tsc greeter.ts复制代码

编译,这里能够发现以前埋下的雷已经暴露了，控制台会打印错误信息，但这并不影响编译，依然能够编译出.js文件。

setp:4

查看greeter.js,编译已经没有了指定的类型，这也是咱们熟悉的js

function greeter(person) {   
 return "Hello, " + person;
}
var user = 1;
document.body.textContent = greeter(user);复制代码

使用vscode或者其余typescript支持的编辑器，在编写阶段就能够发现其错误

base.

  看了what,how,why后，再来看看ts基础知识

 数据类型

ES6:

6种基础类型：Undefined，Null，Boolean，Number，String, Symbol (es6)

1种复合类型：Object（对象包括数组，函数等）

TS:（表格来自某教学网站）

任意类型	any	声明为 any的变量能够赋予任意类型的值。原es6声明方式
数字类型	number	双精度64位浮点值。它能够用来表示整数和分数。 let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制
字符串类型	string	一个字符系列，使用单引号（'）或双引号（"）来表示 字符串类型。反引号（`）来定义多行文本和内嵌表达式。 let name: string = "Runoob";let years: number = 5; let words: string = `您好，今年是${ name }发布${ years + 1}周年`;
布尔类型	boolean	表示逻辑值： true和false 。 let flag: boolean = true;
数组类型	无	声明变量为数组。 // 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array<number> = [1, 2];
元组	无	元组类型用来表示已知元素数量和类型的数组，各元素的类型没必要相同，对应位置的类型须要相同。 let x: [string, number];x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob
枚举	enum	枚举类型用于定义数值集合。 enum Color {Red, Green, Blue}; let c: Color = Color.Blue;console.log(c); // 输出 2
void	void	用于标识方法返回值的类型，表示该方法没有返回值。 function hello(): void { alert("Hello Runoob");}
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值
never	never	never 是其它类型（包括null和undefined）的子 类型，表明从不会出现的值。

能够看到对比es6，ts增长了any、enum、void、元组、never。

any：这个类型更像是一个从js到ts过渡用的参数，万物（对象）皆可any。这就像没有引入ts的js，没有指明类型，其实就是

let a  //等同于 let a : any复制代码

enum：枚举类型，java中的枚举类

void：表示这个方法没有返回值，初学java时，是否是对public void main印象很深呢

元组：混合类型的数组，代表该数组中每一个元素的类型不相同，用元组去表示，

JS中你能够不care每一个元素的类型

let arr = [1,'as',true,{'a':1}];复制代码

可是TS明确类型这个概念，就要按照规矩办事

let arr: number[] = [1, 2]; //ok 
let arr: number[] = [1, '2']; //not ok ^_^复制代码

元组的出现就是为了让数组可以拥有多类型，固然使用前要先肯定每一个位置对因而什么类型的，规范了，可是也有点麻烦

let x: [string, number] = ['Runoob', 1];复制代码

never：表示的是那些永不存在的值的类型，例如一个无限循环的方法，由于不存在因此是never,关于never就这样简单介绍下吧，平常使用中仍是比较少见的

function infiniteLoop(): never {
   while (true) {}
}复制代码

additional.

  看完基础的，再看点稍微进阶的，以前说了TS是更趋向于面向对象编程的，那具体是怎么表现的呢，es6的时候就已经引入了类和接口的概念，TS中又添加了一些功能，变得更像java了。

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

关于为何引入泛型

TypeScript中不建议使用any类型，不能保证类型安全，调试时缺少完整的信息。

TypeScript可使用泛型来建立可重用的组件。支持当前数据类型，同时也能支持将来的数据类型。扩展灵活。能够在编译时发现你的类型错误，从而保证了类型安全。

就个人理解来讲，当ts约束了方法的返回类型后，对于一些可复用的逻辑，但类型又不一致时，可使用泛型，扩展了方法的使用范围。 举个栗子

能够看到当咱们想使用identity去做用number形式，ts的类型校验会提示咱们不能够，这时候确定会有人想到any,可是这是不推荐，在我理解any是个过渡用的，在严格的类型下极可能后面被踢出局，这时候就可使用泛型了，这里泛型和java中是同样同样的

这样就o了

看下编译后的js

是否是有种what the f**k 的感受，脱裤子放屁吗这不是，嘿嘿，把事情作规范确定会在原有的基础上把一些东西复杂化，这点也是不少人吐槽的地方吧。

类的扩展 

引入了public、private 和 protected修饰符明确类型中的方法及属性的使用范围，更清晰的定义了万物皆对象的对象世界

• public 修饰的属性或方法是公有的，能够在任何地方被访问到，默认全部的属性和方法都是 public 的

• private 修饰的属性或方法是私有的，不能在声明它的类的外部访问

• protected 修饰的属性或方法是受保护的，它和 private 相似，区别是它在子类中也是容许被访问的

用表格简单表示下

        

是否是和java的极其像，具体看一个例子  .ts 文件

私有属性 private age只能在当前类中调用，在子类或者外部没法调用，vscode中会直接提示Property 'age' is private and only accessible within class 'Animal'。

受保护的方法 protected sayWhoAmi()能够在当前类，或者子类中调用，可是实例化对象中不能调用，一样的vscode中会直接提示

Property 'sayWhoAmI' is protected and only accessible within class 'Animal' and its subclasses

有没有注意到定义类的时候我用了abstract 这个修饰符，这也是TS新加入的属性，抽象类，一种不容许实例化的类，对应的抽象方法，也是不容许实例化的，只可以由其子类去继承。常见的比喻就是动物，动物是没有具体的某个动物的（这里的某个动物指这种东西就叫动物，好比说狗是狗，但它不叫作动物，它是动物的子类）。因此动物是个抽象的概念，咱们把活的生物统称为动物。这就是一个抽象类。抽象方法亦是，只有方法名，没有方法体，由于它是将子类的方法归纳而来。例子中的sayHi( )抽象类中只定义了动物们都有打招呼的行为，但并没用说它们是怎么打招呼的，由于不一样的动物打招呼的方式多是不一样的，狗说‘汪’，猫说‘喵’，人会说‘你好’，这就是在子类中去实现抽象方法。关于抽象好像扯得有点多，学过java的应该会比较容易理解。

看下上述代码编译后的样子 .js文件

同时在文件的顶部生成了__extends方法

能够看出为了实现类的复杂关系，使用了方法的原型，对象的原型。关于__proto__，prototype这里就不细说了，固然编译后的js仍是会丢失一些类的属性，编译后的也只是运行而已，问题早在编写的时候就发现了，这可能也是TS带来的方便，经过类的继承的机制取代原型和原型链在js中的应用。

写在最后

   一篇小总结总算写完了，尝试养成写总结习惯的第一篇，但愿不会太监（停更），简单的梳理了下我眼中的TS，写的也比较浅显。在我看来对于TS，暂时保持一个中立的态度吧，前期入手确定会加剧了工做量，可是减小了后期的维护成本。虽然类型判断比较繁琐，可是类型的使用仍是真香！

关于题目，想骚操做一把，可是自己就是个错误

console.log(typeof  typescript  === 'javascript' ) 复制代码

这个不用想确定是false了

typeof  xxx  的范围只会在[ 'undefined' ,'boolean' ,'string' ,'number','object' , 'function' ,'symbol' ]

typeof null === "object" //true 这点注意下复制代码

固然了 事实证实TS和JS 也不是一个东西啊，哦，他们原本也不是个东西，它们是前端的语言。

传送门

想进一步了解TS能够参考一下连接，学任何东西官方文档永远是最nice的，其余的都是帮助理解用的

官方文档：www.typescriptlang.org/index.html

中文文档：ts.xcatliu.com/

菜鸟教程：www.runoob.com/typescript/…

本文中斜体内容，均摘抄上述网站。