TypeScript（TS）基础内容详细介绍

news/2024/11/23 0:37:18/

目录

一、TypeScript概念

二、TypeScript特点

三、开发环境配置

四、初识ts

五、TypeScript类型声明

1、any：

2、number数字类型 

3 string字符串类型 

4 boolean布尔类型 

表示逻辑值：true 和 false。

5 数组类型

6 元组类型

7 enum枚举类型

8 void无任何类型

9 null类型

10 undefined类型

11 never类型

12 unknown类型

13 函数类型

14 对象类型 

15 类型的别名

16 箭头函数

 六、变量声明

七、字面量声明

一、TypeScript概念

以JavaScript为基础构建的语言。微软在js基础上，添加了一些语法。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

二、TypeScript特点

  1. 静态类型（强类型），声明时确定类型，之后不允许修改。
  2. TypeScript可处理已有的JS，并只对TS代码编译，完善了JS的确定。
  3. 开源（社区成熟），跨平台，所有支持Js代码，都可以使用TS。
  4. 丰富的配置项，强大的开发工具支持等等。

三、开发环境配置

1、下载node.js

下载地址：
下载 | Node.js 中文网

2、 配置国内镜像

npm config set registry

https://registry.npmmirror.com

3、全局安装

安装命令：npm i -g typescript

查看版本：tsc -v

四、初识ts

1、打开vscode编辑器，在你的目录下建立一个.ts为后缀名的文件

2、代码内容如下：

let str:string; //声明变量的类型
str = 'Hello,ts' //赋值的类型只能是上面定义的类型
console.log(str);

这个代码的意思是我们声明了一个str,并给他定义了字符串类型，紧接着我们又给他赋值

但是我们赋值的内容只能是我们上面给str定义的类型，也就是字符串类型。最后打印str

3、运行

（1）首先我们要打开当前文件下的终端

（2）然后编译文件，在终端输入命令：tsc xxx.ts，xxx为你创建的ts的文件名

（3）执行js文件，node xxx.js，xxx与上面一样

我们就可以看到代码结果了

五、TypeScript类型声明​

5.1 基础类型

1、any：

声明为 any 的变量可以赋予任意类型的值（字符串、数字、布尔值等等都可以）。​​​​

let str:any;//任意类型
str = 123
str = '456'
str = true
console.log(str);

我们通过打印看一下结果，结果为我们最后一次赋的值。

2、number数字类型 

双精度 64 位浮点值。它可以用来表示整数和分数。

let age:number;
age = 15
console.log(age);

这个就很好理解了，数字嘛，js就学过

3 string字符串类型 

字符串类型，用单引号、双引号、模板字符串（反引号）定义的文本。

let realname:string;
realname=`我的姓名是`+'枕头睡不醒'
console.log(realname);

4 boolean布尔类型 

表示逻辑值：true 和 false。

5 数组类型

数组类型就有点不一样了，可以仔细看一下

（1）在类型后面加[ ]数组里面是字符串

let realname:string[];
realname = ['枕头睡不醒','枕头睡不着','大耳朵图图']
console.log(realname);

 （2）使用范类型Array

这里的意思就是首先是数组类型后面加了一个尖括号，里面写了any就代表里面的值可以是任意类型

let persons:Array<any>;
persons=['枕头睡不醒',18]
console.log(persons);

 

6 元组类型

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。

let zs:[string,number,number];
zs = ['张三',14,18]
console.log(zs);

7 enum枚举类型

枚举类型用于定义数值集合

什么意思呢，我们直接看代码嘿嘿嘿

enum days{Sun, Mon, Tue, Wed, Thu, Fri, Sat}
console.log(days.Sun);
console.log(days.Mon);
console.log(days.Tue);
console.log(days.Wed);

看到这里大家是不是很奇怪，为什么打印出来的是数字，其实他是数字枚举如果没有初始化，默认初始化值为0，之后每项+1 ，所以才是这个结果，

那如果有初始化值呢？

enum days{Sun, Mon=10, Tue, Wed, Thu, Fri, Sat}
console.log(days.Sun);
console.log(days.Mon);
console.log(days.Tue);
console.log(days.Wed);

 如果有初始化，则在初始化值的基础上，每项+1，只要不是第一个值，那么第一个值还是从0开始。

总结：

数字枚举如果没有初始化，默认初始化值为0，每项+1

如果有初始化，则在初始化值的基础上，每项+1

还有就是不要再语法中给上面的属性赋值，会导致错误滴。

8 void无任何类型

void用于标识方法返回值的类型，表示该方法没有返回值。

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null;

声明一个方法，没有返回值：

function say():void{console.log('hello,ts!')
}
say()

9 null类型

这个就不用多介绍了，js中经常看到的，表示对象值缺失。

10 undefined类型

这个也是老熟人了，初始化变量但未定义值。

let realname
console.log(realname);

11 never类型

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

比如函数抛出一个异常：

function hello(str:string):never{throw new Error(str);
}

12 unknown类型

unknown未知类型 自己可以赋值任意类型,但是不可以赋值给别人，

在这里我们会提到一个叫类型断言，什么意思呢？来，直接看代码

let realname:unknown;
realname ="张三"
realname =19

类型断言,因为我前面是 unknown类型，我不知道他说啥类型，所以我在后面复制的时候直接给他加上一个类型。一共有两种写法呦

写法一：

