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

• 初中时自学过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文件

• &＃8216;typeScript的新增核心概念:&＃8217;
• let app:string=2;这段代码就会报错，因为值 2 是一个number，而规定app是string类型，这样在TS中会报错的

新增值的类型：

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

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

新增概念：类型推论

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

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

联合类型

• let app: string | number = &＃8216;hello&＃8217; ; 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(&＃8216;rose&＃8217;, 20, 1888888888);

console.log(woman)


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

• JS中的数组，能储存大量的内容，所谓的元祖，其实就是数据类型的不同的数组
• [1,&＃8217;1&＃8242;,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(&＃8216;hello&＃8217;, 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(&＃8216;hello&＃8217;, 18, [1, 2, 3], [2, 3, 4]);


typeScript可能最难的就是如何理解优雅的面向对象编程，接口interface只是为了描述而已，
真正去实现，需要class类去实现，ES6在typeScript中位置举足轻重，
所以我建议你先去学习原生Javascript+ES6再来学习typeScript，那样会轻松很多，
下面放一个阮一峰的ES6的学习文档链接，里面写得非常详细，一定要认真看。
[ECMAScript 6 入门](http://es6.ruanyifeng.com/)