系列文章目录
引入一:Typescript基础引入(基础类型、元组、枚举)
引入二:Typescript面向对象引入(接口、类、多态、重写、抽象类、访问修饰符)
第一章:Typescript基础知识(Typescript介绍、搭建TypeScript环境、基本数据类型)
文章目录
- 系列文章目录
- 一、什么是typescript?
- 1.1 TypeScript 与 JavaScript 的区别
- 1.2 TypeScript特点
- 二、搭建typescript学习环境
- 2.1 安装最新版typescript
- 2.2 安装ts-node
- 2.3 创建一个 tsconfig.json 文件
- 2.5 自动编译
- 2.6 官方playground
- 三、基本数据类型
- 3.1 JS的八种内置类型
- 3.2 布尔值
- 3.3 数值
- 3.4 字符串
- 3.5 空值
- 3.6 Null 和 Undefined
- 3.7 number和bigint
一、什么是typescript?
- TypeScript(简称:TS)是 J
avaScript 的超集
(JS 有的 TS 都有)。 TypeScript = Type + JavaScript(在 JS 基础之上,为 JS 添加了类型支持)。- TS和JS之间的关系其实就是Less/Sass和CSS之间的关系,就像Less/Sass最终会转换成CSS一样,
我们编写好的TS代码最终也会换成JS
- 它扩展了JavaScript,有JavaScript没有的东西。
- 硬要以父子类关系来说的话,TypeScript是
JavaScript子类,继承的基础上去扩展
。
1.1 TypeScript 与 JavaScript 的区别
TypeScript | JavaScript |
---|---|
JavaScript 的超集用于解决大型项目的代码复杂性 | 一种脚本语言,用于创建动态网页 |
可以在编译期间发现并纠正错误 | 作为一种解释型语言,只能在运行时发现错误 |
强类型,支持静态和动态类型 | 弱类型,没有静态类型选项 |
最终被编译成 JavaScript 代码,使浏览器可以理解 | 可以直接在浏览器中使用 |
支持模块、泛型和接口 | 不支持模块、泛型或接口 |
支持 ES3,ES4,ES5 和 ES6+功能 | 不支持编译其他 ES3,ES4,ES5 或 ES6+ 功能 |
社区的支持仍在增长,而且还不是很大 | 大量的社区支持以及大量文档和解决问题的支持 |
1.2 TypeScript特点
支持最新的JavaScript新特特性
支持代码静态检查
- 支持诸如C,C++,Java,Go等后端语言中的特性 (枚举、泛型、类型转换、命名空间、声明文件、类、接口等)
二、搭建typescript学习环境
2.1 安装最新版typescript
-
问题描述: Node.js/浏览器,只认识 JS 代码,不认识 TS 代码。需要先将 TS 代码转化为 JS 代码,然后才能运行
-
安装命令:
npm i -g typescript
-
将 TS 编译为 JS: 在终端中输入命令,
tsc hello.ts
(此时,在同级目录中会出现一个同名的 JS 文件)。 -
执行 JS 代码: 在终端中输入命令,
node hello.js
-
说明: 所有合法的 JS 代码都是 TS 代码,有 JS 基础只需要学习 TS 的类型即可。
2.2 安装ts-node
- 问题描述: 每次修改代码后,都要重复执行两个命令,才能运行 TS 代码,太繁琐。
- 简化方式: 使用 ts-node 包,直接在 Node.js 中执行 TS 代码。
- 安装命令:
bash npm i -g ts-node
- 使用方式:
ts-node hello.ts
。 - 解释: ts-node 命令在内部
偷偷的将 TS -> JS,然后,再运行 JS 代码
。
2.3 创建一个 tsconfig.json 文件
-
tsconfig.json
是 TypeScript 项目的配置文件
。如果一个目录下存在一个tsconfig.json文件
,那么往往意味着这个目录就是 TypeScript 项目的根目录
。 -
tsconfig.json
包含 TypeScript 编译的相关配置,通过更改编译配置项,我们可以让 TypeScript 编译出ES6、ES5、node 的代码
。tsc --init #生成配置文件
2.5 自动编译
- 问题: 每次修改ts文件后总是要重新运行
- 解决方式:
tsc --w hello.ts
。
2.6 官方playground
- 官方也提供了一个在线开发 TypeScript的云环境——Playground。
- 基于它,我们无须在本地安装环境,只需要一个浏览器即可随时学习和编写 TypeScript,同时还可以方便地选择 TypeScript
- 版本、配置 tsconfig,并对 TypeScript 实时静态类型检测、转译输出 JavaScript 和在线执行。
三、基本数据类型
3.1 JS的八种内置类型
let str: string = "jimmy";
let num: number = 24;
let bool: boolean = false;
let u: undefined = undefined;
let n: null = null;
let obj: object = {x: 1};
let big: bigint = 100n;
let sym: symbol = Symbol("me");
JavaScript 的类型分为两种: 原始数据类型
和对象类型
。
原始数据类型包括: 布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt
。
本节主要介绍前五种原始数据类型在 TypeScript 中的应用。
3.2 布尔值
布尔值是最基础的数据类型,在 TypeScript 中,使用 boolean 定义布尔值类型
:
let isDone: boolean = false;
使用构造函数 Boolean 创造的对象不是布尔值
,事实上 new Boolean() 返回的是一个Boolean 对象:
let createdByNewBoolean: boolean = new Boolean(1);
// Type 'Boolean' is not assignable to type 'boolean'.
// 'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.
直接调用 Boolean 才可以返回一个 boolean 类型
:
let createdByBoolean: boolean = Boolean(1);
在 TypeScript 中,boolean 是 JavaScript 中的基本类型,而 Boolean 是 JavaScript 中的构造函数。
3.3 数值
使用 number 定义数值类型:
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
3.4 字符串
使用 string 定义字符串类型:
let myName: string = 'Tom';
let myAge: number = 25;
// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;
3.5 空值
JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用 void 表示没有任何返回值的函数
:
function alertName(): void {
alert('My name is Tom');
}
声明一个 void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null(只在 --strictNullChecks 未指定时):
let unusable: void = undefined;
3.6 Null 和 Undefined
在 TypeScript 中,可以使用 null 和 undefined 来定义这两个原始数据类型:
let u: undefined = undefined;
let n: null = null;
与 void 的区别是,undefined 和 null 是所有类型的子类型
。就是说你可以把 null 和 undefined 赋值给其他类型:
// 这样不会报错
let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;
// null和undefined赋值给string
let str:string = "666";
str = null
str= undefined
// null和undefined赋值给object
let obj:object ={};
obj = null
obj= undefined
而 void 类型的变量不能赋值给其他类型的变量:
let u: void;
let num: number = u;
// Type 'void' is not assignable to type 'number'.
注: 如果你在tsconfig.json指定了"strictNullChecks":true
,null
和 undefined
只能赋值给 void 和它们各自的类型
3.7 number和bigint
虽然number和bigint都表示数字,但是这两个类型不兼容
。
let big: bigint = 100n;
let num: number = 6;
big = num;
num = big;
会抛出一个类型不兼容的 ts(2322) 错误