ts学习（一）：基础篇1

已于 2023-07-15 16:50:09 修改
阅读量283 收藏
点赞数
分类专栏： ts 文章标签： 学习 typescript
于 2023-07-15 14:50:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43964866/article/details/126785721
版权

旨在记录！
这篇人都学废了，本想记录常用类型，越学越多，每一个都很重要…

🔸图表总结🔸

编号类型关键字语法示例说明
1string变量名：stringlet name:string字符串类型
2number变量名：numberlet age:number数字类型
3boolean变量名：booleanlet isShow:boolean布尔值
4array类型[]let names: []; | Array<类型>数组
5元组tuple[类型，类型，类型]let subject: [string, string, number,]元组就是固定长度的数组
6字面量变量名：字面量值let name: ‘小白’ | aa;使用字面量作为具体类型时，取值就必须是该字面量的值
7obejct变量名：objectlet test:object对象； [propName: any] 添加任意属性
8any变量名：anylet test:any不清楚类型可使用
9unknown变量名：unknownlet test:unlnown类型安全的any
10void变量名:voidlet test:void表示空。函数中表示没有返回值
11never-不会出现的值，没有值函数中表示没有返回值
12enum-enum Sex { woman, man}枚举。用于定义数值集合
13&--同时满足
14typetype 变量 = 值type name = “小白” | “小黑”类型别名
15let/var/constlet 变量名 | var 变量名 | const 变量名-声明变量
16解构-数组解构 | 对象解构 | 数组展开 | 对象展开将声明的一组变量与相同结构的数组或者对象的元素值一一对应
17类型保护-类型断言|联合类型|交叉类型-

一、string: 字符串类型

可使用${expr}形式嵌入表达式或变量

在这里插入图片描述

    // 示例：
    // ${expr}

    let name: string = 'angular';
    let output: string = `${name}是一个框架;`;

    console.log(output); // angular是一个框架;

二、number: 数字类型

在这里插入图片描述

三、boolean: 布尔值

在这里插入图片描述

四、array:数组

语法：

  1. 类型 [ ]
  2. Array<类型>

1. 类型 [ ]

    let names: string[]; //数组内全部类型都为 string 类型
    names = ["aa", "bb"];

2. Array<类型>

    let ages: Array<number>; //数组内全部类型都为 number 类型
    ages = [11, 22, 33];

    或
    
    let infos: any[]; //数组内可以使用任意类型的值
    infos = [
      { name: 'aa', age: 11 },
      { name: 'bb', age: 22 }
    ]

五、tuple: 元组

元组类型：

  1. 元组就是固定长度的数组。
  2. 表示已知元素数量和类型的数组。（各类型元素不必相同）
  3. 语法：[类型，类型，类型]；
    // 数组的长度和类型必须对上

    let subject: [string, string, number, string];
    
    subject = ['小a', '小b', 3, '小d']

六、字面量

使用字面量作为具体类型时，取值就必须是该字面量的值

在这里插入图片描述

七、object:对象

1. 基础用法

    let demoObj: object;
    demoObj = {}; //success
    demoObj = { name: 'abc', age: 11 }; //success

2.   ？

    let demoObj: { name: string, age?: number }; // ? 表示该属性可有可无
    demoObj = { name: 'abc' }; // 如果没有 ?,该对象会报错

3.   [propName: any] 添加任意属性

  1. 允许添加新的任意属性，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集
  2. 写法: [propName: string]: number | string | boolean | Array | any;
     // type:string:表示属性的值只能为string 同理···
     let demoObj: { name: string, age: number, [propName: string]: any; };                    
         demoObj = { name: 'abc', age: 11, sex: '男' }; // success
     // demoObj没有定义"sex"属性，propName可以添加任何未知参数

八、any: 任意类型

    let demoObj: any;
    demoObj = "abc"; // success
    demoObj = 123; // success
    demoObj = ['aa', 'bb']; //success
    demoObj = { name: 'abc', age: 11 }; //success

九、unknown: 类型安全的any

  1. unknown的变量不能直接赋值给其他变量
   // demoObj虽然赋值为string类型，同为string类型的name还是赋值失败
    let demoObj: unknown;
    let name: string;
    
    demoObj = "abc"; // success
    name = demoObj; //error

