的基本概念及常用语法,TypeScript学习笔记

By admin in 4858美高梅 on 2019年3月28日

一、介绍

TypeScript是JavaScript的超集,扩张了JavaScript的语法,也代表他帮衬具有的
JavaScript 语法

它支持ES6规范

强大的IDE支持

是Angular2的支付语言

 

一、介绍

TypeScript是JavaScript的超集,扩张了JavaScript的语法,也意味她支持具有的
JavaScript 语法

它支持ES6规范

强大的IDE支持

是Angular2的支付语言

 

4858美高梅 1

二 、搭建TypeScript开发环境

贰 、搭建TypeScript开发环境

Unsplash

compiler(编译器)

作用:能将TypeScript编译成JavaScript。

compiler(编译器)

作用:能将TypeScript编译成JavaScript。

4858美高梅 2

TypeScript 是一种由微软支付的任性和开源的编制程序语言,它看成 JavaScript
的三个超集,扩大了JavaScript
的语法,而且精神上向那些语言添加了可选的静态类型和依照类的面向对象编制程序,使得这一门脚本语言有了编写翻译的概念

1.安装Node.js

1.安装Node.js

ECMA Script 5 是由 JavaScript 所达成的,而 TypeScript 则是依照 ECMA
Script 6,ES6 的多多新特点及语法都能直接在 TypeScript 中落到实处,因为 ES6
正是由 TypeScript 所达成的,而小编辈所熟谙的 Angular 2 也是使用 TypeScript
开发的

2.用npm包管理工科具下载TypeScript包并在大局环境下安装

打开cmd窗口输入

npm install -g typescript

4858美高梅 3

2.用npm包管理工科具下载TypeScript包并在大局环境下安装

开辟cmd窗口输入

npm install -g typescript

4858美高梅 4

4858美高梅 5

1. TypeScript 开发条件

3.选择WebStorm自动编写翻译

Settings -> Languaes & Frameworks -> TypeScript 中Enable
TypeScript Compiler打钩。

4858美高梅 6

4858美高梅 7

 

3.运用WebStorm自动编写翻译

Settings -> Languaes & Frameworks -> TypeScript 中Enable
TypeScript Compiler打钩。

4858美高梅 8

4858美高梅 9

 

Callback Hell

近期多数浏览器仅帮忙 ES5,还未曾完全辅助 ES6,所以大家须要把
TypeScript 代码编辑成 ES5 的 JavaScript
代码,在此地给大家提供二种的编写翻译形式,一种是选用 Online Complier,链接戳
>>>TypeScript
Playground

③ 、字符串新特色

③ 、字符串新特点

第三,向自个儿的偶像 Anders
Hejlsberg
致敬!
本文是依据
慕课网 的
TypeScript入门
的摄像教程整理的摘要,详情请访问原来的小说摄像。
完全消息参见官方文书档案 TypeScript
Documentation
的基本概念及常用语法,TypeScript学习笔记。源码:TypeScript 在 GitHub
的仓库

