TS 总结

最新推荐文章于 2024-07-08 20:20:35 发布
最新推荐文章于 2024-07-08 20:20:35 发布
阅读量1.3k 收藏 3
点赞数
文章标签： javascript typescript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65269374/article/details/125700162
版权

文章目录

1.TS概念

TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。

TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

总的来说，Typescript是拥有类型的javascript超级，它可以编译成普通，干净，完整的javascript代码。

2.语法

  • 同JS一样，TS也要区分大小写；
  • TS会忽略程序中出现的空格、制表符和换行符；
  • 单行注释：//；多行注释/**/；

3.变量

  • 不使用var，使用let或const申明变量，并加上类型说明，且作用域为块级即以{}为界
* let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断
* lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';
* let age: number = 89;
* let age = 64;//error!

* const pi: number = 3.14159;//pi以后不可改变，类似常量
* pi = 3.14;//error!

4.类

4.1类的定义和使用

类是属性（有些什么）和函数（能干什么）的集合，是生成对象（Object）或类实例的模板。

//类的定义和使用
class MyInfo { //class是关键字，类名默认全部大写首字母
name: string; //属性
weather: string; //属性
constructor(name: string, weather: string){ //构造函数，一般用于初始化。如果没有，TS会自动生成一个，以备用new创建类实例时调用。
* this.name = name;
* this.weather = weather;
* }
* printInfo(): void { //其它函数，无返回值
* console.log(`Hello, ${this.name}.`);
* console.log(`Today is ${this.weather}.`);
* }
* }
* let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象，即该类的实例
* myData.printInfo();

4.2 类的属性和函数的访问权限

类中的属性和函数都有访问权限，默认为public即全局可访问，其次为protected即可在类的内部和其子类的内部可访问，最后为private，只能在该类内部可访问。

* //访问权限
* class MyInfo { //class是关键字，类名默认全部大写首字母
* public name: string; //public属性，可省略
* private _weather: string; //私有属性，习惯以_开头进行命名
* constructor(name: string, weather: string){ //构造函数，一般用于初始化
* this.name = name;
* this._weather = weather;
* }
* printInfo(): void { //其它函数
* this._test();
* console.log(`Hello, ${this.name}.`);
* console.log(`Today is ${this._weather}.`);
* }
* private _test(): void {
* console.log('You can not call me outside!');
* }
* }
* let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
* console.log(myData._weather); //error!
* myData._test(); //error
* myData.printInfo();

4.3 存取器-getter、setter

当在类外部时，建议设置getter和setter操作其private属性，即使public属性也如此。

//getter和setter
class MyInfo { //class是关键字，类名默认全部大写首字母
  private readonly _name: string; //私有属性，外部不可访问。readonly使其只能在初始化时赋值，以后不可更改。    
  private _weather: string; //私有属性，习惯以_开头进行命名

  constructor(name: string, weather: string){ //构造函数，一般用于初始化
    this._name = name;
    this._weather = weather;
  }
  get name(): string {
    return this._name;
  }
  set name(value: string) {  //error！ _name有readonly属性
    this._name = value;
  }
  get weather(): string {
    return this._weather;
  }
  set weather(value: string) {
    this._weather = value;
  } 
}
  
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData.name, myData.weather);
myData.weather = 'sunny'; //OK
myData.name = 'Wang'; //error!
console.log(myData);

4.4 静态属性

类中的属性或函数有static修饰，则可直接使用而不需要实例化

//静态属性，内建或自定义，无需new即可使用
* console.log(Math.round(89.64)); //90
* console.log(Math.pow(2, 8)); //256
* class MyStaticClass {
* static place = 'Earth';
* static printInfo() {
* console.log('We have only one Earth!');
* }
* }
* console.log(MyStaticClass.place);
* MyStaticClass.printInfo();

5.解构

将对象、数组中的元素拆分到指定变量中，以方便使用

  • 解构数组

    • 解构赋值
      let data = [1,11,111];
  let [first,second,third] = data;
  let first = data[0];
  let second = data[1];
  let third = data[2];
    • 作用于函数参数
      function functionname ([first,second,third]:[number,number,number])
  {
   console.log(first);
   console.log(second);
   console.log(third);
  }
  functionname(data);

  • 解构对象

    • 解构赋值
     let str = {
 a:"i"
 b:"am"
 c:"yyds"
 };
 let {b,c} = str;
    • 指定类型
     let {b,c}:{b:string,c:string} = str;

6.数组

  • 数组的定义

1.方法一：

var arrayname[:datatype];
arrayname = [data1,data2,data3];

2.方法二：

var arrayname:number[] =  [1,11,111]

3.方法三：

var arrayname:Array <number> = [1,11,111]

4.方法四：

let arrayname:[number,string] = [1,'yyds yyd yy s']

7.函数

完整函数类型定义

