00、TypeScript 初了解

2019年5月22日 198次阅读 来源: 夜幕小草

官网：

http://www.runoob.com/manual/gitbook/TypeScript/_book/

00、TypeScript简介
TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。

类 Classes
接口 Interfaces
模块 Modules 
类型注解 Type annotations
编译时类型检查 Compile time type checking 
Arrow 函数 (类似 C# 的 Lambda 表达式)

JavaScript 与 TypeScript 的区别
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

01、npm安装

$ npm install -g typescript

安装完成后我们就可以使用 TypeScript 编译器，名称叫 tsc，可将编译结果生成 js 文件。
要编译 TypeScript 文件，可使用如下命令：

tsc filename.ts

02、编译与运行
首先，我们创建一个 index.html 文件：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Learning TypeScript</title>
</head> 
<body> 
    <script src="hello.js"></script>
</body> 
</html>

创建 hello.ts 文件， *.ts 是 TypeScript 文件的后缀，向 hello.ts 文件添加如下代码：

alert('hello world in TypeScript!');

接下来，我们打开命令行，使用 tsc 命令编译 hello.ts 文件：

$ tsc hello.ts

然后打开index.html文件
03、类型批注

function Add(left: number, right: number) {
    return left + right;
}
var sum = Add(12, 26)
console.log(sum)
document.body.innerHTML = sum

04、接口

interface Shape {
    name: string;
    width: number;
    height: number;
    color?: string;
}
function area(shape: Shape) {
    var area = shape.width * shape.height
    return '面积' + area
}
console.log(area({width: 50, height: 80}))

05、箭头函数表达式
ambda表达式 ()=>{something}或()=>something 相当于js中的函数,它的好处是可以自动将函数中的this附加到上下文中

var shape = {
    name: "rectangle",
    popup: function() {
        console.log('This inside popup(): ' + this.name);
        setTimeout(function() {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);
 
    }
};
shape.popup();

《00、TypeScript 初了解》 image.png

接下来我们使用 TypeScript 的箭头函数。把 function() 替换为 () =>：

var shape = {
    name: "rectangle",
    popup: function() {
 
        console.log('This inside popup(): ' + this.name);
 
        setTimeout( () => {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);
 
    }
};
 
shape.popup();

《00、TypeScript 初了解》 image.png

05、类
TypeScript支持集成了可选的类型批注支持的ECMAScript 6的类。

class Shape {
    area: number;
    color: string;
    constructor(name: string, width: number, height: number){
        this.area = width*height;
        this.color = 'pink';
    }
    shoutout() {
         return "I'm " + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
    }
}
var square = new Shape('square', 30, 30)
console.log( square.shoutout() );
console.log( 'Area of Shape: ' + square.area );
console.log( 'Name of Shape: ' + square.name );
console.log( 'Color of Shape: ' + square.color );
console.log( 'Width of Shape: ' + square.width );
console.log( 'Height of Shape: ' + square.height );

接下来，我们添加 public 和 private 访问修饰符。Public 成员可以在任何地方访问， private 成员只允许在类中访问。
接下来我们修改以上代码，将 color 声明为 private，构造函数的参数 name 声明为 public：

class Shape {
    area: number;
    private color: string;
    constructor(public name: string, width: number, height: number){
        this.area = width*height;
        this.color = 'pink';
    }
    shoutout() {
         return "I'm " + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
    }
}
var square = new Shape('square', 30, 30)
console.log( square.shoutout() );
console.log( 'Area of Shape: ' + square.area );
console.log( 'Name of Shape: ' + square.name );
console.log( 'Color of Shape: ' + square.color );
console.log( 'Width of Shape: ' + square.width );
console.log( 'Height of Shape: ' + square.height );

《00、TypeScript 初了解》 image.png

06、继承
最后，我们可以继承一个已存在的类并创建一个派生类，继承使用关键字 extends。
接下来我们在 class.ts 文件末尾添加以下代码，如下所示：

class Shape3D extends Shape {
 
    volume: number;
 
    constructor ( public name: string, width: number, height: number, length: number ) {
        super( name, width, height );
        this.volume = length * this.area;
    };
 
    shoutout() {
        return "I'm " + this.name +  " with a volume of " + this.volume + " cm cube.";
    }
 
    superShout() {
        return super.shoutout();
    }
}
 
var cube = new Shape3D("cube", 30, 30, 30);
console.log( cube.shoutout() );
console.log( cube.superShout() );

派生类 Shape3D 说明：
Shape3D 继承了 Shape 类, 也继承了 Shape 类的 color 属性。
构造函数中，super 方法调用了基类 Shape 的构造函数 Shape，传递了参数 name, width, 和 height 值。 继承允许我们复用 Shape 类的代码，所以我们可以通过继承 area 属性来计算 this.volume。
Shape3D 的 shoutout() 方法重写基类的实现。superShout() 方法通过使用 super 关键字直接返回了基类的 shoutout() 方法。
其他的代码我们可以通过自己的需求来完成自己想要的功能

《00、TypeScript 初了解》 image.png

    原文作者：夜幕小草
    原文地址: https://www.jianshu.com/p/f390675747d2
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