TS基础

news/2024/11/7 21:00:37/

1 写在开始之前,为什么要学习TS

vue2.x中的组件是通过声明的方式传入一系列option,和TypeScript的结合需要通过一些装饰器的方式来做,虽然能实现功能,但是比较麻烦。
而3.0修改了组件的声明方式,改成了类式的写法,这样使得和TypeScript的结合变得很容易。
此外,vue的源码也改用了TypeScript来写。其实当代码的功能复杂之后,必须有一个静态类型系统来做一些辅助管理,如React使用的Flow,Angular使用的TypeScript。现在vue3.0也全面改用TypeScript来重写了,更是使得对外暴露的api更容易结合TypeScript。静态类型系统对于复杂代码的维护确实很有必要。
因此,我觉得TS对于前端从业者也是一个必须的基本技能。
幸运的是学习过java、c++等静态语言,对于TS引入的一些概念不至于晦涩难解。
本篇文章总结TS的基础部分。

2 什么是TS

TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub 上。它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。
它的第一个版本发布于 2012 年 10 月,经历了多次更新后,现在已成为前端社区中不可忽视的力量,不仅在 Microsoft 内部得到广泛运用,而且 Angular2、Vue3 也都使用了 TypeScript 作为开发语言。

3 TS优缺点

优点:

  1. TypeScript 是 JavaScript 的超集,.js 文件可以直接重命名为 .ts 即可
  2. 即使没有显式的定义类型,也能够自动做出类型推论
  3. 可以定义从简单到复杂的几乎一切类型
  4. 即使 TypeScript 编译报错,也可以生成 JavaScript 文件
  5. 兼容第三方库,即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件供 TypeScript 读取
  6. 类型系统增加了代码的可读性和可维护性
  7. 拥有活跃的社区,并且支持ES6规范

不足:

  1. 对没有接触过静态语言的同学有一定的学习成本,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等概念
  2. 短期可能会增加一些开发成本,毕竟要多写一些类型的定义,不过对于一个需要长期维护的项目,TypeScript 能够减少其维护成本
  3. 集成到构建流程需要一些工作量
  4. 可能和一些库结合的不是很完美

安装使用

TypeScript 的命令行工具安装方法如下:
npm install -g typescript
以上命令会在全局环境下安装 tsc 命令,安装完成之后,我们就可以在任何地方执行 tsc 命令了。

编译一个 TypeScript 文件:tsc hello.ts
此时会生成一个编译好的文件 hello.js,TypeScript 只会进行静态检查,如果发现有错误,编译的时候就会报错(仍然会生成js文件)。

4 基础

JavaScript 的类型分为两种:原始数据类型(Primitive data types)和对象类型(Object types)。
原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。

布尔值:

使用 boolean 定义布尔值类型:let isDone: boolean = false;

注意:构造函数 Boolean 创造的对象不是布尔值:而是一个 Boolean 对象:

let createdByNewBoolean: boolean = new Boolean(1);
// index.ts(1,5): error TS2322: Type 'Boolean' is not assignable to type 'boolean'.

let createdByNewBoolean: Boolean = new Boolean(1); //无错误

直接调用 Boolean 也可以返回一个 boolean 类型:
let createdByBoolean: boolean = Boolean(1); //无错误

在 TypeScript 中,boolean 是 JavaScript 中的基本类型,而 Boolean 是 JavaScript 中的构造函数。其他基本类型(除了 null 和 undefined)一样。

数值:

使用 number 定义数值类型
注意:ES6的进制表示法都会被TS编译为10进制,非ES6进制按原进制编译。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;     // ES6 中的二进制表示法
let octalLiteral: number = 0o744;       // ES6 中的八进制表示法
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

编译后:

var decLiteral = 6;
var hexLiteral = 0xf00d;
var binaryLiteral = 10;     // ES6 中的二进制表示法
var octalLiteral = 484;     // ES6 中的八进制表示法
var notANumber = NaN;
var infinityNumber = Infinity;

字符串:

使用 string 定义字符串类型:
let myName: string = 'tan';
编译后:let myName = "tan";

空值:

JS 没有空值(Void)的概念,在 TS 中,可以用 void 表示没有任何返回值的函数:

function alertName(): void {alert('My name is tan');
}

void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null:let unusable: void = undefined;

Null 和 Undefined:

在 TS 中,可以使用 null 和 undefined 来定义这两个原始数据类型:

let u: undefined = undefined;
let n: null = null;

undefined 类型的变量只能被赋值为 undefined,null 类型的变量只能被赋值为 null。
但undefined 和 null 是所有类型的子类型。就是说 undefined 类型的变量,可以赋值给 number 类型的变量:
let num: number = undefined;
注意:void 类型的变量不能赋值给 number 类型的变量。

任意值:

任意值(Any)用来表示允许赋值为任意类型,因此可以赋值为不同类型的值:

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

任意值上访问任何属性都是允许的,也允许调用任何方法。
声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值。
并且,变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型:

let something;
something = 'seven';
something = 7;

http://www.ppmy.cn/news/142830.html

相关文章

TCC

引言:TCC事务的由来在当前如火如荼的互联网浪潮下,如何应对海量数据、高并发成为大家面临的普遍难题。广大IT公司从以往的集中式网站架构,纷纷转向分布式的网站架构,随之而来的就是进行数据库拆分和应用拆分,如何在跨数…

搭建 TypeScript 环境 TSC 命令的使用 配置 tsconfig 文件

目录 一、全局配置 TypeScript 环境1、查看 TS 版本2、全局安装 TS 二、TSC 命令的使用1、使用 tsc 生成 tsconfig.json 配置文件2、通过 tsc 编译指定的 ts 文件3、通过 tsc 自动编译 ts 文件 三、tsconfig.json 配置文件的解析1、顶层属性(1)、compile…

TS入门详解(typescript)

一、什么是ts ts可以理解为JavaScript的超集,它是由微软公司开发的一种编程语言,可以运行在任何浏览器还有操作系统 二、TypeScript的发展优缺点 优点: 增加了代码的可读性和可维护性 非常包容(可以定义所有类型) …

TS的类型声明

目录 1.TS把JS变成了静态类型的语言,可以给变量指定类型 2.JS中的函数是不考虑参数的类型和个数的,但是TS会考虑函数的参数类型和个数,且要规定返回值类型。 3.常见的TS类型 1.可以直接使用字面量进行类型声明 字面量声明的应用:可以使用…

【TS】介绍

什么是TypeScript https://www.tslang.cn/ TypeScript是Microsoft公司注册商标。 TypeScript具有类型系统,且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。 安装T…

TS简介

一 简介 TypeScript,简称为TS,是JS的超级;Vue3.0就是使用TS开发出来的,并且推荐开发者使用TS进行开发; TS是可以直接运行的(比如使用ts-node),最终编译为纯的JS运行在任意的平台之上…

TS的指南

目录 TS 是什么 ? TS和JS的关系 安装TS 查看版本 编译 在线编译 TS的基本数据类型 基本类型 引用类型 Array Tuple(元组) object function 函数重载 特殊类型 any unknow 数字枚举 类型推论 void never Enum(枚举) 字符串枚举 常量枚举 异…

初识TypeScript编译器(tsc)

须知少时凌云志, 曾许人间第一流。 哪晓岁月蹉跎过, 依旧名利俩无收。 文章目录 1. 安装 TypeScript2. 熟悉tsc的编译选项3. 编译.ts文件4. TS报错后那JS呢4.1 通过noEmitOnError禁止在出错的情况下编译出JS目标文件 5. 查看编译生成的JS文件5.1 通过tar…