初识TypeScript

其他 2018-07-31 20:10:09 阅读次数: 0

字符串新特性

多行字符串

语法

``

字符串模板

语法

${}

自动拆分字符串

用字符串模板调用test方法，在调用的时候注意，如果想要使用字符串自动拆分的特性 在用这个字符串模板调用test方法的时候不能使用圆括号的形式调用，直接在方法后面跟上字符串模板。例如

var myName = 'chentian';
var getAge = function () { 
    return 27;
}
var test = function (template, name, age) { 
    console.log(template);
    console.log(name);
    console.log(age);
}
test`hellow my name is ${myName},i'm ${getAge()}`

参数新特性

参数类型

定义：在参数名称后面用冒号来制定参数的类型

  1. :string 声明为字符串类型
  2. :number 声明为数字类型
  3. :boolean 声明为布尔类型
  4. :void 方法不需要任何返回值若有返回值，报错
  5. :any 任何类型
var myName: string = 'chentian';
myName = 123;
//IDE会报错
var myName = 'chentian';
myName = 123;

类型推断机制
IDE会报错,ts总是以第一个申明的类型为准推断这个变量以后的类型

var alias:any='chentian'

参数可以声明类型 对函数返回值也可以申明类型

function test(name:string):string(){
    return "";
}

自定义类型

class person{
    name:string//字符串类型,
    age:number//数字类型
}
//如何调用自定义类型
var test:person=new person();
test.name='chentian';
test.age=27;

默认参数

定义：在参数后面用等号来指定参数的默认值

function person(name:string,age:number,email:any='[email protected]'){
    console.log(name);
    console.log(age);
    console.log(email);
}
person('chentian',26);
person('chentian',26,'[email protected]');

带默认值的参数一定要放在参数的末尾，否在就会被前面的参数覆盖

可选参数

定义：在方法的参数声名后面用问号来标明此参数为可选参数

function person(name:string,age?:number,email:any='[email protected]'){
    console.log(name);
    console.log(age);
    console.log(email);
}

age为可选参数，可选参数一般声名在必传参数之后

函数新特性

Rest and Spread 操作符

定义：用来声名任意数量参数

function test(...args){
    args.forEach(function (arg) {
        console.log(arg);
     });
}
var arr=[1,2,3],arr2[8,9,10,'aa','bb'];
test(arr);
test(arr2);

反向的用法

function test(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);
}
var arg1=[1,2,3],arg2[8,9,10,'aa','bb'];
test(...arg1);
test(...arg2);

genarator函数

定义：控制函数的执行过程，手工暂停和回复代码执行

function* doSomething(){
    console.log('start');
    yield;
    console.log('finish');
}
var fun1=doSomething();
fun1.next();
fun1.next();

destructuring析构表达式

定义：通过表达式将对象或数组拆解成任意数量的变量
析构也可称为解构

在对象中进行析构

1、普通析构表达式

var test=function(){
    return {
        name: "chentian",
        age: 27,
        email: '[email protected]'
    }
};
var {name, age } = test();
console.log(name);//chentian
console.log(age);//27

2、映射析构表达式

var test=function(){
    return {
        name: "chentian",
        age: 27,
        email: '[email protected]'
    }
};

var {name:myname, age } = test();
console.log(name);//''
console.log(myname);//chentian
console.log(age);//27

3、嵌套析构表达式

var test=function(){
    return {
        name: {
            bigName: 'xiaochen',
            smallName:'tiantian'
        },
        age: 27,
        email: '[email protected]'
    }
};

var { name: {bigName,smallName }, age } = test();
console.log(bigName);
console.log(smallName);

var test=function(){
    return {
        name: {
            bigName: 'xiaochen',
            smallName:'tiantian'
        },
        age: 27,
        email: '[email protected]'
    }
};
var { name: {bigName:nameOne,smallName:nameTwo }, age } = test();
console.log(nameOne);//xiaochen
console.log(nameTwo);//tiantian

在数组中进行析构

定义：与在对象中进行析构不同的地方是，对象用()进行析构，而数组用[]进行析构

var arr=[1,2,3];
var [aa,bb,cc]=arr;
console.log(aa);//1
console.log(bb);//2
console.log(cc);//3
var arr = [1, 2, 3, 4, 5, 6, 7];

var [,,,aa, bb, cc] = arr;
console.log(aa);//4
console.log(bb);//5
console.log(cc);//6

var [,aa, bb, cc,...others] = arr;
console.log(aa);//2
console.log(bb);//3
console.log(cc);//4
console.log(others);//[5,6,7]

function test([aa,bb,cc,...other]) { 
    console.log(aa);//2
    console.log(bb);//3
    console.log(cc);//4
    console.log(other);//[5,6,7]
}

表达式与循环

箭头表达式

1、无参数

var sun = () => { 
    return 'test';
}
//编译后
var sun = function () {
    return 'test';
};

2、只有一个参数

var sun = arg1 => { 
    console.log(arg1);
}
sun('chentian');

//编译后
var sun = function (arg1) {
    console.log(arg1);
};
sun('chentian');//chentian

3、两个参数

var sun=(arg1,arg2)=>arg1+arg2;
//编译后
var sun = function (arg1, arg2) { return arg1 + arg2; };

4、如果表达式是多行则需换行和return

var sun = (arg1, arg2) => { 
    return arg1 + arg2;
}
//编译后
var sun = function (arg1, arg2) {
    return arg1 + arg2;
};

5、实例：