在这里插入图片描述

十、void: 用来表示空

（1）以函数为例，表示该函数没有返回值

 setLog(): void {
    return "here some text"; // error
    return undefined; // success
    return null; // success
    return; // success
  }

在这里插入图片描述

（2）属性

    let demo: void;
    demo = "abc"; //error
    demo = 123; //error
    demo = undefined; // success
    demo = null; //success

在这里插入图片描述

十一、never: 不会出现的值，没有值，没有返回结果

抛出异常

  setLog(): never {
    return "here some text"; // error
    return undefined; // error
    return null; // error
    return; // error
    console.log("ceshi")  //添加打印语句也会报错
    
    throw new Error('error'); //success
  }

在这里插入图片描述在这里插入图片描述

十二、enum: 枚举。用于定义数值集合

  1. 枚举默认下标是0，可以手动修改枚举下标值
  2. 枚举成员默认分配数字，可以修改为字符串枚举
  3. 枚举：把值一一列举，取值的时候只有这几个可以使用

（1）基础用法

// 定义一个枚举类型
enum Sex {
  woman, man
  // 0,1
}

export class OtherComponent implements OnInit {
  constructor() { }
  ngOnInit() {

    let person: { name: string, sex: Sex }
    person = { name: 'abc', sex: Sex.man }
    console.log(person)
    // {name: 'abc', sex: 1}
  }
}

（2）手动修改枚举下标值

enum Sex {
  woman = 2, man, normal = 6
  // 2,3,6
}

export class OtherComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    console.log(Sex)
    // 完整的输出：{2: 'woman', 3: 'man', 6: 'normal', woman: 2, man: 3, normal: 6}

    console.log(Sex["2"]) //woman
    console.log(Sex.man) //3
  }

}

（3）定义枚举值为字符串

enum Sex {
  Woman = "woman",
  man = "man",
  normal = "normal"
}

export class OtherComponent implements OnInit {
  constructor() { }
  
  ngOnInit() {
    console.log(Sex)
    // 完整的输出：{Woman: 'woman', man: 'man', normal: 'normal'}
    
    console.log(Sex.Woman) // woman
    console.log(Sex.man) // man
    // 这样值就变成了更具有含义的字符串了
  }
}

十三、& 同时满足

    let person: { name: string } & { age: number };
    person = { name: 'abc', age: '11' }; // error
    person = { name: 'abc', age: 11 }; // success

在这里插入图片描述

十四、type: 类型别名

给类型取一个新的名字，来引用类型。多用于联合类型
语法：
type 变量 = 值

1. 基本类型示例

    type Name = string;
    let newName: Name = 123; // 报错：不能将类型“number”分配给类型“string”。
    let newName: Name = "abc"; // success

	let number1: 1 | 2 | 3 | 4 | 5;
	let number2: 1 | 2 | 3 | 4 | 5;
	// number1,number2 取值完全一样，可以使用类型别名
	
	type numberTpe = 1 | 2 | 3 | 4 | 5;
	
	let number1: numberTpe;
	let number2: numberTpe;
	number1 = 3; // success
	number2 = 6; // error 不在取值范围内

在这里插入图片描述

2. 对象示例

 type Person = { name: string, age?: number };
 let newPerson: Person = { name: '小a', age: 1 }; // success

3. 联合类型示例

    type Person = string | number | boolean;
    let name: Person = '小白'; //success
    let age: Person = 12; // success
    let isMan: Person = false; //success

4. 函数示例

    type Person = () => string;

    let newPerson: Person = () => '人类';

5. 元组示例

    type Person = [string, number];
    let man: Person = ["小白", 1]; // ['小白', 1]

十五、 let、var、const 声明

1. let 声明

  1. 只在当前块级作用域内有效
  2. 不能在声明之前赋值
  3. let声明变量

示例一：基本用法

// b只在if语句内有效
  demo(isTrue: boolean) {
    let txt = "hello";
    if (isTrue) {
      let b = '你好';
      console.log(txt);
      return b;
    }
    console.log(b); // error b在函数体内未被定义;
  }

在这里插入图片描述
示例2：未声明之前赋值

 demo(isTrue: boolean) {
    txt = 'hi'; //error
    let txt = "hello";
    if (isTrue) {
      let b = '你好';
      console.log(txt);
      return b;
    }
    console.log(b);
  }

