# TypeScript入门

# TypeScript简介

TypeScript是由微软开发的开源的编程语言。TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript，TypeScript可以在任何浏览器上运行。TypeScript是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误。

TypeScprit官网：https://www.typescriptlang.org

# 安装TypeScript

使用npm下载TypeScript

npm install -g typescript

查看版本号

tsc -v

编辑器推荐

Visual Studio Codeopen in new window

# 第一个TypeScript程序

在Visual Studio Code中新建hello.js文件

let message: string="Hello World!";
console.log(message);

将TypeScript转化为JavaScript代码

tsc hello.ts

在hello.ts同一目录下会生成hello.js文件

var message = "Hello World!";
console.log(message);

运行hello.js文件

node hello.js

# TypeScript基础类型

TypeScript能够处理的数据类型有：数字、字符串、结构体、布尔值、数组等，TypeScript支持与JavaScript几乎相同的数据类型。TypeScript可以用let或var进行变量声明，在编程时建议用let进行变量声明。

官方文档https://www.typescriptlang.org/docs/handbook/2/everyday-types.htmlopen in new window

# Number 数字类型

TypeScript里的所有数字都是浮点数，这些浮点数的类型是 number。

let count: number = 6;

# String 字符串类型

可以用单引号'或双引号"表示字符串

反引号“``”可以创建一个字符串模板

let lang: string = "TypeScript";
let month: string = 'July';

# boolean 布尔值类型

布尔值有true和false两种取值。

let flag: boolean = false;

# 数组类型

TypeScript中有两种方式可以定义数组，一种是在元素类型后面加上[]，另一种是使用数组泛型Array<元素类型>

数组中可以存放任意类型的数据

let prime: number[] = [2, 3, 5, 7 ,11];
let even: Array<number> = [2, 4, 6, 8 ,10];

# 元组类型

元组是固定类型固定长度的数组

声明一个元组的时候一定要指明类型

let person: [number, string] = [1024, 'hello']

# 函数类型

TS可以给函数参数添加类型,'?'表示参数可选

let log = function(msg: string,code?: number) {
    console.log(msg);
}

# Any

如果在编程阶段还不清楚变量的类型，可以使用any类型来标记这些变量。

let notSure: any = 2022;
notSure = "bytedance";
notSure = false;

# TypeScript高级类型

• union组合类型
• Nullable可空类型
• Literal预定义类型

# class

TypeScript是面向对象的JavaScript。下面定义了二维平面上的点类，包含了字段、构造函数和方法。

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    coordinate() {
        return "(" + this.x + "," + this.y + ")";
    }
}

let point = new Point(3, 4);

再次实例中使用了new构造了Point类的一个实例，它会调用之前定义的构造函数，创建一个Point类型的新对象，并执行构造函数初始化它。

转化后的JavaScript代码如下。

var Point = /** @class */ (function () {
    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    Point.prototype.greet = function () {
        return "(" + this.x + "," + this.y + ")";
    };
    return Point;
}());
var point = new Point(3, 4);

# JavaScript与TypeScript

TypeScript可以使用JavaScript中的所有代码和编码概念，TypeScript是为了使 JavaScript的开发变得更加容易而创建的。在开发大型项目时，使用TypeScript更加合适，如果开发代码量较小的项目，使用JavaScript更加灵活。