目录
一、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特点
- 静态类型(强类型),声明时确定类型,之后不允许修改。
- TypeScript可处理已有的JS,并只对TS代码编译,完善了JS的确定。
- 开源(社区成熟),跨平台,所有支持Js代码,都可以使用TS。
- 丰富的配置项,强大的开发工具支持等等。
三、开发环境配置
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
今天的分享就到此结束啦,要加油啊,冲冲冲。