目录

一、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:100
 a=100 

let sex:"男"|"女"
sex="男"

let flag:boolean |string
flag=true

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

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

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

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