本篇文章给大家带来的内容是关于如何从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)
这里要注意，很多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,3enum 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: stringage: numberhobby: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，那样会轻松很多，
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注的javascript教程视频栏目！
以上就是如何从javascript到typescript？的详细内容。