TypeScript

360 阅读4分钟

最近一直在学习js的相关内容,随着对js的了解发现虽然js很灵活但也存在很多的坑,偶然间发现TypeScript感觉很有趣就学习了一下。

开始之前先了解一下typescript的前世今生吧!简单来说typescript就是微软的亲儿子,JavaScript的超集遵循ES6,Angular2采用的就是typescript,它代表了一段时间内前端脚本的发展方向。

我们知道虽然typescript写起来比较爽但是浏览器是不运行typescript代码的,我们需要把自己的typescript代码装换为javaScript代码,转换有两种方式在线转换和本地编译。

1.在线转换

2.本地编译

本地编译我们需要装nodejs,然后通过npm来完成

当我们安装好环境之后建立一个.ts文件(注意typescript文件的格式为XX.ts),然后进入到.ts文件所在文件夹下,运行tsc XX.ts,然后就会生成一个XX.js文件

接下来我们着重来介绍介绍typescript的语法特性。

3.字符串

在之前我们知道字符串想要换行必须用+连接起来否则会报错,但是现在完全可以用``来搞定。结合es6的字符串模板来用简直爽歪歪有没有。

4.typescript参数类型

我们可以为变量指定类型当我们为变量赋值时如果不符合变量类型会有错误提示。

可以声明的几种类型,当然我们也可以为函数的参数声明类型。

同时我们也可以自己定义类型

同时我们还应该注意函数的默认参数和可选参数的情况。

5.函数的新特性

function a(...arg){}

可以传入任意个参数。

6.箭头表达式

这点其实就是es6中的箭头表达式,主要是用来声明匿名函数,消除传统匿名函数的this指针问题。

var sum=(a,b)=>a+b;

7.循环

var arry=[1,2,3,4];

arry.forEach(value=>console.log(value));

es5的写法:arry.forEach(function(value){return console.log(value);});

注意此时不能用break来中断循环。

for in循环

for (var n in arry){

console.log(n);

}

注意此时的n代表数组中值得索引,要想遍历数组中的每个值要arry[n],而且如果这个数组有属性也会被循环出来。

for (var n of arry){

console.log(arry[n]);

}

此时循环过程可以被break打断,而且会忽略数组的属性值只负责数组中的值。

8.面向对象的一些特性

这里和es6差不多,就当复习ES6了吧!

定义类:class Hello{

name;

eat(){}

}

实例化:var p=new Hello();

p.name='sun';

p.eat();

访问控制符:public(默认),private(只能在类的内部访问),protected(可以在类的内部和子类中被访问)

构造方法:constructor()只在类被实例化时调用一次不能在外部被访问。

类的继承:extends

class world extends Hello{

constructor(){

super(name);

}

}

注意在子类的构造方法中必须调用父类的构造方法通过super关键字来实现。

super的第二个用法调用父类中的其他方法。

class world extends Hello{

constructor(){

super(name);

}

say(){

super.eat();

this.dowork();

}

dowork(){

}

}

泛型:参数化的类型,一般用来限制集合的内容。

var s:Array<Person>=[];

接口:说起接口大家都知道一点但要准确定义却又说不清,借用慕课上对接口的一个定义。所谓接口是指用来建立某种代码约定,使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定。

注意:JavaScript并没有接口的概念。

声明接口:interface A{

name;//属性

age;

}

class B{

constructor(public config:A){


}

}

var a=new Person({

name:'zhang',

age:18

});

如果此时的构造函数中的属性不符合接口的声明会报错。

interface Animal{

eat();

}

class C implements Animal{

eat(){

}//此时必须实现接口中的方法

}

模块:export (对外暴露的) import(引进来的)

export var a;

var b;

export function func1(){

}

function func2(){}

export class A{}

class B{}

注解:所谓注解是为程序的类,方法,变量加上的更加直观明了的说明,这些说明信息与程序的业务逻辑无关,而是供指定的工具或框架使用的。(引自互联网)

类型定义文件:用来帮助开发者在TypeScript中使用已有的JavaScript的工具包。

总结:typescript的主要语法和es6是吻合的只要大家的对es比较熟悉的话那么typescript也不在话下。

最后建议大家采用webstorm.