TS环境搭建,类型声明
- 一.开发环境的搭建
- 1.下载与安装-Node
- 2.使用npm全局安装TypeScript
- 3.Hello World!
- 二.TS的类型
- 1.TS类型的特性
- 2. TS的数据类型
- 2.1 字面量与联合类型
- 2.2 any与unknown类型
- 2.3 void 与 never
- 2.4 object类型
- 2.5 array与tuple
- 2.6 enum枚举类型
- 2.7 类的别名与合并对象
- 笔记说明
一.开发环境的搭建
1.下载与安装-Node
- 下载
Node.js
下载连接 点击下载连接,下载对应版本的文件即可 - 下载完成后进行安装
一路next,注意选择安装路径,最后finish就ok了 - 安装结束后,
win+R
输入cmd
在命令行输入node -v
,如果有对应的版本信息出现,即代表安装完成
2.使用npm全局安装TypeScript
-
win+R
输入cmd
命令行窗口中输入npm i -g typescript
,安装TypeScript解析器
等待读条安装即可 - 安装完成后输入
tsc -v
或tsc
输出版本号或使用信息就代表安装完成了
3.Hello World!
- 新建一个名为
hello.ts
的文件,打开编辑
写下第一行代码,并保存
console.log("Hello wrold !");
- 编译验证
这个时候的ts文件还不能被浏览器识别,需要TypeScript编译才能执行
在当前文件夹路径框输入cmd
,命令行再输入tsc hello.ts
即可完成对文件的编译
这时候可以看到对应文件夹下生成了一个hello.js
文件
二.TS的类型
1.TS类型的特性
- 可以通过
let [变量名] : [类型]
指定一个变量的具体类型
并且可以在声明的同时就进行赋值let num : number = 123;
直接赋值时写法还可简化let num = 123;
TS会自动判断变量的类型
//声明了一个类型为number的变量num
let num: number;
//声明类型之后,变量的类型就不能改变<->区别于JavaScript
// num = "123"; 是会报错的
num = 123;
//声明一个字符串类型,可以直接进行赋值
let str : string = "iFinder";
//声明时还有简化的写法,如果声明与赋值同时进行,TS可以自动对变量进行类型检测
let bool = false;
//之后用这个变量就是boolean类型
// bool = 123; 会报错
bool = true;
- 相比JS来说TS可以更方便的定义入参的类型以返回值的类型
function [方法名]([变量1] : [类型], [变量2] : [类型], ...) : [返回值类型] {
...
}
//JS中的函数是不考虑类型,个数的
function sum(a, b) {
return a + b;
}
//输出结果:24
console.log(sum(num, num));
//输出结果1212
console.log(sum(num, "12"));
//相比之下TS的函数类型,可以指定入参的类型
function sumTs(a : number, b : number) {
return a + b;
}
//这样的话在参数传入的时候就会做相应的检查,进而避免类型混乱而造成的错误
console.log(sumTs(123, 123));
//同样,函数的返回值类型也是能够被定义的
function appendStr(s1 : string, s2 : string) : string {
return s1 + s2;
}
- 补充:如何看到编写的函数的输出结果
以VSCode为例,新建一个html文件,输入!
生成默认模板
然后在<body> </body>
中添加TS文件编译后的JS文件的引用
在浏览器中打开后,右键选择检查,找到console
即可看到输出的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="02.ts_type.js"></script>
<script src="01.hello.js"></script>
</body>
</html>
- 建议打开VSCode的自动保存功能,设置焦点改变立即保存,以免发生没保存却在一直编译,输出结果不变的尴尬情况
2. TS的数据类型
类型 | 示例 | 描述 |
| 1, -33 , 2.2 | 任意的数字 |
| “iFinder”, “Nancy” | 任意字符串 |
| true, false | 布尔值 |
| * | 任意类型 |
| * | 类型安全的any |
| 空值(undefined) | 没有值或者undefined |
| 没有值 | 不能是任何值 |
| {name:“iFInder”} | 任意的JS对象 |
| [1, 2, 3, 4, 5] | 任意的JS数组 |
| [4 ,5] | 元素,TS新增类型,固定长度数组 |
| enum{A1, B1, C1} | 枚举类型, TS新增类型 |
| 其本身 | 限制变量的值就是该字面量的值 |
2.1 字面量与联合类型
- 可以用字面量来当作一种类型,使用后变量只能等于字面量
- 可以用
|
符号来定义多种类型,这样的类型叫做联合类型
/**字面量 与 联合类型 */
//可以直接使用字面量进行类型声明
let a : 10;
a = 10;
// a = 11; 会报错,用字面量声明后值不可修改
//可以用 | 来限制字面量的范围
//这样该变量只能是这几个字面量中的任意一个
let student : "iFinder" | "Nancy" | "Bob";
//甚至可以通过 | 来为同一个变量指定多个类型
let age : number | string;
age = 24;
age = "35";
//上边的多个类型的用法叫做-->联合类型
2.2 any与unknown类型
- 变量定义为
any
之后类型不会被限制,并且可以赋值给其它的变量
但是这样使用是很不安全的,开发中不建议使用 -
unknown
也不限定值的类型,但是它不能赋值给其它的变量
所以unknown
可以理解为类型安全的any
类型 - 使用
unknown
后可以结合typeof
或类型断言
来进行类型的判断
/**any类型与unknown类型 */
let every1 : any;
every1 = 123;
every1 = "iFinder";
every1 = true;
//注意:声明变量时不指定类型的话,TS会默认类型为any
let test; //这里声明的结果就是any类型--隐式any
//一个变量设置any后,相当于对它关闭了TS变量的类型检测
//类型安全的any类unknown
let every2: unknown;
every2 = "iFinder";
//any与unknow的区别:
//any类型可以赋值给其它的变量,而unknown类型的值是不能赋值给其它变量的
let str:string;
str = every1; // 不报错TS允许
//str = every2;报错,unknown不能赋值给其它变量
//解决办法1:类型检查
if (typeof every2 === "string") {
str = every2;
}
//解决办法2:类型断言,告诉编译器变量的实际类型
str = every2 as string;
str = <string>every2;
2.3 void 与 never
-
void
一般指定函数不返回或返回值为空 -
never
让该函数连空都不会返回,一般用在异常处理
/**void 与 never -- 设置无返回值的函数 */
//不指定返回值类型的时候TS会进行动态的判断
function fun1(num) { //此时的返回值为复合类型 boolean | string
if (num > 0) {
return true;
} else {
return "error";
}
}
//void 表示空,没有返回值的函数
function fun2() : void {
// return;
// return undefined;
//或者没有return都可以
}
//never 表示连空都没有,一般用在异常中断
function error1(errorCode) : never {
throw new Error("error code" + errorCode);
}
2.4 object类型
- 开发时通过
{属性名1: 类型1, 属性名2: 类型2, ...}
表示一个对象,与其携带的属性 - 在属性名后加上
?
可以表示可选属性 - 使用
[属性名: string] : 类型
的方式,可以指定任意多个对象的属性 - 可以通过
(形参1: 类型, 形参2: 类型, ...)=>类型
的语法来限制返回值的类型
/**object类型-表示一个JS对象 */
let oc:object; //但是这种写法没有意义
//对象也可以这么表示
oc = {};
oc = function() {};
//开发的时候我们使用对象其实是更倾向于使用该对象的属性的,可以直接这么写
//表示oc2这个变量指向了一个 内部有name属性的对象
let oc2: {name: string};
oc2 = {name: "iFinder"};
//{}用于指定对象中可以包含那些属性 {属性名1 : 属性类型1, 属性名2: 属性类型2, ...}
//属性名之后加上 ? 表示可选属性,赋值对象时可以缺失
let human: {name: string, age?: number};
human = {name: "iFinder", age: 24};
human = {name: "Nancy"}; //可选属性是可以缺失的
//[属性名 : string] : unknown可以指定任意数量的属性
let oc3: {name: string, [propName: string]: unknown};
oc3 = {name:"Cat", weight: "13kg", age: 5};
//与之类似的可以指定函数的入参与返回值的结构
//表示限制fun为有两个入参类型为number并且返回值类型为number的函数
let fun: (num1: number, num2: number)=> number;
fun = function(a, b): number {
return a + b;
}
2.5 array与tuple
/**array类型 */
//字符串数组
let strArr: string[];
let strArr1: Array<string>;
strArr1 = ['a', 'b', 'c'];
//number数组
let numArr: number[];
let numStr1: Array<number>;
numArr = [1, 2, 3];
/**tupel 元组:固定长度的数组 */
let strTup: [string, number];
strTup = ['one', 123]; //长度固定,类型固定
2.6 enum枚举类型
/**enum 枚举类型 */
enum Gender {
Male,
Female
}
let humanBean : {name: string, gender: Gender};
humanBean = {
name: 'iFinder',
gender: Gender.Male
}
console.log(humanBean.gender === Gender.Male);
2.7 类的别名与合并对象
//表示需要同时满足两个变量的属性
let mix: {name: string} & {color: number};
mix = {
name: "mix12",
color: 126
}
/**类型的别名 */
//通过type起名,方便同一类型的复用
type myType = string | number | boolean;
let test1: myType;
let test2: myType;