//命名函数，有完整的参数和返回类型。可以不用，TS将自动进行类型推断但推荐使用！
 function add(x: number, y: number): number {
 return x + y;
 }
 //匿名函数
 let myAdd = function(x: number, y: number): number { return x + y; };
 console.log(myAdd(1, '2'));//error
 console.log(myAdd(1));//error
 console.log(typeof myAdd(1, 2));//number

可选参数

 //可选参数，必须放在必要参数后
function greeting(firstName: string, lastName?: string) {
 if(lastName)
 return `Hello ${firstName} ${lastName}!`;
 }
 return `Hello ${firstName}!`;
 }
 console.log(greeting('QiGe'));
 console.log(greeting('QiGe', 'Wang'));
 console.log(greeting('QiGe', 'Wang', 'Yong'));//error!

默认参数

//默认参数，不必在必要参数后
function greeting(firstName: string, lastName = 'Wang') {
return `Hello ${firstName} ${lastName}!`;
 }
 console.log(greeting('QiGe'));
 console.log(greeting('QiGe', 'HaHaHa'));
 console.log(greeting('QiGe', 'HaHaHa', 'Yong'));//error!

剩余参数

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。 有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来， 在TypeScript里，你可以把所有参数收集到一个变量里

//剩余参数，会被当做个数不限的可选参数。可以一个都没有，也可以有任意个
 function greeting(firstName: string, ...restName: string[]) {
 return `Hello ${firstName} ${restName.join(' ')}!`;
 }
 console.log(greeting('Osama', 'bin', 'Muhammad', 'bin', 'Awad', 'bin', 'Laden'));
 console.log(greeting('Laden'));

箭头函数

  • 特点：简化函数定义、解决this问题
//无参数，函数体代码只有一行，则该行结果即为函数返回值
 let greeting1 = () => `Hello TS!`;
 console.log(greeting1());
  //一个参数，函数体代码只有一行，则该行结果即为函数返回值
 let greeting2 = (name: string) => `Hello ${name}`;
 console.log(greeting2('QiGe'));
 //两个及以上的参数，函数体代码只有一行，则该行结果即为函数返回值
 let add1 = (n1: number, n2: number) => n1 + n2;
 console.log(add1(1, 2));
 //两个及以上的参数，函数体代码多于一行,则必须用{}包裹，且显式给出return
 let add2 = (n1: number, n2: number) => {
 let sum = n1 + n2;
 return sum;//改为sum++结果如何？
 }
 console.log(add2(1, 2));

8.语句

if…else语句

    if(condition)
    {
      //当条件为true时执行的代码
    }
    else
    {
      //当条件不为true时执行的代码
    }

switch语句

    switch(n)
    {
        case 1 :
             //执行代码块1
             break;//阻止代码自动向下一个case执行
        case 2 :
             //执行代码块2
             break;  
        default:
            //匹配不存在时做的事情
    }

for循环

    for (代码块开始前执行的语句;循环的条件;代码块执行后的执行语句)
    {
     //代码块
    }

while循环

   while(条件)
   {
     //代码块
   }
   while的变体
   do
   {
     //代码块
   }
   while(条件);

break和continue语句
break用于跳出循环;
continue中断当前的循环中的迭代，然后继续循环下一个迭代;

9.模块Module

  • 对于大型的项目，我们需要使用模块进行管理。每个 .ts 文件就是一个模块，通过 export 来对外部模块暴露元素，通过 import 来引入模块。

10.TS框架Angular

在此阶段，首先需要完成Angular的环境配置，然后从基本的英雄之旅的教程，一步一步熟悉掌握此框架；

英雄之旅的教程包含：

  • 创建项目；
  • 英雄编辑器；
  • 显示列表；
  • 创建特性组件；
  • 添加服务；
  • 添加导航；
  • 从服务器获取数据。
