• [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 !");

    • 1
    • 编译验证
      这个时候的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;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 相比JS来说TS可以更方便的定义入参的类型以返回值的类型
    function [方法名]([变量1] : [类型], [变量2] : [类型], ...) : [返回值类型] {
	...
}

    • 1
    • 2
    • 3
    //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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 补充:如何看到编写的函数的输出结果
      以VSCode为例,新建一个html文件,输入!生成默认模板
      然后在 中添加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>Documenttitle>
head>
<body>
    <script src="02.ts_type.js">script>
    <script src="01.hello.js">script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 建议打开VSCode的自动保存功能,设置焦点改变立即保存,以免发生没保存却在一直编译,输出结果不变的尴尬情况

    2. TS的数据类型

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    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;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    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);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    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];  //长度固定,类型固定

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    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;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    笔记说明

    笔记markdown文件+项目源码
    B站对应视频

  • 相关阅读:
    Docker 网络
    【网络篇】第四篇——网络字节序
    java中一切都是对象，为什么int不用创建对象实例化，而可以直接使用？
    前端性能优化：网站性能优化
    LeetCode --- 1437. Check If All 1‘s Are at Least Length K Places Away 解题报告
    JVM之Class文件分析详解
    Linux单列模式实现线程池
    C语言怎样初始化图形模式？
    2.1万字，30张图详解操作系统常见面试题（收藏版）
    Python数学计算工具1、海伦公式计算三角形面积
  • 原文地址：https://blog.csdn.net/iFinder00159/article/details/126552695