资讯专栏INFORMATION COLUMN

如何从JavaScript跨越到TypeScript [基础进阶知识点]

wangym / 432人阅读

摘要:接口前端程序员很难理解的点也是一门面向对象的语言,但是中它是基于原型实现的,中使用了类,这样会更清晰的体会到面向对象这一说法,但是实际在中的面向对象更加完整,它跟这些语言一样,通过接口和类去完整的面向对象编程。

从入门到放弃的java

初中时自学过JAVA,学了大概一个多月吧, 学了一个多月,看视频这些,后面放弃了编程。 依稀记得,那段日子极度苦逼,我想如果当时是学javaScript就好了。

说正事,typeScript现在真的很火,听过一句话,大项目,好点的公司,必须上typeScript,还有React,没有为什么,这里并不是说其他的技术不好,只是说大型项目,最好TS,它对于我们后期代码维护,前期的调试能省去很多时间。

Node.js之快速搭建微信公众号服务器

Node.js之快速搭建服务器+前后端数据库session交互

ES6教程全篇

前端中大厂面试必问 原生javaScript操作

想学习typeScript,我觉得你首先要对原生javaScript非常熟练,最基础的知识最重要,然后要掌握ES5+ES6+ES7(7以后的最好知道一些),新技术掌握了,以后就不会那么累。 typeScript =type+ javaScript ,在ES5/6/7+javaScript基础上加了一个type!

TS相对JS来说,它真的非常严格,只要稍微不匹配接口或者值的类型,又或者是参数的个数不对,值改变后跟原值类型不

一致,都会导致报错。 建议使用npm 全局安装typeScript 然后使用 tsc *.ts 进行编译TS文件

"typeScript的新增核心概念:"

let app:string=2;这段代码就会报错,因为值 2 是一个number,而规定app是string类型,这样在TS中会报错的

新增值的类型:

any:可以是任意类型

vold:一个空的返回类型,比如function move():vold{} 这样代表这个函数没有返回值 ,如果换成any,那么就随便这个

函数返回什么类型,但是他必须return 否则TS会报错

新增概念:类型推论

let app = "hello" ; app=1 ; 这段代码就会报错,因为TS把他当成了 let app:string = "hello",再次改变

app的值,必须是string类型,否则报错 ,这就是类型推论

联合类型

let app: string | number = "hello" ; app = 1; 这段代码是不会报错的,因为app是一个联合类型的变量,它即可以是

string又可以是number,只要符合其中一个类型即可,当然你也可以写更多个。

接口 interface (前端程序员很难理解的点)

javaScript也是一门面向对象的语言,但是ES5中它是基于原型实现的,ES6中使用了class类,这样会更清晰的体会到

面向对象这一说法,但是实际在TS中的面向对象更加完整,它跟JAVA这些语言一样,通过接口和类去完整的面向对象编程。

你可以把对象想象成一个女人 (在TS中抽象成一个变量 let app )

我们使用接口去描述这个女人 (在TS中使用 let app : interfacename)

最后使用一些方法去获得这个女人的联系方式 (在TS中使用class类里面的方法去实现)

比如 :

class ask{

    name:string;
    
    tel ? :number  ;   //这里为什么加问号,因为你不一定能拿到她的号码,如果拿不到,那么便可以不传参数,
    
    但是如果不加? ,你又没那么号码,那么你没有参数传进来,TS就会报错 
    
    age:number ;
    
    constructor(name,age,tel){
         this.name=name;
         this.age=age;
         this.tel=tel
    }
}

interface check {

    name : string;
    
    age:number;
    
    tel ? :number;  
    
}

let woman :check = new ask ("rose",20,1888888888);//假设你拿到美女所有资料 传入构造函数 

这样你可以打印一把 console.log(woman),看看它是怎样的,上面这段代码是没有报错的。

上面的代码通过tsc命令编译成JS文件后

