TypeScript : 环境安装及使用

最新推荐文章于 2024-07-29 19:57:51 发布

mazaiting

最新推荐文章于 2024-07-29 19:57:51 发布

阅读量730

点赞数

本文链接：https://blog.csdn.net/mazaiting/article/details/90387100

版权

1). TypeScript官网

2). Node

检测版本

npm --verison

设置镜像源

# 设置镜像源
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

安装typescript

npm install -g typescript

编译

tsc filename.ts

3). 语法特性

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

4). 使用

创建index.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
    </body>
</html>

创建index.ts文件

alert('Hello world in TypeScript!');

编译index.ts文件

tsc index.ts

运行改命令后再ts文件同级目录生成index.js文件

查看效果

效果.png

5). 类型批注

function area(shape: string, width: number, height: number): string {
    var area = width * height;
    return "I am a " + shape + " with an area of " + area + " cm squred";
}

document.write(area('rectangle', 30, 15));

6). 接口

interface Shape {
    name: string,
    width: number,
    height: number,
    color?: string
}

function area(shape: Shape): string {
    var area = shape.width * shape.height;
    return "I am a " + shape.name + " with an area of " + area + " cm squred";
}

document.write(area({name: 'rectangle', width: 30, height: 15}));

7). 箭头函数表达式（lambda表达式）

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

shape.popup();

8). 类

class Shape {
  area: number;
  // 私有化
  private color: string;
  // name 公有化
  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); // 未定义

9). 继承

class Shape {
  area: number;
  // 私有化
  private color: string;
  // name 公有化
  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.";
  }
}

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());