TypeScript 入门
内容介绍
- 学习 TypeScript 的好处
- TypeScript 概念,语法和特性
前置知识
- 需要理解 ES5,ES6,JavaScript,TypeScript 的概念和关系
- ES:是 JavaScript 语言的规范,ES5,ES6 是这个规范的两种版本
- JS 和 TS 是两种客户端脚本语言,JS 是 ES5,TS 是 ES6 规范
- 需要有一定 JS 开发经验
TypeScript 的优势
- 支持 ES6 规范
- 强大的 IDE 支持
- 类型检查:减少犯错数量
- 语法提示:提高开发效率
- 重构:自动修改引用的变量名称
- Angular 框架支持
TypeScript Complier
- 在线 Complier
- 本地 Complier
- 下载 typescript: npm install -g typescript
- 编译 ts 到 js: tsc 文件名
- WebStorm 集成功能
TypeScript - 字符串新特性
- 多行字符串
用``号来包括字符串,在``号中的字符串可以换行
- 字符串模版
在多行字符串中用表达式插入变量或者调用方法:
例如:
1 2 3 4 5 6 7 8
| let myName = "Xu Dongpo";
let getName = function() { return "Xu Dongpo"; };
console.log(`hello ${myName}`); console.log(`hello ${getName()}`);
|
而且利用多行字符串开发字符串模版,可以提升开发速度以及可读性。
- 自动拆分字符串
1 2 3 4 5 6
| function test(a, b, c) { console.log(a, b, c); } let name = "Xu Dongpo"; let code = "9527"; test`hello my name is ${name}, my code is ${code}`;
|
运行结果为:
1 2 3 4 5 6 7
| Array (3) 0 "hello my name is " 1 ", my code is " 2 ""
“Array”原型 "Xu Dongpo"
|
TypeScript - 参数新特性
参数新特性 - 类型
- 参数类型
在参数的名称后面使用冒号来指定参数的类型(类型推断机制,来减少错误,可以用any)
1 2 3 4 5 6 7
| let name: string = "abcd"; let code: any = 13; let tel: number = 13; let tf: boolen = true; function test(name: string): void { }
|
- 自定义类型
允许自定义类型
1 2 3 4 5 6
| class Person{ name:string, age:number, }
let person:Person = new Person();
|
就会有语法提示,帮助提高开发效率
参数新特性 - 默认值
- 参数默认值
在参数的名称后面使用等号来指定参数的默认值
1 2 3 4 5 6
| let name: string = "abcd"; function test(a: string, b: string, c: string = "xudongpo") { console.log(a, b, c); }
test("a", "b");
|
注意带默认值的参数要声明在最后面
参数新特性 - 默认值可选参数
- 可选参数
在参数的名称后面使用问号来指定参数为可选
1 2 3 4 5 6
| let name: string = "abcd"; function test(a: string, b?: string, c: string = "xudongpo") { console.log(a, b, c); }
test("a", "b");
|
注意:
- 当声明了可选参数时,需要在方法内部处理当可选参数没有传递时候的情况
- 可选参数必须声明在必选参数的后面
TypeScript - 函数新特性
函数新特性 - Rest and Spread 操作符
- Rest and Spread 操作符(…)
用来声明任意数量的方法参数
1 2 3 4 5 6 7
| function test(...args) { args.forEach(function(arg) { console.log(arg); }); } test(1, 2, 3); test(7, 8, 9, 10);
|
- 用法二
函数参数固定,变量长度不定
1 2 3 4 5 6 7 8 9 10 11
| function test(a, b, c) { console.log(a); console.log(b); console.log(c); }
let arg1 = [1, 2]; let arg2 = [4, 5, 6];
test(...arg1); test(...arg2);
|
缺的空着,多的删掉
函数新特性 - generator 函数
- generator 函数
控制函数的执行过程,手工暂停和恢复代码执行
1 2 3 4 5 6 7 8 9
| function* doSomething() { console.log("start"); yield; console.log("next"); }
var fun1 = doSomething(); fun1.next(); fun1.next();
|
注意:
- 函数必须由变量才可以使用
- 用.next()方法执行函数,到 yield 之前。
函数新特性 - destructuring 析构表达式
- 析构表达式对象取值
- 方法一
通过表达式讲对象或者数组拆解成任意数量的变量
1 2 3 4 5 6 7 8 9 10 11
| function getStock() { return { code: "IBM", price: 100 }; }
var { code, price } = getStock(); console.log(code, price); var { code: codex, price } = getStock(); console.log(codex, price);
|
- 方法二
通过表达式讲对象或者数组拆解成任意数量的变量
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| function getStock() { return { code: "IBM", price: { price1: 100, price2: 200 },
xixi: "adfa", haha: "ababd" }; } var { code: codex, price: { price2 } } = getStock(); console.log(codex, price2);
|
- 析构表达式数组取值
1 2 3
| let array1 = [1, 2, 3, 4]; var [number1, number2] = array1; console.log(number1, number2);
|
析构其他值
1 2 3 4
| let array1 = [1, 2, 3, 4]; var [number1, number2, ...others] = array1; console.log(number1, number2); console.log(others);
|
作为函数参数输入:
1 2 3 4 5 6
| let array1 = [1, 2, 3, 4]; function doSomething([number1, number, ...others]) { console.log(number1, number2); console.log(others); } doSomething(array1);
|
TypeScript - 表达与循环
表达与循环 - 箭头表达式
- 箭头表达式
用来声明匿名函数,消除传统匿名函数的 this 指针问题
1 2 3 4 5 6 7 8 9 10 11 12 13
| var sum = (arg1, arg2) => arg1 + arg2; var sum = (arg1, arg2) => { return arg1 + arg2; }; var sum = () => { return; }; var sum = arg => { console.log(arg); };
|
常见举例:
1 2
| var myArray = [1, 2, 3, 4, 5]; console.log(myArray.filter(value => value % 2 === 0));
|
this
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| function getStock(name: string) { this.name = name; setInterval(function() { console.log("name is:" + this.name); }, 1000); } letstock = getStock("IBM"); function getStock(name: string) { this.name = name; setInterval(() => { console.log("name is:" + this.name); }, 1000); } let stock = getStock("IBM");
|
表达与循环 - for-of 循环
箭头表达式
与 forEach()和 for in 做比较
forEach():
1 2 3 4 5
| let myArray = [1, 2, 3, 4]; myArray.desc = "this is a array";
myArray.forEach(valye => console.log(value));
|
for in:
1 2 3 4 5 6 7 8 9 10
| let myArray = [1, 2, 3, 4]; myArray.desc = "this is a array";
for (var a in myArray) { console.log(a); }
for (var a in myArray) { console.log(myArray[a]); }
|
for-of:
1 2 3 4 5 6
| let myArray = [1, 2, 3, 4]; myArray.desc = "this is a array";
for (var a of myArray) { console.log(a); }
|
for-of 可以 break:
1 2 3 4 5 6 7
| let myArray = [1, 2, 3, 4]; myArray.desc = "this is a array";
for (var a of myArray) { if (a > 2) break; console.log(a); }
|
TypeScript - 面向对象特性
面向对象特性 - 类
- 类
类是 TypeScript 代码的核心,使用 TypeScript 开发时,大部分代码都是写在类里面的。
- 类的定义
1 2 3 4 5 6 7 8
| class Person { name; eat() { console.log("img"); } }
let person1 = new Person();
|
私有(private),公有(public),默认为公有
1 2 3 4 5 6 7 8
| class Person{ private name; eat(){ console.log("img") } }
|
受保护(protected)
1 2 3 4 5 6
| class Person{ protected name; eat(){ console.log("eat") } }
|
- 类的构造函数
1 2 3 4 5 6 7 8 9 10 11
| class Person { constructor() { console.log("打印构造函数"); } eat() { console.log("eat"); } }
let person1 = new Person();
|
利用 constructor 使得在实例化时必须有参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| class Person{ name; constructor(name:string){ this.name = name; } eat(){ console.log(this.name) } }
class Person{ constructor(public name:string){ } eat(){ console.log(this.name) } }
let person1 = new Person("name");
|
- 类的继承(extends)
1 2 3 4 5 6 7 8 9 10
| class Person{ constructor(public name:string){ } eat(){ console.log(this.name) } }
class Employee extends Person{ }
|
super 关键字:子类构造函数中必须调用父类的构造函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| class Person{ constructor(public name:string){ } eat(){ console.log(this.name + 'is eat'); } }
class Employee extends Person{ constructor(name:string,code:string){ super(name); this.code = code; } work(){ super.eat(); this.doWork(); } private doWork(){ } }
|