[TS基础]开发环境,类型的声明

iFinder@

已于 2022-08-27 23:01:09 修改

阅读量477

点赞数

分类专栏： TypeScript学习笔记文章标签： javascript typescript 前端

于 2022-08-27 02:54:17 首次发布

本文链接：https://blog.csdn.net/iFinder00159/article/details/126552695

版权

TypeScript学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

TS环境搭建,类型声明

一.开发环境的搭建
二.TS的类型
笔记说明

一.开发环境的搭建

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的数据类型

类型	示例	描述
`number`	1, -33 , 2.2	任意的数字
`string`	“iFinder”, “Nancy”	任意字符串
`boolean`	true, false	布尔值
`any`	*	任意类型
`unknown`	*	类型安全的any
`void`	空值(undefined)	没有值或者undefined
`never`	没有值	不能是任何值
`object`	{name:“iFInder”}	任意的JS对象
`array`	[1, 2, 3, 4, 5]	任意的JS数组
`tuple`	[4 ,5]	元素,TS新增类型,固定长度数组
`enum`	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;