let realname:unknown;
realname ="张三"
str = realname as string //类型断言 断言他是字符串
console.log(realname);

写法二：

let realname:unknown;
realname ="张三"
str = <string>realname;
console.log(realname)

总结：

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

13 函数类型

function sum(a:number,b:number):number{return a+b
}console.log(sum(1,2));

这里要注意，我们定义的值a和b都是number类型，所以我们返回的也必须是number类型

14 对象类型 

（1）最简单的，这个其实没啥用哈

let p:object;
p={realname:'张三',age:18
}

（2）各个属性限制"死"

let P1:{realname:string,age:number}//定义类型
P1 = {realname:"张三",age:19} //赋值需要上面定义保持一致

（3）上面这个我的属性的类型都限制死了，那么就必须传值，那如果我不想给其中的一个传值呢？那就需要借助？这个了，对就是问号

let p:{realname:string,age?};
p={realname:'张三'}

看，结果也不会报错 ，就非常的"神奇"

还有一种情况，就是我们属性名不确定的时候，这个也有解决办法滴

let p:{realname:string,[propName:string]:any}
p={realname:'张三'}
P = {realname:"张三",age:19}

当属性名不确定时，定义 propName，这个propName是随便定义的，大家喜欢就行，但是最好语义化，any就是类型啦

15 类型的别名

说道现在了，就会有人好奇，拿我可不可以自定义类型的别名呢，当然也是可以的，我们需要用到type

type mytype = string
let a:mytype;
a='123' //error

16 箭头函数

可以定义格式(其实就是定义了我们下面用到的函数格式)

let sum:(a:number,b:number)=>number;
sum = function(a:number,b:number):number{return a+b
}console.log(sum(1,2));

 六、变量声明

1 命名规则

var [变量名] : [类型] = 值;

例：let str:string = "hello";

（1）变量名称可以包含数字和字母。

（2）除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。

（3）变量名不能以数字开头。

（4）变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。

2 声明未设置

var [变量名] : [类型];

声明变量的类型，但没有初始值，变量值会设置为 undefined;

3 声明未设置类型

var [变量名] = 值;

声明变量并初始值，但不设置类型，该变量可以是任意类型：

七、字面量声明

看三个例子

let a:100a=100 let sex:"男"|"女"
sex="男"let flag:boolean |string
flag=true

第一个定义了a 后面直接类似于赋值，它只能是100，其他都不行

第二个定义了sex 里面有两个值，男或者女中间是竖杠代表着或，也就是只能是男或者女

第三个和第二个差不多，d定义了布尔类型，那么他们只能是ture或者false

今天的分享就到此结束啦，要加油啊，冲冲冲。


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

相关文章

TS的声明文件

TS的声明文件

TS的声明文件 .ts文件&#xff1a; 既包含类型信息又可执行代码。可以被编译成 .js 文件。 .d.ts文件&#xff1a; 只包含类型信息的类型声明文件。不会生成 .js 文件&#xff0c;仅用于提供类型信息。 .ts是implementation&#xff08;代码实现文件&#xff09;.d.ts是de…
阅读更多...
Ts/Typescript基础运用

Ts/Typescript基础运用

01、什么是Typescript、ts ts&#xff1a; TypeScript 的缩写&#xff0c;是微软开发的编程语言, TypeJavaScript (Type是类型 》在JS基础之上,为了JS添加了支持类型) 那我们为什么要学习ts呢&#xff1f;js不香嘛&#xff1f; 我们来看这一段js代码 let age 18age 19 //正确…
阅读更多...
TS基础

TS基础

1 写在开始之前&#xff0c;为什么要学习TS vue2.x中的组件是通过声明的方式传入一系列option&#xff0c;和TypeScript的结合需要通过一些装饰器的方式来做&#xff0c;虽然能实现功能&#xff0c;但是比较麻烦。 而3.0修改了组件的声明方式&#xff0c;改成了类式的写法&…
阅读更多...
TCC

TCC

引言&#xff1a;TCC事务的由来在当前如火如荼的互联网浪潮下&#xff0c;如何应对海量数据、高并发成为大家面临的普遍难题。广大IT公司从以往的集中式网站架构&#xff0c;纷纷转向分布式的网站架构&#xff0c;随之而来的就是进行数据库拆分和应用拆分&#xff0c;如何在跨数…
阅读更多...
搭建 TypeScript 环境 TSC 命令的使用 配置 tsconfig 文件

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

目录 一、全局配置 TypeScript 环境1、查看 TS 版本2、全局安装 TS 二、TSC 命令的使用1、使用 tsc 生成 tsconfig.json 配置文件2、通过 tsc 编译指定的 ts 文件3、通过 tsc 自动编译 ts 文件 三、tsconfig.json 配置文件的解析1、顶层属性&#xff08;1&#xff09;、compile…
阅读更多...
TS入门详解（typescript）

TS入门详解（typescript）

一、什么是ts ts可以理解为JavaScript的超集&#xff0c;它是由微软公司开发的一种编程语言&#xff0c;可以运行在任何浏览器还有操作系统 二、TypeScript的发展优缺点 优点&#xff1a; 增加了代码的可读性和可维护性 非常包容&#xff08;可以定义所有类型&#xff09; …
阅读更多...
TS的类型声明

TS的类型声明

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

【TS】介绍

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

Copyright @ 2022~2023