在这里插入图片描述
示例3：不允许重复声明
在这里插入图片描述
以重复声明，使用最后声明的那个值；

    var txt = 1;
    var txt = 2;
    console.log(txt); //2

2. const 声明

  1. const声明是常量。
  2. 与let声明相似。与let同样的作用域规则，但常量不能被重新赋值。
  3. 如果常量定义的是对象，对象中的属性值可被重新赋值。

示例1: 常量重新赋值

	const name = 'abc';
	name = 'xiaohuang'; // error

在这里插入图片描述
示例2: 常量对象重新赋值

对常量对象中的属性值重新赋值。

        const person = { name: "abc", age: 11 };
	    person = { name: "xiaohua", age: 13 }; //error 直接改变对象报错
	    person.name = "dahuang";
	    person.age = 15;
	    console.log(person); // success {name: 'dahuang', age: 15}

在这里插入图片描述

十六、解构

将声明的一组变量与相同结构的数组或者对象的元素值一一对应，并将变量相对应的元素进行赋值。

1. 数组解构

    let array = [1, 2, 3];
    let [one, two] = array;
    console.log(one, two); // 相当于 array[0],array[1] 1,2

1.1 变量交换


    let array = [1, 2, 3];
    let [one, two] = array;

    [one, two] = [two, one]; //变量交换

    console.log(one, two); // 2,1

1.2 用于函数参数

  ngOnInit() {

    let array = [1, 2];
    let [one, two] = array;

    this.test([one, two]);

  }

  test([one, two]: [number, number]) {
    console.log(one + two); //3
  }

1.3 “…” 语法：展开操作符

  1. 用于创建可变长的参数列表
  2. 创建剩余变量
    let array = [1, 2, 3, 4, 5];
    let [one, ...two] = array;

    console.log(one); // 1
    console.log(two); // [2,3,4,5]

可以忽略不关心的尾随元素或其它元素

    let array = [1, 2, 3, 4, 5];
    let [one, ...two] = array;
    let [, second, , fourth] = array;

    console.log(second); // 2
    console.log(fourth); // 4

2. 对象解构

    let object = { top: 10, right: 20, bottom: 30, left: 40 };
    let { top, right, bottom, left } = object;

    console.log(top, right, bottom, left); // 10 20 30 40

2.1 对象赋值给自定义变量

将对象中的属性赋值给自定义变量（属性重命名）

    let object = { top: 10, right: 20, bottom: 30, left: 40 };
    let { top: up, right, bottom: dowm, left } = object;
    /* 
      相当于：let up = object.top;
              let down = object.bottom;
    */
    console.log(up, right, dowm, left); // 10 20 30 40

对象解构的写法中，等号左边写法类似一个对象，不过属性名对应的不是值，是要赋值的变量名。

// 左边是解构，右边是对象
let { top: up, bottom: dowm } = { top: 10, bottom: 20 };

2.2 展开对象
展开对象后，相同的属性名重新赋值后会覆盖原属性

    let object = { top: 10, right: 20, bottom: 30, left: 40 };

    let test = { ...object, top: "up" };

    console.log(test); // {top: 'up', right: 20, bottom: 30, left: 40}

展开对象后，不属于原对象的属性会新增在对象中

    let object = { top: 10, right: 20, bottom: 30, left: 40 };

    let test = { ...object, name: "ha" };

    console.log(object); // { top: 10, right: 20, bottom: 30, left: 40 };
    console.log(test); // {top: 10, right: 20, bottom: 30, left: 40, name: 'ha'}

十七、类型保护【类型断言|联合类型|交叉类型】

1. 类型断言： as

  1. 类型断言：断定这个类型是什么，来告诉解析器变量的实际类型（指定一个值的类型）
  2. 语法：值 as 类型 或者 <类型>值

（1） as 语法

语法：变量 as 类型

    demoObj = "abc"; // success
    name = demoObj as string; //success

（2）“尖括号” 写法

    let stringValue: any = 'hello lv luo';
    let stringLength: number = (<string>stringValue).length;

