typescript的概要

Posted wtt577474

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了typescript的概要相关的知识,希望对你有一定的参考价值。

1.字符串新特性:

typescript代码:

function text(temple, name, age) {
console.log(temple);
console.log(name);
console.log(age);
}

var myname = "wang tingtign";
var getAge = function () {
return 18;
}

text`my name is ${myname},and i am is ${getAge()}`

翻译过来的javascript代码:

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function text(temple, name, age) {
console.log(temple);
console.log(name);
console.log(age);
}
var myname = "wang tingtign";
var getAge = function () {
return 18;
};
text(__makeTemplateObject(["my name is ", ",and i am is ", ""], ["my name is ", ",and i am is ", ""]), myname, getAge());

2.参数新特性

参数类型

var myname:string = "张三"

function test(name:string):void{  //这里的void是说没有任何返回值,将void改成string就是返回字符串的返回值,参数也可以声明类型
}

自定义类型--接口

class Person{

name:string;

age:number;

}

var zhangsan:Person = new Person();

zhangsan.name = "zhagnsan";

zhangsna.age = 18;

参数默认值

function test(a:string,b:string,c:string="jojo"){

console.log(a);

console.log(b);

console.log(c);

}

test("xxx","hhh");  //在方法里有了默认值之后就可以不用在定义,带默认值的参数一定要放在最后

可选参数用?

function test(a:string,b?:string,c:string="jojo"){

console.log(a);

console.log(b);

console.log(c);

}

test("xxx");  

3.函数新特性

rest and spread

function test(...args){  //可以传任意数量的参数进来

args.forEach(function(arg){

console.log(arg);

})

}

test(1,2,3,4,5,6,7);

generotar(需要用babel编译器;控制函数的执行过程,手工暂停和恢复代码执行)

function* text(){

console.log("start");

yield;

console.log("finish");

}

var funct1 = text();

funct1.next();   //在调用next方法的时候就会执行函数到关键字yield

funct1.next();

析构表达式

1.function getstock(){

return {code:‘ibm‘,price:100}

}

var {code,price} = getstrock();

 

2.function getstock(){

return {code:‘ibm‘,price:{

        price1:100,

        price2:200

}}

}

var {code:codex,price:{price2}} = getstrock();

console.log(codex);

console.log(price2);

3.var array1 = [1,2,3,4];

var [,,number1,number2] = array1;

var [number1,number2,...others] = array1

console.log(number1); //3

console.log(number2); //4

console.log(others); //34

4.箭头函数  (消除javascript关键字带来的问题)

var myArray = [1,2,3,4,5,6];

console.log(myArray.filter(   //需要的参数就是一个匿名函数

value => return value%==2;

));  //2,4

5.for of循环

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

array.desc = "for number";

for(var n in array){

console.log(n);  //(循环的是键值对里面的键的名字key)

console.log(array[n]);  //(循环的是键值对里面的值)

}

for(var n of array){  //可以打断

if(n>2) break;

console.log(n);  //循环的是键值对里面的键的值

}

6.面向对象特性

1.类

class Person{  //这是一个完整的类

name;  //属性,   访问符public可以在内部和外部访问,不写public时则是默认为public,private则是外部访问不了,protected则是在内部和子类访问

eat(){  //方法

console.log("im eat ing");

}

}

var p1 = new Person();   //关键字new实例化Person

p1.name = "batman";

p1.eat();

var p2 = new Person();   //关键字new实例化Person

p2.name = "pink";

p2.eat();

2.类的构造函数就是类里面的一个特殊的方法

class Person{

constructor(){

console.log("wtt");

}

name; 

eat(){ 

console.log("im eat ing");

}

}

var p1 = new Person();   

p1.name = "batman";

p1.eat();

结果:batman, wtt,im eat ing

3.构造函数的作用:在实例化的时候可以赋给名字

class Person{

constructor(public name:string){  //声明了一个name属性,如果没有public是没有name属性的

}

eat(){ 

console.log(this.name);

}

}

var p1 = new Person("wtt");   

p1.eat();  //结果:wtt

4.类的继承

class Person{

constructor(public name:string){ 

}

eat(){ 

console.log(this.name);

}

}

class Employee extends Person{  //类Employee继承了 类Person的所有属性和方法

code:string; //可以定义新的属性和方法

work(){}

}

var e1 = new Employee("wtt");

5.super

class Person{

  constructor(public name:string){ 

    console.log("haha");

  }

  eat(){ 

    console.log("im eating");

  }

}

class Employee extends Person{  

  constructor(name:string,code:sring){  //这里是子类的构造函数必须调用父类的构造函数

    super(name);

    console.log("xixi");

    this.code = code;

  }

  code:string;

  work(){

    super.eat();

    this.dowork();

  }

  dowork(){

    console.log("im working");

  }

}

var e1 = new Employee("wtt","1"); //haha,xixi

e1.work();  //im eating,im working






















以上是关于typescript的概要的主要内容,如果未能解决你的问题,请参考以下文章

TypeScript VS JavaScript 深度对比

TypeScript VS JavaScript 深度对比

前端学习笔记TypeScript 快速上手

前端学习笔记TypeScript 快速上手

前端学习笔记TypeScript 快速上手

TypeScript入门学习之路