button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="可以在多行字符串中使用模板,示例:
var names = 'DAOcheng';
function getimg() {
return ''
}
var html = `${
names}
${getImg()}
`" title="" data-original-title="复制">
可以在多行字符串中使用模板,示例:
var names = 'daocheng';
function getImg() {
return '<i></i>'
}
var html = `<div>${names}
<span>${getImg()}</span>
<div>
`
1.3:自动拆分字符串
function getData(template, name, age) {
console.LOG(template);
console.log(name);
console.log(age);
}
var names = 'daocheng';
var age = 23;
getData`你好,我的名字是${names},我今年${age}岁了`
2. 参数新特征
2.1:参数类型
Typescript中的参数类型包括:boolean/number/string/array/tuple/enum/any/(null和undefined)/ void /never。其中元祖(tuple)、枚举、任意值、void类型和never是有别于Javascript的特有类型。
在Typescritpt中声明变量,需要加上类型声明,如boolean或string等。通过静态类型约束,在编译时执行类型检查,这样可以避免一些类型混用的低级错误。示例:
var names = 'daocheng';
function getData(name: stirng, age: number): boolean {
return true
}
Typescript还支持初始化默认参数。如果函数的某个参数设置了默认值,当该函数被调用时,如果没有给这个参数传值或者传值为undefined时,这个参数的值就是设置的默认值。示例:
function max(x: number, y: number = 4): number {
return x > y ? x : y;
}
let result1 = max(2);
let result2 = max(2, undefined);
let result3 = max(2, 4, 7);
let result4 = max(2, 7);
2.3: 可选参数
在javascript里,被调用函数的每个函数都是可选的,而在typescript中,被调用的每个函数的每个参数都是必传的。在编译时,会检查函数每个参数是否传值。简而言之,传递给一个函数的参数个数必须和函数定义的参数个数一致。但是实际开发中经常需要根据实际需求来确认参数,这时可以添加?来定义可选参数。示例:
function max(x: number, y: number) {
if(y){
return x > y ? x : y;
} else {
return x
}
}
let result1 = max(2);
let result2 = max(2, 4, 7);
let result3 = max(2, 4);
3:函数特性
3.1:剩余参数
上面介绍的必选参数、默认参数以及可选参数共同点是只能表示某一个参数。当需要同时操作多个参数,或者并不知道会有多少参数传递进来时,就需要用到Typescript 里的剩余参数。示例:
function sum(x: number, ...restOfNumber: number[]){
let result = x;
restOfNumber.foreach(value => result += value);
return result;
}
let result1 = sum(1, 2, 3, 4, 5, 6);
console.log(result1);
let result2 = sum(2);
console.log(result2);
let result3 = sum(2, 5);
console.log(result3);
3.2: generator函数
控制函数的执行过程,可以手动的干预函数执行。示例:
function getPrice(stock) {
while (1) {
yield Math.random() * 100;
}
}
var priceGenerator = getPrice('dcc');
var limitPrice = 51;
var price = 100;
while (price > limitPrice) {
price = priceGenerator.next().value;
console.log(`this generator return ${price}`);
}
console.log(`buying at ${price}`);
3.3: 析构表达式
析构表达式又称解构,是ES6的一个重要特性,Typescript在1.5版本中开始增加了对结构的支持,所谓结构,就是将声明的一组变量与相同结构的数组或者对象的元素数值一一对应。分数组解构([])和对象解构({})两种。
数组解构示例:
let imput = [1, 2];
let [First, second] = input;
console.log(first);
console.log(second);
function f([first, second]) {
console.log(first + second)
}
f{[1, 3]}
let [first, ...rest] = [1, 2, 3, 4];
console.log(first);
console.log(second);
对象解构示例:
let test = {
x: 0,
y: 0,
width: 15,
heights: {
height1: 10,
height2: 20
}
};
let { x, y: myy, width, heights: {height2} } = test;
console.log(x, myY, width, height2); //输出:0,10,15,20
4: 箭头表达式
用来声明匿名函数,消除传统匿名函数的this指针问题。示例:
function Test1(names: string) {
this.names = names;
setInterval(function() {
console.log('my name is ' + this.names);
}, 1000)
}
function Test2(names: string) {
this.names = names;
setInterval(() => {
console.log('my names is ' + this.names)
}, 1000)
}
var a = new Test1('daocheng');
var b = new Test2('daocheng');
5: 循环
typescritpt中涉及三种高级循环方式:forEach()、for in、for of
forEach示例:
var myArray = [1, 2, 3, 4];
myArray.name = 'daocheng';
myArray.forEach(value => console.log(value));
for in 示例:
var myArray = [1, 2, 3, 4];
myArray.name = 'daocheng';
for (var n in myArray ) {
console.log(n)
}
for of 示例:
var myArray = [1, 2, 3, 4];
myArray.name = 'daocheng';
for (var n of myArray) {
console.log(n)
}
6:类
传统的JavaScript程序使用函数和基于原型(Prototype)继承来创建可重用的“类”,这对于习惯了面向对象编程的开发者来说不是很友好,Typescript中可以支持基于类(class)的面向对象编程
6.1: 类的声明
class Car {
engine: string,
constructor(engine: string) {
this.engine = engine;
}
drive(distanceInMeters: number = 0) {
console.log(`aaa is running` + this.engine)
}
}
let car = new Car('petrol');
car.drive(100)
6.2: 类的封装、继承、多态
封装、继承、多态是面向对象的三大特性。上面的例子把汽车的行为写到一个类中,即所谓的封装。在Typescript中,使用extends关键字可以方便的实现.
继承。示例:
class Car {
engine: string;
constructor(engine: string) {
this.engine = engine;
}
drive(distanceInMeter: number = 0){
console.log(`A car runs ${distanceInMeter}m
powered by` + this.engine)
}
}
class MotoCar extends Car {
constructor(engine: string) {
super(engine)
}
}
let tesla = new MotoCar('electricity');
tesla.drive();
多态示例:
class Car {
engine: string;
constructor(engine: string) {
this.engine = engine;
}
drive(distanceInMeter: number = 0){
console.log(`A car runs ${distanceInMeter}m
powered by` + this.engine)
}
}
class Jeep extends Car {
constructor(engine: string) {
super(engine)
}
drive(distanceInMeters: number = 100) {
console.log('jeep...')
return super.drive(distanceInMeters);
}
}
let landRover: Car = new Jeep('petrol');
> Jeep子类中的drive()方法重写了Car的drive()方法,这样drive()方法在不同的类中就具有不同的功能,这就是多态。注意:子类和派生类的构造函数中必须调用super(),它会实现父类构造方法。
6.3: 修饰符
在类中的修饰符可以分为公共(public)、私有(private)、和受保护(protected)三种类型。在Typescript里,每个成员默认为public,可以被自由的访问。
私有修饰符示例:
class Car {
private engine: string;
constructor(engine: string) {
this.engine = engine;
}
}
new Car('petrol').engine;
受保护修饰符示例:
class Car {
engine: string;
constructor(engine: string) {
this.engine = engine;
}
protected drive() {
console.log('drving')
}
}
class MotoCar extends Car {
constructor(engine: string) {
super(engine)
}
moToDrive() {
super.drive()
}
}
let tesla = new MoToCar('electricity');
tesla.drive();
tesla,moToDrive()
6.4: 参数属性
参数属性是通过给构造函数的参数添加一个访问限定符来声明。参数属性可以方便地让我们在一个地方定义并初始化类成员。我们来改造6.1中的例子:
class Car {
constructor(public engine: string) {}
drive() { }
}
Typescript有抽象类的概念,它是供其他类继承的基类,不能直接被实例化。不同于接口,抽象类必须包含一些抽象方法,同时也可以包含非抽象的成员。抽象类中的抽象方法必须在派生类中实现。
abstract class Person {
abstract speak(): void;
walking(): void {
console.log('walking');
}
}
class Male extends Person {
speak(): void {
console.log('man wakling')
}
}
6.6: 接口
接口在面向对象设计中具有极其重要的作用,在Gof的23种设计模式中,基本上都可见到接口的身影。长期以来,接口模式一直是Javascript这类弱类型语言的软肋,Typescript接口的使用方式类似于Java。
在Typescript中接口有属性类型、函数类型、可索引类型、类类型这几种,在Angular的开发中主要使用类类型接口,我们使用interface关键字定义接口并用implements关键字实现接口。
类类型接口示例:
interfance Animal {
name: string;
setName();
}
class Dog implements Animal {
name: string;
setName() {
console.log(this.name)
}
constructor() { }
}
6.7: 模块
ES6中引入了模块的概念,在TypeScript中也支持模块的使用。使用import和export关键字来建立两个模块之间的联系。懂点node都知道模块是什么了,不BB了。
7:装饰器
装饰器(Decorators)是一种特殊类型的声明,它可以被附加到类声明、方法、属性或参数上。装饰器有@符号紧接一个函数名称,如:@exPression,expression求职后必须是一个函数,在函数执行的时候装饰器的声明方法会被执行。装饰器是用来给附着的主题进行装饰,添加额外的行为。(装饰器属于es7规范)
在Typescript的源码中,官方提供了方法装饰器、类装饰器、参数装饰器、属性装饰器等几种每种装饰器类型传入的参数大不相同。这里我演示两种装饰器。
复合使用的例子:
function Component(component) {
console.log('selector: ' + component.selector);
console.log('template: ' + component.template);
console.log('component init');
return (target: any) => {
console.log('component call');
return target;
}
}
function Directive() {
console.log('directive init');
return (target: any) => {
console.log('directive call');
return target;
}
}
@Component({
selector: 'person',
template: 'person.html'
})
@Directive()
export class Person {}
let p = new Person();
8:泛型
参数化的类型,一般用来限制集合的内容。
示例:
class MinHeap<T> {
list: T[] = [];
add(element: T): void {
}
min(): T {
return this.list.length ? this.list[0] : null
}
}
let heap = new MinHeap<number>();
heap.add(3);
heap.add(5);
console.log(heap.min())
9:声明文件
声明文件也称为类型定义文件,当我们项目中要使用第三方的Javascript库如jQuery、lodash等就需要用声明文件,声明文件是以.d.ts为后缀的形式存在的,其作用是描述一个Javascript模块文件所有导出的接口类型信息。
例如使用jquery:
npm install –save @types/jquery
脚本宝典总结
以上是脚本宝典为你收集整理的TypeScript快速入门全部内容,希望文章能够帮你解决TypeScript快速入门所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。