爆爆舟舟龙
关注
ts简单使用（自己总结）
m0_68456754的博客
06-21 762
自己总结
Ts总结5、TypeScript 元组
qq_33911541的博客
02-20 483
Ts总结5、TypeScript 元组
ts的总结
weixin_57774738的博客
11-13 1096
ts简介： ts是什么：ts是js的超集 特点：提供类的类型和es6的支持 优点： 增加代码的可读性和可维护性以及包容性 类型系统是最好的文档 在编译阶段就发现错误，比运行时发现错误好 增加了编辑器和ide的功能，代码不全、接口提示、跳转到定义、重构 js文件可重命名为.ts文件 不显式的定义类型，也能自动作出类型推论 可定义一切类型 即使typescript编译报错，也可生成js文件 兼容第三方库，即使第三方库不是用ts写的，也可编写单独的类型文件供ts读取 缺点： 集成到构建流程需要工作量，可
前端框架--TypeScript
最新发布
qq_56438516的博客
07-08 1657
TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
ts总结大全
2302_79245293的博客
02-17 1850
TS类型除了原始js类型之外，还增加类型，例如：枚举、接口、泛型、字面量、自定义、类型断言、any、类型声明文件。ts把alink的类型推断为HTMLElement(普通的标签类型)--->前面必须是锚点连接。address:{province:'安徽',city：'黄山'}let degree:'专科' | '本科' | '研究生'='本科'address:{province:'安徽',city:'黄山'}:number//加上？let obj2:{a:10}={a:10}//值为固定的、
TS知识总结
qq_52467890的博客
06-22 307
TS简介总结
TS学习总结
m0_53547902的博客
07-06 1246
1.基本语法变量声明： 与JS的关键字不一样，TS采用或申明变量，并且在后面加上类型说明，例如： 命名规则： 只能出现数字、字母、下划线、$、且不能以数字开头，可采用驼峰命名法。运算符（选取几个例子)：算数运算符:，赋值运算符:，关系运算符：，位运算符：，逻辑运算符：，三元运算符：，类型运算符：，字符串运算符：；2.函数TS是由JS发展过来的，在众多语法方面和JS大致相同，因此：函数的定义，大致的格式如下： 函数的调用，大致格式如下： 在调用函数时，可以传递参数，用隔开；可选参数，可用代替，可选
TS总结.md
09-15
TS总结.md
js和ts总结
m0_56689281的博客
07-10 803
js
CCIE TS总结
12-09
CCIE 路由交换考试TroutlbeShooting总结
Ts总结9、TS的interface 接口(extends关键字继承、type命令的&运算符)
qq_33911541的博客
02-28 1503
Ts总结9、TS的interface 接口(extends关键字继承、type命令的&运算符)
ts-game:TypeScript WebGL游戏框架
05-14
TypeScript WebGL游戏框架 从理论上讲，它是用于构建html5游戏的面向代码的小型框架。 实际上，这仅仅是开始。 快速演示 -适用于，2018年2月 ，2019年1月 特征 按字母顺序： 图形用户界面按钮 帮手 动作管理器-暂停执行动作（简单或连续），将其链接起来，依此类推。 update()方法中不再有计时器和标志 事件-通过订阅功能可以轻松观察到 池-不要在短时间内创建/删除项目。 重用它们。 补间-执行基于曲线的动画 输入-键盘，鼠标，触摸 资产加载-与承诺异步 数学—矢量，矩阵 物理-简单的碰撞检测 使成为 WebGL渲染器 纹理图集 字体渲染 渲染2D 雪碧 文本 场景 节点 相机 场景-游戏，菜单，选项，暂停管理例程 声音-播放声音和音乐 正在进行哪些功能？ Sprite动画（基于Spritesheet和对象） 物理引擎-p2（ ） 更多GUI（滑
TS流格式及解码框架介绍
02-04
TS流最早是用在数字广播电视中，随着苹果HLS协议以及Android的普及，在移动流媒体领域，越来越需要对于TS流的码流格式有个更深入的认识，本文就是收集网上的资源整合而成。如侵犯谁的版权，请告知，会尽快删除！
taro-ts-demo:taro框架ts初体验
04-09
技术栈 React + Taro + Dva + Sass + ES6/ES7 + TypeScript 文档 License
Spark中的三种隐式转换
Yang_1103002408的博客
10-22 3177
1.使用SparkSQL中toDF时 2.Spark整合Kudu,创建Kudu对象时 3.Spark中一些Scala类型转Java类型时(.asjava的隐式转换)
ts学习总结
qq_41445106的博客
07-06 468
ts学习总结 ts最重要的特性：类型系统、适用于任何规模 数值 let num: number = 1 但是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字 字符串 let name: string = 'wujuan' 布尔值 let isDone: boolean = false 使用构造函数 Boolean 创造的对象不是布尔值 let createdByNewBoolean: boolean = new Boolean(1) 则会报错, 事实上 new Boolean() 返回的是一
mpeg-ts总结
qq_39977813的博客
03-23 1246
ts header 结构 字段解释 sync_bye 是包中的第一个字节，TS包以固定的8bit的同步字节开始，所有的TS传送包，同步字都是唯一的OX47，用于建立发送端和接收端包的同步。MPEG-2解码器接收到MPEG-2 TS流时，首先检测包结构，在TS流中查找同步字节：总是OX47，总位于TS包开始位置，固定间隔为188字节。同时满足这两个条件，可以确定同步。如果出现一个字节为47he...
ts基础入门学习总结
badoldboy的博客
05-05 697
typescript变量的类型注释数据类型布尔类型（boolean）数字类型（number）字符串类型(string)数组类型（array）元组类型（tuple） 属于数组的一种any枚举类型（enum）null 和 undefinedvoid类型never类型对象类型（Object）可选属性函数函数的定义函数可选参数默认参数剩余参数ts函数重载类ts中类的定义ts中实现继承 extends、 super类里面的修饰符静态属性 静态方法typescript中的抽象类接口属性接口接口 ：可选属性函数类型接
理解TS协议：PES数据包详解
总结来说，TS协议通过TS数据包和PES数据包有效地组织和传输音视频流，确保数据的可靠性和同步性。在实际应用中，如数字电视广播、IPTV和流媒体服务，这些协议技术是至关重要的。理解这些基本概念有助于实现和优化音...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值