TypeScript基础常用知识点总结(一)

简介: TypeScript基础常用知识点总结

一.TypeScript简介


虽然简介这一部分可能有人会觉得没必要,但是我觉得还是有必要简单的写一下的。我们以后既然要经常用它,当然得从认识它开始啦!不想看就往下滑咯。


简介:

TypeScript 是 由微软开发的自由和开源的编程语言。TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准,扩展了 JavaScript 的语法,解决了JS的一些缺点。因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。也就是说,写是TS写,但最终编译出来还是JS。但要注意TS并不是去替换JS的,它是在JS的基础上构建的。


3d3e1eb2944f4fad8e0454ec6ea4841d.png


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的编译后的文件。


89eaea117c5b4feea41e392948c25b05.png


还有一种使用方式是工程化编译方案,涉及的配置和注意点比较多,会在下一篇博客进行详细讲解。


二.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);


fa0bcf6fe7da4424ab8df6dff1c4ca27.png


事实上 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 中,可以使用 nullundefined 来定义这两个原始数据类型。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;

5799f4f8bf53402faf6b4083785a72cd.png


但如果是 any 类型,则允许被赋值为任意类型。


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


声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值。

变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型:


let something;
something = 'seven';
something = 7;
//等价于
let something: any;
something = 'seven';
something = 7;
相关文章
|
6月前
|
JavaScript 前端开发 安全
TypeScript基础知识点
TypeScript基础知识点
81 0
|
6月前
|
JavaScript 前端开发
总结TypeScript 的一些知识点:TypeScript Array(数组)(下)
一个数组的元素可以是另外一个数组,这样就构成了多维数组(Multi-dimensional Array)。
|
6月前
|
存储 JavaScript 前端开发
总结TypeScript 的一些知识点:TypeScript Array(数组)(上)
数组对象是使用单独的变量名来存储一系列的值。
|
6月前
|
JavaScript 前端开发 程序员
总结TypeScript 的一些知识点:TypeScript 声明文件
程序来输出 "Hello World" :当然,很多流行的第三方库的声明文件不需要我们定义了,比如 jQuery 已经有人帮我们定义好
总结TypeScript 的一些知识点:TypeScript 声明文件
|
JavaScript 前端开发 开发工具
TypeScript编程语言学习知识点总结
TypeScript编程语言学习知识点总结
64 0
|
JavaScript 前端开发 API
搭建 Vite + Vue 3 + TypeScript 的基础项目模板
搭建 Vite + Vue 3 + TypeScript 的基础项目模板
791 0
|
JavaScript
TypeScript基础笔记(小满版本)(六)
TypeScript基础笔记(小满版本)(六)
147 0
|
JavaScript 前端开发 编译器
TypeScript基础笔记(小满版本)(四)
TypeScript基础笔记(小满版本)(四)
231 0
|
XML JSON JavaScript
TypeScript基础笔记(小满版本)(五)
TypeScript基础笔记(小满版本)(五)
239 0
|
JavaScript 前端开发 数据库
TypeScript基础笔记(小满版本)(二)
TypeScript基础笔记(小满版本)(二)
245 0