如何从JavaScript到TypeScript？-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于如何从JavaScript到TypeScript？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

想学习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)