而另一种办法就是使用当地 Complier,通过 Node.js 包管理器 npm 安装
TypeScript 的 npm 包,然后大家就足以在编辑器中编译 TypeScript
文件了,尽管有诸多的 IDE 都能写 TS,但最棒的开发工具依然微软开支的 VS
Code,神速键 Control + ` 打开终端,键入以下命令即可到位安装

1.用”`”符号完结多行字符串(键盘上1边际的不行键 4858美高梅 10

4858美高梅 11

 

1.用”`”符号落成多行字符串(键盘上1旁边的十三分键 4858美高梅 12

4858美高梅 13

 

【目的】
正文书档案目标是让熟谙 JavaScript 的校友急迅明白 TypeScript
特色,准确新闻请务必参考所使用版本 TypeScript 对应的官方文书档案。

4858美高梅 14

2.字符串模板

TypeScript:

var myname = "zzz";

var getName = function () {
    return "zzz";
}

console.log(`hello ${myname}`)
console.log(`hello ${getName()}`)

 

 JavaScript:

var myname = "zzz";
var getName = function () {
    return "zzz";
};
console.log("hello " + myname);
console.log("hello " + getName());

相比较双引号尤其直观,在编写制定html代码时丰富充裕好用!

 

2.字符串模板

TypeScript:

var myname = "zzz";

var getName = function () {
    return "zzz";
}

console.log(`hello ${myname}`)
console.log(`hello ${getName()}`)

 

 JavaScript:

var myname = "zzz";
var getName = function () {
    return "zzz";
};
console.log("hello " + myname);
console.log("hello " + getName());

对待双引号特别直观,在编排html代码时11分可怜好用!

 

[TOC]

TypeScript 安装进程

3.机动拆分字符串

当您用字符串模版去调用二个艺术的时候,字符串模版中的表明式的值会自动赋给被调用方法的参数。

 TypeScript:

var nameStr = "zzz";
var age = 18;
function add(temp, name, age){
    console.log(temp);
    console.log(name);
    console.log(age);
}
add`my name is ${nameStr}, i'm ${age}`;

 

JavaScript:

var nameStr = "zzz";
var age = 18;
function add(temp, name, age) {
    console.log(temp);
    console.log(name);
    console.log(age);
}
(_a = ["my name is ", ", i'm ", ""], _a.raw = ["my name is ", ", i'm ", ""], add(_a, nameStr, age));
var _a;

 

3.电动拆分字符串

当您用字符串模版去调用二个方法的时候,字符串模版中的表明式的值会自动赋给被调用方法的参数。

 TypeScript:

var nameStr = "zzz";
var age = 18;
function add(temp, name, age){
    console.log(temp);
    console.log(name);
    console.log(age);
}
add`my name is ${nameStr}, i'm ${age}`;

 

JavaScript:

var nameStr = "zzz";
var age = 18;
function add(temp, name, age) {
    console.log(temp);
    console.log(name);
    console.log(age);
}
(_a = ["my name is ", ", i'm ", ""], _a.raw = ["my name is ", ", i'm ", ""], add(_a, nameStr, age));
var _a;

 

壹 、开发条件
  • 本地

    • 编译环境设置:

    npm install -g typescript
    
    • TypeScript REPL 及进行环境设置:

    npm install -g ts-node
    
  • 在线:TypeScript
    Playground

2. 字符串新特色

④ 、参数新特征

④ 、参数新天性

4858美高梅 ,二 、变量注解及功能域

TypeScript能够利用包容JavaScript的var宣示格局,也能够运用letlet解决了JavaScript臭名昭著的效用域难题。代码如下:

// TypeScript,使用 var 声明变量,不支持块级作用域
var n = 1;
{
    var n = 200;
    console.log('块级变量 n 值:' + n);
}
console.log('全局变量 n 值:' + n);

被编写翻译成的 JavaScript,与地点的 TypeScript 一样:

// 使用 var 定义变量的 TypeScript 编译成的 JavaScript
var n = 1;
{
    var n = 200;
    console.log('块级变量 n 值:' + n);
}
console.log('全局变量 n 值:' + n);

愿意的实践结果为:

块级变量 n 值:200
全局变量 n 值:1

实质上履行结果为:

块级变量 n 值:200
全局变量 n 值:200

若是采纳 TypeScript 的 let 证明变量:

// TypeScript,使用 let 声明变量,不支持块级作用域
let n = 1;
{
    let n = 200;
    console.log('块级变量 n 值:' + n);
}
console.log('全局变量 n 值:' + n);

被编写翻译成的 JavaScript:

// 使用 let 定义变量的 TypeScript 编译成的 JavaScript
var n = 1;
{
    var n_1 = 200;
    console.log('块级变量 n 值:' + n_1);
}
console.log('全局变量 n 值:' + n);

察觉编译器为块内变量重新命名,执行结果符合预期:

块级变量 n 值:200
全局变量 n 值:1

TypeScript 扶助与 JavaScript 大概一模一样的数据类型,而在 TypeScript
中,字符串扩张了多行字符串、模板字符串、自动拆分字符串的新天性

1.参数类型:在参数名称前面使用冒号来钦定参数的类型。(与ActionScript类似)

中央变量类型与js一致

var myname: string = "zzz";

var alias: any = "haha";

var man: boolean = true;

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

class Person{
    name:string;
    age:number;
}

var zhangsan:Person = new Person();
zhangsan.name = "zhangsan";
zhangsan.age = 18;

 

1.参数类型:在参数名称后边使用冒号来钦命参数的档次。(与ActionScript类似)

基本变量类型与js一致

var myname: string = "zzz";

var alias: any = "haha";

var man: boolean = true;

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

class Person{
    name:string;
    age:number;
}

var zhangsan:Person = new Person();
zhangsan.name = "zhangsan";
zhangsan.age = 18;

 

三 、字符串新特点
  • 多行字符串,使用反引号 \
    进行引用,解决 JavaScript 中使用\n+` 拼接的分神

var str = `line 1
line 2
...
line n`;
  • 字符串模板,在 \ ` 引用的字符串内,使用 ${变量/函数}
    格局,间接引入执行结果

var content = 'abc';
console.log(`<div>
${content}
</div>`);
  • 自行拆分字符串

调用时,自动将字符串中的表明式值作为参数字传送入函数

function myTest(template, param1, param2) {
    console.log(template);
    console.log(param1);
    console.log(param2);
}

myTest`测试字符串分割,传入参数 ${111} and ${222} ,再看结果`

从执行结果看,template
是二个数组,这些数组是被字符串中的多少个表明式给分割成段的结果。

在 JavaScript 中,字符串换行将会报错,而 TypeScript
引入了多行字符串的新特点,所以在字符串中换行,将不会引起报错,但必要小心的是,字符串须求运用反引号
` ,而不是应用 "'

2.默许参数

措施中的参数能够添加暗许值,与别的强语言一样,不多说了。

 

2.暗中认可参数

主意中的参数能够添加暗中同意值,与其他强语言一样,不多说了。

 

四、函数
  • 参数类型

function testParam(sUserName: string, nUserAge: number): string {
    var ret = `User name: ${sUserName}
User age: ${nUserAge}`;
    return ret;
}

var s: string = testParam('bahb', 2);
console.log(s);
  • 参数暗许值

含蓄私下认可值的参数,必须放在参数列表最终

function testArgumentDefaultValue(arg1, arg2, arg3 = 'arg 3 default value') {
    console.log(arg1);
    console.log(arg2);
    console.log(arg3);
    console.log('===============');
}
testArgumentDefaultValue('1', '2', '3');
testArgumentDefaultValue('5', '6');
  • 轻易参数个数

function func(...args) {
    args.forEach(function (e) {
        console.log(e);
    });
    console.log('--------------');
}

func(1, 2, 3);
func(4, 5, 6, 7, 8);

4858美高梅 15

3.可选参数

办法中的参数能够显示为可选(如下b参数,”xxx”会传给a)

务必评释在必选参数的背后

function test(a: string, b?: string, c: string = ""){
    console.log(a);
    console.log(b);
    console.log(c);
}

test("xxx");

 

3.可选参数

主意中的参数能够突显为可选(如下b参数,”xxx”会传给a)

总得注脚在必选参数的末端

function test(a: string, b?: string, c: string = ""){
    console.log(a);
    console.log(b);
    console.log(c);
}

test("xxx");

 

⑤ 、析构表明式

用于将指标、数组中的元素,拆分到变量中。

  • 析构表达式(基本)

var {aa, bb} = {
    aa: 11,
    bb: 22
}

console.log(aa);
console.log(bb);
  • 析构表明式(带别称)

var {aa: aa_alias, bb: bb_alias, cc:{v2}} = {
    aa: 11,
    bb: 22,
    cc: {
        v1: 333,
        v2: 444
    }
}

console.log(aa_alias);
console.log(bb_alias);
console.log(v2);
  • 析构表明式(数组)

数组,通过一贯写逗号 , 来空过成分,通过 ...参数
的款式,读取剩余成分形成数组。

var [n1, n2, , ...others] = [1, 2, 3, 4, 5];
console.log(n1);
console.log(n2);
//注意通过逗号空过了第三个元素
console.log(others);

多行字符串

伍 、函数新天性

五 、函数新特征

6、箭头表明式

箭头表明式 首要用于:

  1. 用作匿名函数使用
  2. 缓解匿名函数中的 this 问题
  • 贰个参数

var myFunc = arg1 => console.log(arg1);
myFunc('aaa');
  • 三个参数

var myFunc = (arg1, arg2) => arg1 + arg2;
console.log(myFunc(111, 222));
  • 多行

var myFunc = (arg1, arg2) => {
    var sum = arg1 + arg2;
    console.log(sum);
    return sum;
}
console.log(`exec result: ${myFunc(111, 222)}`);
  • 解决 this 问题(重要)

本来 JavaScript 的书写情势:

var MyClass = function (name) {
    this.name = name;
    this.counter = 0;
    setInterval(function () {
        this.counter++;
        console.log(this.name + this.counter);
    }, 1000);
}

var obj = new MyClass('bahb_');

盼望每间隔1秒,陆续输出bahb_1、bahb_2…,实际上没有取到值。
由来是由于通过 new 之后,this 的代表产生了变通,导致取不到值。
直接把 MyClass 作为函数调用,

MyClass('bahb_');

倒是能够获得健康的结果,原因是函数作为头号对象,this
的代表不会变,不过那种格局无法满足急需创造对象的光景。

因而箭头表明式来化解难点:

var MyClass = function (name) {
    this.name = name;
    this.counter = 0;
    setInterval(() => {
        this.counter++;
        console.log(this.name + this.counter);
    }, 1000);
}

var obj = new MyClass('bahb_');

4858美高梅 16

1. Rest and Spread

…:用来声称任意数量的措施参数,与强类型语言的语法相似

TypeScript:

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

func1(1, 2, 3);

func1(5, 5, 5, 5, 5, 5);

 

JavaScript:

function func1() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    args.forEach(function (arg) {
        console.log(arg);
    });
}
func1(1, 2, 3);
func1(5, 5, 5, 5, 5, 5);

 

1. Rest and Spread

…:用来声称任意数量的方式参数,与强类型语言的语法相似

TypeScript:

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

func1(1, 2, 3);

func1(5, 5, 5, 5, 5, 5);

 

JavaScript:

function func1() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    args.forEach(function (arg) {
        console.log(arg);
    });
}
func1(1, 2, 3);
func1(5, 5, 5, 5, 5, 5);

 

柒 、循环遍历集合

JavaScript 中循环遍历方法的题材:

  • for in:不仅遍历数组中的元素,还会遍历到别的属性
  • forEach:通过回调执行遍历方法,不能够通过 break 截止遍历

// TypeScript 的 for of 循环
let arr = [1, 2, 3, 4];
arr.desc = 'abc'; // 使用 for of,属性不会被遍历到
for (let x of arr) {
    console.log(x);
}

运作结果

2.generator函数

决定函数的进行进度,手工业暂停和回复代码执行。

function*:创建generator函数

yield:设置断点

实施函数后赋值于某一变量,并采取next()方法使这次调用在下贰个yield处暂停。

function* doSomething(){
    console.log("start");

    yield;

    console.log("finish");
}

var fun1 = doSomething();

fun1.next();

 

2.generator函数

控制函数的执行进程,手工业暂停和死灰复燃代码执行。

function*:创建generator函数

yield:设置断点

进行函数后赋值于某一变量,并运用next()方法使此次调用在下3个yield处暂停。

function* doSomething(){
    console.log("start");

    yield;

    console.log("finish");
}

var fun1 = doSomething();

fun1.next();

 

八、泛型(Generic)

那里只举例表达下基本概念,实际泛型的使用场景会广泛得多。

let myArr: Array<string> = [];
myArr.push('aa');
myArr.push('bb');
myArr.push(123); // 数据类型不一致,报错
console.log(myArr);

抄个法定的 Demo 吓吓人:

class Greeter<T> {
    greeting: T;
    constructor(message: T) {
        this.greeting = message;
    }
    greet() {
        return this.greeting;
    }
}

let greeter = new Greeter<string>("Hello, world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
    alert(greeter.greet());
}

document.body.appendChild(button);

模板字符串能够定义多行文本以及内嵌表明式,同样的,模板字符串也急需选取反引号
`,并以 ${ expr } 那种样式嵌入表明式

3.析构表明式

3.析构表明式

九 、面向对象

4858美高梅 17

3.1 针对对象

功能:自动将对象中的字段每个拆分。

利用:var {对象中字段名:别称,对象中字段名:别称…} = 对象。

基于“{}”中的名字(或别称)新建对应变量,并把相应对象中的相应字段值赋予该变量。

 

TypeScript:

function getStock(){
    return{
        code:"IBM",
        price:{
            price1: 200,
            price2: 400
        }
    }
}

var {code: a, price, price: {price1, price2}} = getStock();

console.log(a);
console.log(price);
console.log(price1);
console.log(price2);

 

等同于

JavaScript:

function getStock() {
    return {
        code: "IBM",
        price: {
            price1: 200,
            price2: 400
        }
    };
}
var _a = getStock(), a = _a.code, price = _a.price, _b = _a.price, price1 = _b.price1, price2 = _b.price2;
console.log(a);
console.log(price);
console.log(price1);
console.log(price2);

 

3.1 针对对象

效用:自动将对象中的字段各个拆分。

接纳:var {对象中字段名:别称,对象中字段名:别称…} = 对象。

据他们说“{}”中的名字(或外号)新建对应变量,并把相应对象中的相应字段值赋予该变量。

 

TypeScript:

function getStock(){
    return{
        code:"IBM",
        price:{
            price1: 200,
            price2: 400
        }
    }
}

var {code: a, price, price: {price1, price2}} = getStock();

console.log(a);
console.log(price);
console.log(price1);
console.log(price2);

 

等同于

JavaScript:

function getStock() {
    return {
        code: "IBM",
        price: {
            price1: 200,
            price2: 400
        }
    };
}
var _a = getStock(), a = _a.code, price = _a.price, _b = _a.price, price1 = _b.price1, price2 = _b.price2;
console.log(a);
console.log(price);
console.log(price1);
console.log(price2);

 

① 、类定义、继承、访问权限控制符
class Animal {
    // 构造函数,当构造函数传入的参数加上了“访问权限控制符”,则同时会声明同名类属性,并赋值
    constructor(public name: string) { }
    protected log(arg) {
        console.log(arg);
    }
    move(distanceInMeters: number = 0) {
        this.log(`${this.name} moved ${distanceInMeters}m.`);
        this.log('==============');
    }
}

class Snake extends Animal {
    constructor(name: string) {
        // 调用父类构造器
        super(name);
    }
    move(distanceInMeters = 5) {
        this.log("Slithering...");
        // 通过 super 调用父类方法
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        this.log("Galloping...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

模板字符串

3.2 针对数组

成效:自动将数组中的字段每一个拆分。

使用:var {别名,别名…} = 数组。

根据“[]”中的外号新建对应变量,并把数组中对应地点的值赋予该变量。

 

TypeScript:

var array1 = [1, 2, 3, 4];

var [num1, num2] = array1;

var [,,num3, num4] = array1;

var [num, ...others] = array1;

consolo.log(num);//1
console.log(num1);//1
console.log(num2);//2
console.log(num3);//3
console.log(num4);//4
console.log(others);//[2, 3, 4]

 

JavaScript:

var array1 = [1, 2, 3, 4];
var num1 = array1[0], num2 = array1[1];
var num3 = array1[2], num4 = array1[3];
var num = array1[0], others = array1.slice(1);
console.log(num); //1
console.log(num1); //1
console.log(num2); //2
console.log(num3); //3
console.log(num4); //4
console.log(others);

 

3.2 针对数组

效益:自动将数组中的字段每一个拆分。

使用:var {别名,别名…} = 数组。

根据“[]”中的外号新建对应变量,并把数组中对应地方的值赋予该变量。

 

TypeScript:

var array1 = [1, 2, 3, 4];

var [num1, num2] = array1;

var [,,num3, num4] = array1;

var [num, ...others] = array1;

consolo.log(num);//1
console.log(num1);//1
console.log(num2);//2
console.log(num3);//3
console.log(num4);//4
console.log(others);//[2, 3, 4]

 

JavaScript:

var array1 = [1, 2, 3, 4];
var num1 = array1[0], num2 = array1[1];
var num3 = array1[2], num4 = array1[3];
var num = array1[0], others = array1.slice(1);
console.log(num); //1
console.log(num1); //1
console.log(num2); //2
console.log(num3); //3
console.log(num4); //4
console.log(others);

 

2、接口

福寿无疆类必须达成接口中表明的每种方法

interface IPerson {
    eat();
    work();
}

class Person implements IPerson {
    eat() { }; // 不实现该方法会报错
    work() { }; // 不实现该方法会报错
}

4858美高梅 18

陆 、表明式和巡回

陆 、表明式和循环

十、模块(Module)

每个 .ts 文件正是1个模块,通过 export 来对表面模块暴光成分,通过
import 来引入模块。
举例:utility.ts 输出,main.ts 引用 utility.ts 中的输出

// Module Utility: utility.ts

let str: string = 'abc';

function add(arg1, arg2) {
    return arg1 + arg2;
}

class MyClass {
    doSth() { }
}

export {str};
export {add};
export {MyClass};

// Module Main: main.ts

import {add} from "./utility";

let ret = add(2, 3);
console.log(ret);

或者

// Module Main: main.ts

import * as myUtility from "./utility";

let ret = myUtility.add(2, 3);
console.log(ret);

运作结果

1. 箭头函数(Lambda表明式)

定义:用来声称匿名函数,化解守旧匿名函数的this指针难题。

PS:跟Java和C#中的Lambda表明式大约相同。

作用:匿名函数的一种评释格局。

 

TypeScript:

var sum = (arg1, arg2) => arg1 + arg2;
var sum1 = arg1 =>{
    return arg1 + 10;
}

 

JavaScript:

var sum = function (arg1, arg2) { return arg1 + arg2; };
var sum1 = function (arg1) {
    return arg1 + 10;
};

 

1. 箭头函数(Lambda表明式)

定义:用来声称匿名函数,消除守旧匿名函数的this指针难点。

PS:跟Java和C#中的Lambda表明式大约相同。

作用:匿名函数的一种注脚情势。

 

TypeScript:

var sum = (arg1, arg2) => arg1 + arg2;
var sum1 = arg1 =>{
    return arg1 + 10;
}

 

JavaScript:

var sum = function (arg1, arg2) { return arg1 + arg2; };
var sum1 = function (arg1) {
    return arg1 + 10;
};

 

十一、注解(Annotation)

给框架或IDE用的辨证,比如:使用有个别类时应该而且引入哪些页面等等,要求时具体看手册即可。

多行字符串和模板字符串的结合

2. forEach、for in、for of

forEach:不会遍历数组中的字段(js中数组可以有质量字段)、循环中不可break。

for
in:
会遍历数组中的字段、循环遍历的是相会中键值对的键(数组的下标为键,下标对应的值为值)。

for of:不会遍历数组中的字段。

 

TypeScript:

var myArray = [1, 2, 3, 4];
myArray.desc = "xxx";

myArray.forEach(value => console.log(value));//1 2 3 4

for(var n in myArray){//n为下标(集合中键值对的键)
    console.log(myArray[n]);
}//1 2 3 4 xxx

for(var n of myArray){//n为下标(集合中键值对的键)
    console.log(myArray[n]);
}//1 2 3 4

 

JavaScript:

var myArray = [1, 2, 3, 4];
myArray.desc = "xxx";
myArray.forEach(function (value) { return console.log(value); }); //1 2 3 4
for (var n in myArray) {
    console.log(myArray[n]);
} //1 2 3 4 xxx
for (var _i = 0, myArray_1 = myArray; _i < myArray_1.length; _i++) {
    var n = myArray_1[_i];
    console.log(myArray[n]);
} //1 2 3 4

 

2. forEach、for in、for of

forEach:不会遍历数组中的字段(js中数组可以有品质字段)、循环中不可break。

for
in:
会遍历数组中的字段、循环遍历的是汇合中键值对的键(数组的下标为键,下标对应的值为值)。

for of:不会遍历数组中的字段。

 

TypeScript:

var myArray = [1, 2, 3, 4];
myArray.desc = "xxx";

myArray.forEach(value => console.log(value));//1 2 3 4

for(var n in myArray){//n为下标(集合中键值对的键)
    console.log(myArray[n]);
}//1 2 3 4 xxx

for(var n of myArray){//n为下标(集合中键值对的键)
    console.log(myArray[n]);
}//1 2 3 4

 

JavaScript:

var myArray = [1, 2, 3, 4];
myArray.desc = "xxx";
myArray.forEach(function (value) { return console.log(value); }); //1 2 3 4
for (var n in myArray) {
    console.log(myArray[n]);
} //1 2 3 4 xxx
for (var _i = 0, myArray_1 = myArray; _i < myArray_1.length; _i++) {
    var n = myArray_1[_i];
    console.log(myArray[n]);
} //1 2 3 4

 

十贰 、类型定义文件(*.d.ts)

类型定义文件 用于描述3个库中所定义的花色
类型定义文件介绍
类型定义文件使用

类型定义文件从此处找:DefinitelyTyped

4858美高梅 19

DefinitelyTyped – The repository for high quality TypeScript type
definitions

可能访问 DefinitelyTyped 在 GitHub
的仓库
类型定义文件招来工具

4858美高梅 20

7、面向对象天性

与Java差不多相同

 

TypeScript:

class Person{
    sex;
    //构造函数
    constructor(public name:string){
    }

    eat(){
        console.log("im eating");
    }
}

var p1 = new Person("batman");
p1.sex = true;
p1.eat();

var p2 = new Person("superman");
p2.sex = true;
p2.eat();

 

JavaScript:

var Person = (function () {
    //构造函数
    function Person(name) {
        this.name = name;
    }
    Person.prototype.eat = function () {
        console.log("im eating");
    };
    return Person;
}());
var p1 = new Person("batman");
p1.sex = true;
p1.eat();
var p2 = new Person("superman");
p2.sex = true;
p2.eat();

 

7、面向对象天性

与Java大致相同

 

TypeScript:

class Person{
    sex;
    //构造函数
    constructor(public name:string){
    }

    eat(){
        console.log("im eating");
    }
}

var p1 = new Person("batman");
p1.sex = true;
p1.eat();

var p2 = new Person("superman");
p2.sex = true;
p2.eat();

 

JavaScript:

var Person = (function () {
    //构造函数
    function Person(name) {
        this.name = name;
    }
    Person.prototype.eat = function () {
        console.log("im eating");
    };
    return Person;
}());
var p1 = new Person("batman");
p1.sex = true;
p1.eat();
var p2 = new Person("superman");
p2.sex = true;
p2.eat();

 

多行字符串和模板字符串

模块

定义:能够协助开发者将戴安分割为可选取的单元。开发者能够自个儿说了算将模块中的哪些类、方法或变量暴表露来供外部使用,哪些财富只在模块Nelly用。

 

模块a:

4858美高梅 21

 

模块b:

引用模块a,能够运用模块a中用export注脚的类、方法和变量。

4858美高梅 22

 

模块

定义:能够补助开发者将戴安分割为可采取的单元。开发者可以友善说了算将模块中的哪些类、方法或变量暴表露来供外部使用,哪些能源只在模块内选取。

 

模块a:

4858美高梅 23

 

模块b:

引用模块a,能够动用模块a中用export评释的类、方法和变量。

4858美高梅 24

 

4858美高梅 25

运行结果

电动拆分字符串,当您使用字符串模板调用方法的时候,其字符串模板表达式里的值会赋给自动调用方法的参数

4858美高梅 26

自动拆分字符串

4858美高梅 27

运作结果

3. 参数新特点

大家接下去介绍 TypeScript 中的三种档次注脚,分别是字符串 String、数字
Number、布尔值 Boolean、几体系型 Any、没有项目
Void,只需在参数名称后边用冒号来内定参数的花色即可

4858美高梅 28

参数类型

还有一种自定义类型,大家可经过 class 模板来定义大家所要求的门类

4858美高梅 29

自定义类型

咱俩恰好是因而在变量注明的时候钦赐了暗中认可的参数,同样的,咱们在调用方法传参时,也能一如既往使用等号来钦命参数的暗中认可值,可是供给专注的是,申明默许值的参数要放在最终

4858美高梅 30

暗许参数

4858美高梅 31

运作结果

在艺术的参数表明后边用问号来声明此参数为可选参数,如
function niangao(a: string, b?: number, c: string = "Niangao") {}
那么在该措施中,参数 b 便是可选的,在调用的时候就足以不传 b
参数,在运用可选参数时,须要注意可选参数没传的景况,还供给留意的是,在参数的各其中,必选参数无法在可选参数的前边,约等于说,可选参数要么放在最后,要么前面接可选参数,或有带默许值的参数

4858美高梅 32

可选参数

4858美高梅 33

运维结果

4. 函数新特点

Rest and Spread 操作符 ...:用来声称任意数量的情势参数

4858美高梅 34

Rest and Spread 操作符

4858美高梅 35

运转结果

Rest and Spread 操作符还有一个扭曲的用法,纵然在 Complier
中有会报错提醒,但却是能够得逞运营的

4858美高梅 36

Rest and Spread 操作符反过来的用法

先是次调用,由于方法定义的 3 个参数,而 args 长度为
2,所以调用后措施中第 3 个为 undefine,第1次调用,由于方法唯有 3个参数,args1 长度为 4,所以最终3个参数被忽略了

4858美高梅 37

运维结果

Generator 函数:控制函数的推行进度,手工业暂停和还原代码执行,通过利用
yield 关键字,来落到实处函数暂停,通过 .next() 的法子来使函数复苏执行

4858美高梅 38

Generator 函数

4858美高梅 39

运维结果

Destructuring 析构表达式:通过表明式将对象或数组拆解成自由数量的变量

4858美高梅 40

Destructuring 析构表明式 对象_1

4858美高梅 41

Destructuring 析构表明式 对象_2

4858美高梅 42

运维结果

亟需专注的是,对象的析构表明式是用 {}括出来,而数组则是运用 []
括起来的

4858美高梅 43

Destructuring 析构表明式 数组_1

4858美高梅 44

运行结果

4858美高梅 45

Destructuring 析构表达式 数组_2

4858美高梅 46

运维结果

4858美高梅 47

Destructuring 析构表达式 数组_3

4858美高梅 48

Destructuring 析构表达式 数组_4

4858美高梅 49

运作结果

5. 箭头表达式

箭头表达式是用来声称匿名函数,化解守旧匿名函数的 this 指针难题

4858美高梅 50

箭头表明式_1

4858美高梅 51

箭头表达式_2

4858美高梅 52

箭头表明式_3

4858美高梅 53

箭头表明式_4

4858美高梅 54

运作结果

4858美高梅 55

箭头表明式_5

4858美高梅 56

运作结果

6. for of 循环

在 JavaScript 中,大家利用的循环一般是 forEach 以及 for
in,我们如故是先经过代码来看望那两种循环的特点

4858美高梅 57

forEach 循环

4858美高梅 58

运行结果

forEach
循环将数组中的全体因素都打字与印刷了出去,但从没打字与印刷数组描述,接下去大家看下
for in 循环

4858美高梅 59

for in 循环

4858美高梅 60

运营结果

那边只是出口数组的目录(即键名),假诺想要打字与印刷出数组成分及描述内容,大家能够透过打印myArray[n] 这种方法来输出

4858美高梅 61

运作结果

TypeScript 中引入了一种新的轮回格局—— for of 循环,直接上代码

4858美高梅 62

for of 循环_1

4858美高梅 63

运转结果

能够看到,同样是 console.log(n);,for in 遍历的是数组的所引,而 for of
遍历的是数组成分值,除外,for of
还是能够依照某些条件终止循环,其他两者均不能够止住

4858美高梅 64

for of 循环_2

4858美高梅 65

运行结果

别的,for of 循环还可以循环字符串

4858美高梅 66

for of 循环_3

4858美高梅 67

运作结果

End of File

作文进度中冒出谬误或不妥之处在所难免,希望大家能够给予指正,防止误导越来越多个人,最终,如若您以为自个儿的稿子写的还可以,希望能够点一下喜欢关注,为了本人能早日成为简书优异小编献上一发助攻吧,多谢!^
^

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有