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

43次阅读

共计 3230 个字符,预计需要花费 9 分钟才能阅读完成。

从入门到放弃的 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<number>
fuck: number[] // 这两种写法是一样的
}
class exp implements check {
name: string
age: number
hobby:Array<number>
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/)

正文完
 0