var ask = /* @class / (function () {

function ask(name, age, tel) {


    this.name = name;
    
    
    this.age = age;
    
    
    this.tel = tel;
    
    
}
return ask;

}());

let woman = new ask("rose", 20, 1888888888);

console.log(woman)

"这里要注意,很多TS的代码编译后,是不会出现在JS文件中,比如const enum的枚举, interface这些,当然后面还会遇到更多"




-------------


### 元组的概念

JS中的数组,能储存大量的内容,所谓的元祖,其实就是数据类型的不同的数组

[1,"1",true,false] 其实这个就是一个元组,只是叫法不一样。

-------


### 枚举 enum 和 const enum的区别

enum app { red, blue, pink, deeppink }

console.log(app.red, app.blue, app.pink, app.deeppink) // 输出0,1,2,3

enum app2 { red = 2, blue, pink, deeppink }

console.log(app2.red, app2.blue, app2.pink, app2.deeppink) // 输出2,3,4,5

枚举默认的第一个值是0;也可以自己定义,如果自定义和系统默认的冲突,TS是不认识的,

他也不会报错,但是我不建议你这样做,毕竟谁没事找事呢?

### 还有一种常量枚举 

const enum Directions {

Up,
Down,
Left,
Right

}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// 结果是 0 1 2 3

* 假如包含了计算成员,则会在编译阶段报错:

 * const enum Color {Red, Green, Blue = "blue".length};   

* 常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算成员。  一试便知 
类和接口 (最重要的之一)
* 一个类一次只可以继承一个接口,但是可以一次对应多个接口
* 要想实现多个类继承,那么使用子类继续继承其他类,循环下去

interface check {

name: string;
age: number;
hobby: Array
fuck: number[]   //这两种写法是一样的

}

class exp implements check {

name: string
age: number
hobby:Array
fuck: number[]
constructor(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}

}

let app = new exp("hello", 18, [1, 2, 3], [2, 3, 4])

-------经过TS编译后得到  

var exp = /* @class / (function () {

function exp(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}
return exp;

}());
var app = new exp("hello", 18, [1, 2, 3], [2, 3, 4]);

typeScript可能最难的就是如何理解优雅的面向对象编程,接口interface只是为了描述而已,


真正去实现,需要class类去实现,ES6在typeScript中位置举足轻重,

所以我建议你先去学习原生javaScript+ES6再来学习typeScript,那样会轻松很多,


下面放一个阮一峰的ES6的学习文档链接,里面写得非常详细,一定要认真看。 

 
[ECMAScript 6 入门](http://es6.ruanyifeng.com/)  

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102754.html

相关文章

  • 如何JavaScript跨越TypeScript [基础进阶识点]

    摘要:接口前端程序员很难理解的点也是一门面向对象的语言,但是中它是基于原型实现的,中使用了类,这样会更清晰的体会到面向对象这一说法,但是实际在中的面向对象更加完整,它跟这些语言一样,通过接口和类去完整的面向对象编程。 从入门到放弃的java 初中时自学过JAVA,学了大概一个多月吧, 学了一个多月,看视频这些,后面放弃了编程。 依稀记得,那段日子极度苦逼,我想如果当时是学javaScrip...

    zhunjiee 评论0 收藏0
  • 前端进阶资源整理

    摘要:前端进阶进阶构建项目一配置最佳实践状态管理之痛点分析与改良开发中所谓状态浅析从时间旅行的乌托邦,看状态管理的设计误区使用更好地处理数据爱彼迎房源详情页中的性能优化从零开始,在中构建时间旅行式调试用轻松管理复杂状态如何把业务逻辑这个故事讲好和 前端进阶 webpack webpack进阶构建项目(一) Webpack 4 配置最佳实践 react Redux状态管理之痛点、分析与...

    BlackMass 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习一门新的编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    caspar 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习一门新的编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    nihao 评论0 收藏0

发表评论

0条评论

wangym

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<