TypeScript 基础教程：从环境搭建到类型系统全解析

简介

TypeScript 是由微软公司开发的开源编程语言，其名称中 Type 代表类型，意味着在 JavaScript 的基础上增加了类型支持。

通常简称为 TS，它是 JavaScript 的超集。

安装

Node.js 或浏览器环境仅能识别 JS 代码，无法直接运行 TS 代码。因此，我们需要将 TS 代码编译转换为 JS 代码，随后才能执行运行操作。

安装命令

npm i -g typescript

yarn global add typescript

TS 包主要用于编译 TS 代码，提供了 tsc 命令，实现从 TS 到 JS 的转换。

检验是否安装成功：

tsc -v

注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限：sudo npm i -g typescript yarn 全局安装：sudo yarn global add typescript

使用原因

类型推演与类型匹配

开发编译时报错

极大程度的避免了低级错误

支持JavaScript最新特性（包含ES6/7/8）

Hello TypeScript

hello.ts文件

function sayHello(person: string) {
    return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));

执行命令

tsc hello.ts

这时候会自动给我们生成一个helio.js文件

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

从上面我们可以看出，我们使用：指定的变量的类型，在自动生成的js文件中却消失了

这是因为TyperScript只会在编译时对类型进行静态检查，如果发现有错误，编译的时候就会进行报错，而在运行时，与普通的Javascript文件一样，不会对类型进行检查

TypeScript类型概述

我们可以细分为两类

JS原有的类型

原始类型，简单类型（number/string/boolean/null/undefined）

特点：简单，这些类型，是完全按照JS中的类型的名称来书写

复杂数据类型（数组，对象，函数等）

TS新增的类型

联合类型：联合类型使用|分割每个类型，取值可以为多种类型的一种

自定义类型（类型别名）

接口：是一个非常灵活的概念，接口一般首字母大写，有的编程语言中会建议接口加上I前缀

元组：元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型，number有个缺点，就是不严谨，该类型中的数组可以出现任意多个数字

字面量类型：字符串字面量类型用来约束取值只能是某几个字符串中的一个

枚举：枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等

任意类型：any表示允许赋值为任意类型

void：函数的返回值类型是void

类型别名

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

使用type创建类型别名

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性

// 基本泛型
let list1: Array<number> = [1, 2, 3]
// 动态泛型
let makeTuple = <T, Y>(x: T, y: Y) => [x, y];
const v1 = makeTuple(1, 'one')
const v2 = makeTuple(true, 1)

到此这篇关于JavaScript Typescript基础使用教程的文章就介绍到这了,更多相关JS Typescript内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

TypeScript 基础入门：安装、配置与核心类型详解

简介

安装