综合开发

console.log(typeof typescript === ‘javascript’ ) — 浅谈typescript

微信扫一扫,分享到朋友圈

console.log(typeof typescript === ‘javascript’ ) — 浅谈typescript

前言

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

what ?

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

TypeScriptJavaScript的一个超集,支持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]; //

运行正常

报错

输出

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/…

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

日常小记 - 排查VUX Search组件 fixed定位失效

上一篇

鼓励宅家抗击疫情 P站向全球访客提供限时免费的高级订阅访问

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

console.log(typeof typescript === ‘javascript’ ) — 浅谈typescript

长按储存图像,分享给朋友