2. 联合类型：|

  1. 对象多种类型（例如身份证：有的身份证中含x字母，有的是纯数字。因此可以使用联合类型）
  2. 语法：类型a | 类型b
  3. 类型之间是“或”的关系
 let IDCard = number | string;

3. 交叉类型： &

  1. 将多个类型合并成一个类型
  2. 合并后的类型将包含所有合并前的类型的全部成员和特性
    interface a { name: string };
    interface b { age: number };

    type User = a & b; // user:{name:string, age:number};

    let user: User = { name: 'aa', age: 13 }; // succness

参考链接：

  1. TypeScript类型1
  2. TypeScript 基础学习指南
某些开发
关注
专栏目录
【TS学习笔记】基础篇
Go_going_的博客
11-23 1111
对象中主要包含两个部分： 属性、方法这些是我在跟着网课学的时候自己敲下来的总结笔记,作为自己的笔记记录.如果能帮到你们当然也很好.如果有什么错误和不足,欢迎补充.最后的泛型我也是听的一知半解,跟着做了项目也没有用到这个🕳 在get set中定义的时候 显示说标识符重复其实很好理解,就相当于说 get 是一种声明说此时是get方法.后面的是方法名称.比如name在上面已经被定义过了,后面的方法名称写name当然会报错.get里面return 的值是属性的值就可以了.
Ts学习之路-基础篇（剩余参数、重载）
qq_43506529的博客
12-22 831
Ts学习之路-基础篇（剩余参数、重载）
学习TypeScript(TS)，这一篇就足够了
subsistent的博客
01-27 3750
打开tsconfig.json文件，找到complilerOptions属性下的removeComments:true选项，把注释去掉，这个配置项的意思是，编译时不显示注释，也就是编译出来的js文件不显示注释内容。抽象类的关键词是abstract，里边的抽象方法也是abstract开头的，抽象方法需要在被继承的类中被覆盖重写，并且必须包含这个抽象方法，代表的是一种约束。public从英文字面的解释就是公共的或者说是公众的，在程序里的意思就是允许在类的内部和外部被调用，public 也是类中默认的访问属性。
TypeScript学习（基础篇）
qq_41765777的博客
12-25 1172
在现代的Web开发生态系统中，JavaScript已经成为一种必备的技术。然而，随着应用的增大，JavaScript的一些限制开始显现，例如缺乏静态类型检查和编译时错误检查。这正是TypeScript发挥作用的地方，TypeScript是一种静态类型的编程语言，它是JavaScript的超集。其优于JavaScript最大的两个优势就是提供可选的强静态类型和更为完善的面向对象特性。
TS 类型体操：图解一个复杂高级类型
开源世界
02-15 879
今天就来做个高难度的体操，它会综合运用模式匹配、构造、递归等套路，对提升类型编程水平很有帮助。 我们要实现的高级类型如下： 它的类型参数是参数字符串 query string，会返回解析出的参数对象，如果有同名的参数，会把值做合并。 先不着急实现，我们先回顾下相关的类型体操基础： 类型体操基础 模式匹配 模式匹配是指用一个类型匹配一个模式类型来提取其中的部分类型到 infer 声明的局部变量中。 比如提取 a=b 中的 a 和 b： 这种模式匹配的套路在数组、字符串、函数等类型中都有很多应用。 构造 映
Rocket-chip学习基础篇
JACKLJ1998的博客
05-22 6324
目录 1.Chipyard Basics 环境构建（done） 2.Chipyard Simulation 仿真 3.Chipyard included RTL Generator 一些生成器组件 4.Chipyard Development Tools 5.VLSI Flow 6.Customization 10. Prototyping Flow chipyard document 6.9 教程 2.1 Rocket Pipeline 3.1 基本Config top to...
移动机器人激光SLAM导航（一）：理论基础篇
qq_42994487的博客
07-20 4556
移动机器人激光SLAM导航（一）：理论基础篇
TS 学习指南
汤玉鹏
07-01 3747
一份不可多得的 TS 学习指南（1.8W字） 阿宝哥第一次使用TypeScript是在 Angular 2.x 项目中，那时候 TypeScript 还没有进入大众的视野。然而现在学习 TypeScript 的小伙伴越来越多了，本文阿宝哥将从16个方面入手，带你一步步学习 TypeScript，感兴趣的小伙伴不要错过。 一、TypeScript 是什么 TypeScript是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的...
不废话的将ts一篇文章写完
红岸基地
02-01 938
网上很多写ts的教程的，但是我觉得写的太繁琐了，这里我直接将基础用法写上，包括编译后的js代码，以便于你们进行对比， 包括一些常见的报错信息，你们可以对比一下报错信息， 我尽量不废话的将ts一篇文章写完！编译为js结果：一旦做了类型限制，后面是不可以进行非该类型赋值的，比如(其他同理)：编译为js结果：一旦类型做了限制，数组里面不可以进行非该类型的赋值，比如（其他同理）：如果想在数组里面进行定义不同的类型，可以使用元组，元组在js中本身是不存在的，ts中存在的一种数据类型。
一篇浅显易懂的 TS 入门指南
前端达人
05-17 7556
大家好，我叫小杜杜，是一个喜欢动手敲代码的小菜鸟，我认为代码应该亲自敲一遍，才能更好的熟记于心，作为一个程序员，我们与自己的小伙伴共同开发、维护于一个项目，需要保持代码的整洁、清晰，使组内的任意一位小伙伴都能快速理解每一代码模块，因此制定了各种各样的规则，去约束我们写代码，只有这样才能我们的代码更加具有可读性、可维护性和健壮性我们用什么去管理自己的项目，在前几年中，我们使...
TypeScript学习文档-基础篇（完结）.doc
07-08
TypeScript 学习文档 - 基础篇（完结） TypeScript 是一种静态类型的、编译时执行的语言，作为 JavaScript 的超集，增加了类型系统和其他一些功能。下面是 TypeScript 学习文档的基础篇，涵盖了 TypeScript 的基本...
论文学习笔记 | IJCAI-2021 TS-TCC：通过时间和上下文对比进行时间序列表示学习
叶庭云 成为自己的光
07-28 170
IJCAI-2021 TS-TCC：通过时间和上下文对比进行时间序列表示学习
机器学习中的交叉验证技术：基础篇：掌握模型选择的基础，提升机器学习准确率
[机器学习中的交叉验证技术：基础篇：掌握模型选择的基础，提升机器学习准确率](https://www.mathworks.com/discovery/cross-validation/_jcr_content/mainParsys/image.adapt.full.medium.jpg/1706180466423.jpg) ...
报错：TS2307: Cannot find module ‘cc‘.如何解决？
**My Coding Family**
07-31 983
🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！
2022年了，Typescript系列：基础篇(一)，了解一下？
ilovely_的博客
03-15 1201
这段时间以来，TS的发展可谓是如日中天，本想偷个懒去看看别人写的分享贴来学习，找了近十篇之后，发现要么是比较浅显，要么有些偏差，没有找到很满意的。
嵌入式通信协议：UART简明学习笔记
weixin_73867577的博客
10-31 748
学习UART串口的简明学习笔记
ORB-SLAM2源码学习：ORBextractor.cc：IC_Angle 利用灰度质心法求解关键点方向角
2301_76831056的博客
11-01 658
IC_Angle 利用灰度质心法求解关键点方向角并在computeOrientation函数中被调用计算图像中所有特征点的方向。
嵌入式通信协议：MODBUS简明学习笔记
最新发布
weixin_73867577的博客
11-02 209
学习Modbus的简明学习笔记
jsp web学习二(比较老的啦)
qq_52122048的博客
10-29 1069
JavaBean模式(MVC)适合开发复杂的web应用，在这种模式下，servlet负责处理用户请求，jsp负责数据显示，javabean负责封装数据。Servlet+JSP+JavaBean模式程序各个模块之间层次清晰，web开发推荐采用此种模式。一个良好的JavaWeb项目架构应该具有以上的11个包，这样显得层次分明，各个层之间的职责也很清晰明了，搭建JavaWeb项目架构时，就。
CCNA实验指南：实战篇，奠定IT基础
1. 实验1：Cisco路由器基础配置 - 学员将学习路由器的基本设置，包括基本命令行操作和接口管理。 2. 实验2：配置路由器接口及可变长子网掩码（VLSM） - 这个实验涉及网络地址的规划和子网划分，提高网络利用率和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值