一.TypeScript简介
虽然简介这一部分可能有人会觉得没必要,但是我觉得还是有必要简单的写一下的。我们以后既然要经常用它,当然得从认识它开始啦!不想看就往下滑咯。
简介:
TypeScript 是 由微软开发的自由和开源的编程语言。TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准,扩展了 JavaScript 的语法,解决了JS的一些缺点。因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。也就是说,写是TS写,但最终编译出来还是JS。但要注意TS并不是去替换JS的,它是在JS的基础上构建的。
TypeScript增加的功能:
类型批注和编译时类型检查、类型推断、接口、枚举、Mixin、泛型编程、元组、Await、类、模块、lambda 函数的箭头语法、可选参数以及默认参数等。
学习环境搭建:
1.下载最新版Node.js安装好
2.打开cmd,使用npm安装typescript
npm install -g typescript
TypeScript 在全局安装后,我们可以在任意位置使用 tsc 命令,tsc 命令负责编译 TypeScript 文件为 JavaScript 文件。
TypeScript 使用举例:
方式一是通过全局 tsc 命令编译 TypeScript 代码
创建一个目录:
mkdir ts-practice cd ts-practice
我们创建一个test.ts文件,里面写一段代码:
export enum TokenType { ACCESS = 'accessToken', REFRESH = 'refreshToken' }
运行tsc命令测试:
tsc test.ts
运行后会得到一个test.js的编译后的文件。
还有一种使用方式是工程化编译方案,涉及的配置和注意点比较多,会在下一篇博客进行详细讲解。
二.TypeScript语法总结
下面开始基础语法的总结,涉及到语法有变量声明、基础类型、对象类型、元组、枚举、接口、类、函数、、泛型、字面量类型、类型断言、类型保护等等。
1. TypeScript—变量类型声明
TypeScript 是 JavaScript 的超集,同 JavaScript 一样,声明变量可以采用var、let、const三个关键字。
TypeScript 变量的命名规则:变量名称可以包含数字和字母。除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符,包括空格。变量名不能以数字开头。
变量的类型声明是ts的一个非常重要的特点,通过类型声明可以指定当前ts中变量的数据类型。指定类型后,当为变量赋值的时后,TS编译器会自动检查是否符合类型声明,符合则赋值,不符合则报错。简而言之就是类型声明给变量设置了类型,使得变量只能存储某种类型的值。
类型声明的语法:
//1.声明变量的类型,但没有初始值,变量值会设置为 undefined: let 变量名 : 类型 ; //2.声明变量的类型及初始值: let 变量名 : 类型 = 值 ; //函数参数类型和返回值类型声明 function(参数名1 : 类型 ,参数名2 : 类型):返回值类型{ ··· }
2. TypeScript—基础数据类型
JavaScript 的类型分为两种:基础数据类型
和对象类型
(1)布尔值类型
布尔值是最基础的数据类型,在 TypeScript 中,使用 boolean
定义布尔值类型。
let isDone: boolean = false;
注意,使用构造函数 Boolean
创造的对象不是布尔值,编译会报错:
let isMale: boolean = new Boolean(1);
事实上 new Boolean() 返回的是一个 Boolean 对象
,我们要将boolean类型的声明改为Boolean类型声明才不会报错:
let isMale: Boolean = new Boolean(1);
或直接调用 Boolean()
函数 可以返回一个 boolean 类型,这样写也不会报错:
let isMale: boolean = Boolean(1);
(2)数值类型
使用 number 定义数值类型,它可以用来表示整数和分数。
let binaryNumber: number = 0b1010; // 二进制 let octalNumber: number = 0o744; // 八进制 let decNumber: number = 6; // 十进制 let hexNumber: number = 0xf00d; // 十六进制
(3)字符串类型
使用string
定义字符串类型,一个字符系列,使用单引号 ’ 或双引号 " 来表示字符串类型。反引号 ` 来定义多行文本和内嵌表达式。
let myName: string = '害恶细君'; let myAge: number = 20; // 模板字符串,这其实也是ES6的语法 let sentence: string = `Hello, my name is ${myName}. I'll be ${myAge + 1} years old next month.`;
编译结果:
let myName = '害恶细君'; let myAge = 20; // 模板字符串 let sentence = "Hello, my name is " + myName + ".\nI'll be " + (myAge + 1) + " years old next month.";
(4)空值类型
JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用 void
表示没有任何返回值的函数。可以用于标识方法返回值的类型,表示该方法没有返回值。
function alertName(): void { alert('My name is haiexijun'); }
声明一个 void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null。
let unusable: void = undefined;
(5)Null 和 Undefined类型
在 TypeScript 中,可以使用 null
和 undefined
来定义这两个原始数据类型。null表示对象值缺失,undefined
用于初始化变量为一个未定义的值。
let u: undefined = undefined; let n: null = null;
与 void 的区别是,undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量,可以赋值给 number 类型的变量:
// 这样不会报错 let num: number = undefined; // 这样也不会报错 let u: undefined; let num: number = u;
而 void 类型的变量不能赋值给 number 类型的变量,下面写编译就会报错:
let u: void; let num: number = u;
(6)任意值类型
任意值(Any)用来表示允许赋值为任意类型,用any
来表示任意类型,声明为 any 的变量可以赋予任意类型的值。
如果是一个普通类型,在赋值过程中改变类型是不被允许的,编译会报错:
let myFavoriteNumber: string = 'seven'; myFavoriteNumber = 7;
但如果是 any 类型,则允许被赋值为任意类型。
let myFavoriteNumber: any = 'seven'; myFavoriteNumber = 7;
声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值。
变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型:
let something; something = 'seven'; something = 7; //等价于 let something: any; something = 'seven'; something = 7;