typescript的概要

Posted 2021-01-26 wtt577474

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