您的位置:首页 > Web前端 > AngularJS

Typescript特性

2018-03-28 20:54 363 查看
字符串特性:
1、自动转换
`asd
asdas
aasd` 
以上等于'asdasdasaasd'
2、字符串模板
`aaa ${x} ` = "aaa"+x
3、自动拆分字符串
test(a,b,c){
console.log(a);
console.log(b);

console.log(c);

}
test('asda ${xxx} ,aasdsa ${sss}');
则打印'asda','aasdsa' (会被切割),xxx,sss

参数类型:
1、
var a :string = "xxx"; ->字符串类型的变量
var b :number= 12; ->数字类型的变量

var c :boolean= true; ->布尔类型的变量

var d :any = "" ->任意类型的变量
比如var a = false; 声明不是定义的类型的值会报错
2、
function test():void{} ->不可有返回值,有return会报错。
3、
function test(a:string){} ->方法的参数也可以声明类型
4、可自定义类型
class Person{ name:string;age:number};
var zhangsan:Person = new Person(); -->这里的Person是定义的类型
zhangsan.name = 12 ->会报错
5、参数默认值
function test(a:string,b:string,c:number){...}
test('ad','asd',13)->必须要传对应的参数,否则会报错
function test(a : string , b : string , c : number = 15){..} -->
test('aasd','ab')-->第三个不用传
function test(a:string , b ? : string ){..}
test('aaa')或test('aaa','bbb') -->都可以,但是可选参数不能声明在必须参数的前面

Rest and Spread 操作符(声明任意数量的方法参数)
function func1(...args){
    args.forEach(function(arg){
        console.log(arg);
    })
};
func1(1,2,3,4,5) ->打印1,2,3,4,5

generator函数(控制函数的执行过程,手工暂停和恢复代码执行)
function* doSomething(){
    console.log("s");

    yield;

    console.log("e");

}
要声明doSomething
var func1 = doSomething();
func1.next(); -->打印s 再次执行function.next() 则打印e

destructuring析构表达式
通过表达式将对象或数组拆解成任意数量的变量
1、
function getStock(){
    return{
        code:"IBM",
        price:100

    }

}
var { code,price } = getStock();
console.log(code) ->IBM
var{ code:codex , price } = getStock();
console.log(codex); -->可以打印别名
2、
function getStock(){
    return{
        code:"IBM",

        price{
            price1:200,
            price2:400   
        }

    }

}
var {code,price:{price1}} = getStock();
console.log(price1) ->200
3、针对数组的析构表达式
var arr =[1,2,3,4]
var {num1,num2} = arr;
console.log(num1)->1
console.log(num2)->2

var { , , num1,num2}
console.log()
console.log(num1)->3
console.log(num2)->4
var {num1,...others} =arr;
console.log(others) --> array[3] ->2,3,4
function dosth([num1,...others]){console.log(..)} 
dosth(arr) ->方法的参数也是析构表达式和上面结果一样

箭头表达式
var sum = (arg1,arg2) => arg1 + arg2; 
只有一个参数的话小括号也不用写,如果箭头表达式内容是多行 则需要写return关键字和大括号
等于var sum = function (arg1,arg2){
    return arg1+arg2


箭头表达式会消除,传统函数中this指向问题

for of ,for in与forEach()循环
var myArr = [1,2,3,4]
myArr.desc = "xx"
myArr.forEach(value => console.log(value)); 1,2,3,4   --不能brack和打印出 desc
for(var n in myArr){console.log(n)} 0,1,2,3,desc --这里打印的是数组的下标和属性的名字
for (var n in myArr) { console.log(myArr
)} --1,2,3,4,xx 和元素和属性
for(var n of myArr) { console.log(n)} --1,2,3,4 直接打印键值对的值,不会打印出数组属性,可以brack打断
for(var n of "xxxxx"){console.log(n)}

Typescript-类
class Person{
    name;

    eat(){
        console.log("im eating")
    }

}
var p1 = new Person(); ->类的实例化通过new完成
p1.name = "xx";
p1.eat();
可以设置访问控制符
public (默认)
private 私有的,只有在类的内部可以访问的到 类的外部访问不到。
protected 受保护的, 在类和类的子类中可以访问到,类的外部访问不到
类中的方法constructor() 类的构造函数。在new的时候被调用
constructor(name : string)  ->必须在创建类的时候必须指定一个参数就可以这样用
var p1 = new Person(); ->报错
constructor(public name:string){} ->这样写可以自动声明一个name属性 ,在创建的时候给name属性赋值(必须要public)
类的继承 class Employee extends Person {}
var e1 = new Employee("xx");
所以e1 继承了Person的所以属性和方法
super有2个用法,一个是调用父类的构造函数,一个是调用父类的其他方法。
子类的构造函数必须要调用父类的构造函数,super(name);

Typescript 泛型
限制集合的内容
var workers: Array<Person> = []; ->规定了这个数组里面只能放person
可以workers[0] = new Person("xx");
workers[1] = new Employee("xx","2"); 都可以这样用
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Typescript angular