乐趣区

关于typescript:TypeScript-新特性介绍

jiezi

TypeScript 新个性介绍

字符串新个性

多行字符串

  1. JavaScript 定义多行字符串
var word = 'aaa' + 'bbb' +    'ccc'
  1. TypeScript 定义多行字符串
var word = `aaa
bbb
ccc
`

字符串模板

var myName = "Zhang San";
var getName = function() { return "zhangsan"}
console.log(`hello ${myName}`);
console.log(`hello ${getName()}`);

主动拆分字符串

function test(template, name, age) {console.log(template);
 console.log(name);
 console.log(age);
}
var myName = "Zhang san";
var getAge = function() { return 18;}
test `my name is ${myName}, I'm ${getAge()}`;

参数新个性

参数类型

在参数名称前面应用冒号来制订参数的类型
申明类型

  • any
  • string
  • number
  • booleam
  • void (不须要返回值的函数)
var myName: string = "zhang san";
var alias: any = 'xixi'; // 能够设置变量为任何类型
myName = 12; // IDE 报错
// 办法申明类型
function test(): void {}
// 参数申明类型
function test(name: string): string {return name;} 
// 自定义类型
class Person {
 name: string;
 age: number
}
var lisi: Person = new Person();
lisi.age = 12;lisi.name = 'lisi';```
### 默认参数
在参数申明前面用等号来指定参数的默认值

function test(a:string, b:string, c:string = ‘xixi’) {
console.log(a);
console.log(b);
console.log(c);
}
test(‘x’, ‘y’);

### 可选参数
  在办法的参数申明前面用问号来表明此参数为可选参数

function test(a:string, b?:string, c:string = ‘xixi’) {
console.log(a);
console.log(b);
console.log(c);
}
test(‘x’); // “x” undefined “xixi”

## 函数新个性
### Rest and Spread 操作符
用来申明任意数量的办法参数

function fun1 (…args) {args.forEach(function (arg) {
console.log(arg);
})}

### generator 函数
管制函数的执行郭晨个，手动暂停和复原代码执行

function* doSomething() {
console.log(‘start’);

yield;

console.log(‘end’);
}
var fun1 = doSomething();
fun1.next();
fun1.next();

### destructuring 析构表达式
通过表达式将对象或数组拆解成任意数量的变量
对象

function getStock() {
return {code: “IBM”,
price: 100,
name: {
name1: ‘zhanagsan’,
name2: ‘lisi’
} } }
// js
var stock = getStock();
var code = stock.code;
var price = stock.price;
// ts
var {code, price} = getStock();
var {code: codex, price, name: {name2}} = getStock();

数组

var array1 = [1, 2, 3, 4];var [,,number1, number2] = array1;
console.log(number1, number2);

var array1 = [1, 2, 3, 4];var [number1, number2, …others] = array1;
console.log(others); // [3, 4]

var array1 = [1, 2, 3, 4];var [number1, number2, …others] = array1;
function doSomething([number1, number2, …others]) {
console.log(number1);
console.log(number2);
console.log(others);
}
doSomething(array1);

## 表达式与循环
### 箭头表达式
用来申明匿名函数，打消传统匿名函数的 this 指针问题

function getStock(name: string) {
this.name = name; setInterval(function() {
console.log(this.name);
}, 1000); setInterval(()=> {
console.log(this.name);

}, 1000)

}
var stock = new getStock(“IBM”);

var myArray = [0, 1, 2, 3, 4, 5];
console.log(myArray.filter(value => value % 2 == 0));

### 循环 for-of

var myArray = [1, 2, 3, 4, 5];myArray.desc = “four”;
myArray.forEach(value => console.log(value)); // 不容许突破循环
for(let n in myArray) {// 属性会循环进去
console.log(n);
}
for(let n of myArray) {// 循环能够被打断，不循环属性
console.log(n);
}

## 面向对象个性
### 类（Class）

class Person {
public name;
public eat() {
console.log(‘eat’);
} }
var p1 = new Person();
p1.name = ‘man’;p1.eat();
var p2 = new Person();p2.name = ‘woman’;p2.eat();

拜访控制符
- public: (默认控制符)
- protected: (受爱护的，外部和子类中拜访到，内部不可拜访)
- private: (公有的)
#### 构造函数

class Person {
constructor(public name: string) {
this.name = name;
console.log(‘hahaha’);
}
eat() {
console.log(this.name);
}
}
var person1 = new Person(‘zhangsan1’);
person1.eat(); `

类的继承

extends 取得所有属性和办法

class Employee extends Person {
 code: string;
 work() {console.log('work');
 }
}
var e1 = new Employee('lisi');e1.eat();
e1.work();

super 调用父类的构造函数

class Person {constructor(public name: string) {
 this.name = name;
 console.log('父类的构造函数');
 }
 eat() {console.log('eating' + this.name);
 }
}
class Employee extends Person {constructor(name: string, code: string) {super(name); console.log('子类的构造函数')
 this.code = code; } code: string;
 work() {super.eat();
 this.doWork();} private doWork() {console.log('working');
 }
}
var e1 = new Employee('lisi', '123');
e1.work();

泛型 generic

参数化的类型，个别用来限度汇合的内容

class Person {constructor(public name: string) {
 this.name = name;
 console.log('父类的构造函数');
 }
 eat() {console.log('eating' + this.name);
 }
}
class Employee extends Person {constructor(name: string, code: string) {super(name); console.log('子类的构造函数')
 this.code = code; } code: string;
 work() {super.eat();
 this.doWork();} private doWork() {console.log('working');
 }
}
var works: Array<Person> = []; // 数组外面只能放入 Person 对象
works[0] = new Person('zhangsan');
works[1] = new Employee('lisi', '123');
console.log(works);

接口 Interface

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

interface IPerson {
 name: string;
 age: number;
}
class Person {constructor(public config: IPerson) {}}
var p1 = new Person({ name: 'zhanggsan',
 age: 19
});
interface Animal {eat();
}
class Sheep implements Animal {eat() {console.log('i eat grass');
 }}
class Tiger implements Animal {eat() {console.log('i eat meat');
 }}

模块 Module

模块能够帮忙开发者将代码宰割为可重用的单元。开发者能够本人决定将模块中的哪些资源（类、办法、变量）裸露进来提供内部应用，哪些资源只能在模块内应用。

export var a1 = 1;var a2 = 2;
export function func1() {console.log('func1');
}
function func2() {console.log('func2');
}
export class testClass1 {
}
class  testClass2 { }
import {a1, func1, testClass1} from "./a";

注解 annotation

为程序的元素（类、办法、变量）加上更直观更明了的阐明，这些阐明信息与程序的业务逻辑无关，而是提供指定的工具或框架应用。

import {Component} from '@angular/core'
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.components.css']
})
export class AppComponent {title = 'app works';}

类型定义文件（*.d.ts）

类型定义文件用来帮忙开发者在 TypeScript 中应用已有的 JavaScript 的工具包。
如 JQuery 等
下载地址：https://github.com/Definitely…
工具：https://github.com/typings/ty…

export var a1 = 1;var a2 = 2;
export function func1() {$('#xxxx').show(); // 引入 JQuery 类型定义文件 index.d.ts
 console.log('func1');
}
function func2() {console.log('func2');
}
export class testClass1 {
}
class  testClass2 {}
退出移动版