标题图
字符串新特性
变量和参数新特性
函数新特性
匿名函数
for of循环
TypeScript语言中的面向对象特性
理解ES5,ES6,JAVASCRIPT,TYPESCRIPT概念之间的关系
ES是客户端脚本语言的规范
ES5,ES6是这个规范的不同版本
JavaScript和TypeScript是两种不同的脚本语言
JavaScript实现了ES5规范
TypeScript实现了ES6规范
本地compiler
npm --version
sudo npm install -g typescript
tsc --version
ls
tsc Hello.ts
export class Hello {
}
"use strict";
var Hello = (function () {
function Hello() {
}
return Hello;
}());
exports.Hello = Hello;
字符串新特性
function test(template, name, age) {
console.log(template);
console.log(name);
console.log(age);
}
var myname = "da";
var getAge = function () {
return 12;
}
test `hello my name is ${myname}, ${getAge()}`
参数类型
var myname: string = "da shu";
var a: any = "da shu";
var b: number = 12;
var man: boolean = true;
function test(name: string) :string {
return "";
}
class Person {
name: string;
age: number;
}
var zhangsan: Person = new Person();
zhangsan.name = "da"
zhangsan.age = 223
参数默认值
参数类型：
在参数名称后面使用冒号来指定参数的类型
默认参数：
在参数声明后面用等号来指定参数的默认值
var myname: string = "da shu"
function test(a: string, b: string, c: string = "da"){
console.log(a);
console.log(b);
console.log(c);
}
text("xx","yy","zz");
可选参数
var myname: string = "da shu"
function test(a: string, b?: string, c: string = "da"){
console.log(a);
console.log(b);
console.log(c);
}
text("xx","yy","zz");
Rest and Spread操作符
function func1(...args) {
args.forEach(function (arg) {
console.log(arg);
})
}
function func1() {
var args = [];
for( var _i = 0; _i < arguments.length; _i++) {
args[_i - 0] = arguments[_i];
}
args.forEach(function(arg) {
console.log(arg);
});
}
func1(2,3,4);
func1(2,3,4,5,2);
function func1(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
}
var args = [1,2];
func1.applay(void 0, args);
var args2 = [23,32,2,211];
func1.apply(void 0, args2);
generator函数
Rest and Spread 操作符：
用来声明任意数量的方法参数
generator函数：
控制函数的执行过程，手工暂停和恢复代码执行
Babel是一个JavaScript编译器。
析构表达式
destructuring析构表达式：
通过表达式将对象或数组拆解成任意数量的变量
function getStock() {
return {
code: 'IBM',
price: 100
}
}
var { code, price } = getStock();
console.log(code);
console.log(price);
var array1 = [1,2,3,4];
function doSomething([number1,number2,...others]) {
console.log(number1);
console.log(number2);
console.log(others);
}
doSomething(array1);
箭头表达式
用来声明匿名函数，消除传统匿名函数的this指针问题
var myArray = [1,2,3,4,5];
console.log(myArray.filter(value=> value%2==0));
function getStock(name: string) {
this.name = name;
setInterval(function(){
consolv.log("name is :" + this.name);
}, 1000);
}
var stock = new getStock("IBM");
function getStock(name) {
this.name = name;
setInterval(function(){
console.log("name is" + this.name);
}, 1000);
}
var stock = new getStock("IBM");
结果没值
function getStock2(name: string) {
this.name = name;
setInterval(() => {
consolv.log("name is :" + this.name);
}, 1000);
}
var stock = new getStock("IBM");
有值了
for of循环
forEach()，for in，for of
面向对象：
类，泛型，接口，模块，注解，类型定义文件
for (var n of myArray) {
if(n > 2) break;
console.log(n);
}
TypeScript-类
class Person {
name;
eat() {
console.log();
}
}
var p1 = new Person();
p1.name = "da";
p1.eat();
image.png
构造函数
image.png
image.png
image.png
TypeScript-泛型
参数化的类型，一般用来限制集合的内容
TypeScript-接口
image.png
interface IPerson {
name: string;
age: number;
}
class Person {
constructor(public config: IPerson) {
}
}
var p1 = new Person({
name: 'da',
age: 12
});
interface Animal{
eat();
}
class Sheep implements Animal {
eat() {
console.log("");
}
}
class Tiger implements Animal{
eat() {
console.log();
}
}
TypeScript-模块
image.png
image.png
image.png
TypeScript-注解
image.png
类型定义文件
image.png
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
博客
网友评论