var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.filter(value=>value%2===0));
//编译后
var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.filter(function (value) { return value % 2 === 0; }));//[2,4,6]

箭头函数能解决this指向问题

function getStock(name: string) {
    this.name = name;
    setInterval(function () { 
        console.log('this name is '+this.name);
    },1000);
}
var test = new getStock('chentian');//this name is

function getStock(name: string) {
    this.name = name;
    setInterval(()=>console.log('this name is'+this.name),1000)
}
var test = new getStock('chentian');//this name is chentian

forEach()/for in/for of

var arr = [1, 2, 3, 4, 5];
arr.forEach(value=>console.log(value));
//编译后
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (value) { return console.log(value); });

var arr = [1, 2, 3, 4, 5];
for (var i in arr) {
    console.log(i);
    console.log(arr[i]);
 }
var arr = [1, 2, 3, 4, 5];
for (var i of arr) { 
    if (i > 3) break;
    console.log(i)
}

面向对象特性

TypeScript类

访问控制符

public共有 在类的内部和外部都能访问到
private私有 只能在类的内部访问在外部不能访问
protected受保护 在类的内部和类的子类中能访问到

class Person { 
    constructor(name: string) { 
        console.log(this.name);
    }
    eat() { 
        console.log(this.name);
    }
}

var test1 = new Person('chentian');
test1.eat();//undefined

class Person { 
    constructor(public name: string) { 
        console.log(this.name);
    }
    name;
    eat() { 
        console.log(this.name);
    }
}

var test1 = new Person('chentian');
test1.eat();//chentian

constructor代表当前的类
上面两种写法的唯一区别就是有没有对参数name进行申明，声名了就有输出打印值，没有声名就输入undefined

类的继承

extends用来声名类的继承关系

class Person { 
    constructor(public name: string) { 

    }
    eat() { 
        console.log(this.name);
    }
}
class Employee extends Person { 
    code: string;
    work() { 
        console.log('111');
    }
}
var test1 = new Person('chentian');
test1.eat();

var test2 = new Employee('yangli');
test2.eat();

super调用父类的构造函数或者方法
注意：子类的构造函数必须要调用父类的构造函数

class Person { 
    constructor(public name: string) { 
        console.log('haha');
    }
    eat() { 
        console.log(this.name);
    }
}
class Employee extends Person { 
    constructor(name: string, code: string) {
        super(name);//子类的构造函数必须要调用父类的构造函数
        this.code = code;
        console.log('xixi');
     }
    code: string;
    work() { 
        console.log('111');
    }
}
var test2 = new Employee('yangli','1');//打印出haha xixi

调用父类的方法

class Person { 
    constructor(public name: string) { 
        console.log('haha');
    }
    eat() { 
        console.log('im eating');
    }
}
class Employee extends Person { 
    constructor(name: string, code: string) {
        super(name);
        this.code = code;
        console.log('xixi');
     }
    code: string;
    work() { 
        super.eat();
        this.doWork();
    }
    doWork() { 
        console.log('im working');
    }
}
var test2 = new Employee('yangli', '1');
test2.work();//haha  xixi  blankim eating im working
test2.doWork();//im working

如果给doWork加上访问控制符之后就不能直接在外部调用了

class Person { 
    constructor(public name: string) { 
        console.log('haha');
    }
    eat() { 
        console.log('im eating');
    }
}
class Employee extends Person { 
    constructor(name: string, code: string) {
        super(name);
        this.code = code;
        console.log('xixi');
     }
    code: string;
    work() { 
        super.eat();
        this.doWork();
    }
    private doWork() { 
        console.log('im working');
    }
}
var test2 = new Employee('yangli', '1');
test2.work();//haha  xixi  blankim eating im working
test2.doWork();//不能直接调用

泛型

定义：参数化的类型，一般用来限制集合的内容

//Person即上文中的Person
var workers:Array<Person>=[];
workers[0]=new Person('chentian');//正确因为workers是Person的泛型
workers[1]=new Employee('yangli','1');//正确，因为Employee继承自Person
workers[2]=2;//错误

接口

定义：用来建立某种代码约定，使得其他开发者在调用某个方法或者创建新的类时必须遵循接口所定义的代码约定

  1. interface用来定义或者声名一个接口
  2. implements 用来声名某一个类实现了一个特定的接口

接口声名属性

interface iPerson{
    name:string;
    age:number;
}
class person{
    constructor(public param:iPerson){
        console.log('用接口声名属性');
    }
}
var test=new person({
    name:'yangli',
    age:26
    });

接口声名方法
当一个类实现某个接口时，必须得实现这个接口里声名得方法

interface Animal{
    eat();
}
class sheep implements Animal{
    eat(){
        console.log('im eat grass');
    }
}
class tigger implements Animal{
    eat(){
        console.log('im eat meat');
    }
}

模块

关键字module import模块可以帮助开发者将代码分割为可重用得单元。开发者可以自己决定将模块中的哪些资源暴露出去供外部使用，哪些资源只在模块内使用。
和es6中的模块类似
例如

import{xxx,xxx,xxx} from './a';
export var a;
export function fun1(){}
export class test{}

注解

注解为程序的元素加上更直观更明了的说明，这些说明信息与程序的业务逻辑无关，而是提供指定的工具或者框架使用的说明

@Component({
    selector:'app-root',
    templateUrl:'./app.component.html',
    styleUrls:['./app.component.css']
    })

类型定义文件

类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript的工具包
例如JQuery
文件格式为*.d.ts

猜你喜欢

转载自blog.csdn.net/jscto/article/details/78450582
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022