ts的总结

最新推荐文章于 2024-05-17 16:12:22 发布
最新推荐文章于 2024-05-17 16:12:22 发布
阅读量1k 收藏
点赞数 1
分类专栏： vue 文章标签： javascript ts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57774738/article/details/121308186
版权

ts简介：

  • ts是什么：ts是js的超集
  • 特点：提供类的类型和es6的支持
  • 优点：
    • 增加代码的可读性和可维护性以及兼容性
    • 类型系统是最好的文档
    • 在编译阶段就发现错误，比运行时发现错误好
    • 增加了编辑器和ide的功能，代码不全、接口提示、跳转到定义、重构
    • js文件可重命名为.ts文件
    • 不显式的定义类型，也能自动作出类型推论
    • 可定义一切类型
    • 即使typescript编译报错，也可生成js文件
    • 兼容第三方库，即使第三方库不是用ts写的，也可编写单独的类型文件供ts读取
  • 缺点：
    • 集成到构建流程需要工作量，可能和一些库结合的不是很完美
  • 安装：
    • npm i -g typescript 执行tsc ts文件来编译会生成js文件或者ide支持

（1）数据类型

数据类型主要作用是：方便数据维护和数据校验

	布尔类型 boolean
	数字类型 number
	字符串类型 string
	数组类型 array
	元组类型 tuple
	枚举类型 enum
	任意类型 any
	null 和 undefined
	void类型
	never类型

数组的三种写法：

	var arr:number[] = [11,22,33];
	console.log(arr);

	var arr:Arrary<number> =[11,22,33];
	console.log(arr);

	var arr:any[] =['1yhuyhub1',22,33,true];
	console.log(arr);

枚举类型
字面意思理解就是 单独每一个拿出来 进行举例说明

	enum Flag = {success =11; error=2}
	let s:Flag = Flag.success;
	console.log(s); //11

	enum Color = {blue,red,success =1; error=2}
	let c:Color = Color.blue;
	console.log(c); //1

如果没有类型进行赋值，就是没有赋值，则打印的就是下标；
任意类型
任意类型可以解决很多问题，比如处理元素节点；
在这里插入图片描述
如上图：如果使用Object 这样就会报错， 但是如果使用any 就不会出现这样 报错
在这里插入图片描述
null和undefined
null 和 undefined是其他类型（never）的子类型；

	let num: number;
	console.log(num)  // undefined

那么 正确使用呢,

	let num: number | undefined;
	num = 123
	console.log(num)  // 123

如果没有值的话，可以同时定义一个当前类型和其他的null或者undefined类型

那么 一个元素可能是 number类型 可能是 null 也可能是undefined类型
所以 定义未赋值 或者 定义赋值都不会报错；

viod类型

void表示没有任何类型，一般用于定义方法的时候没有返回值


	// 表示方法没有返回任何类型
	
	function par(): void {
	    console.log('par')
	}
	
	par()

有返回值的话，那么就要指定返回值类型

	function par(): number {
    return 123
	}

	par()

never类型
never 类型表示的是那些永不存在的值的类型。 例如， never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never 类型，当它们被永不为真的类型保护所约束时。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。

 var a:never;
 a=(()=>{
   throw new Error('错误');
 })()

（2）ts函数写法

原始的ES6

	// 函数类声明
	function par(){
	    return 'par'
	}
	
	// 匿名类函数
	var par2 = function (){
	    return 'par2'
	}

ts写法：声明函数 和 匿名函数

	// 函数声明
	function run():string{
	 return 'ni shi haoren'
	}

// 匿名函数
	var fun2 = function():string{
	 return 'ni shi haoren'
	}

ts中的默认参数

	function getInfo(name:string,age:number=20):string{
	   if(age){
	     return `${name}---${age}`
	   }else{
	     return `${name}---`
	   }
	}
	getInfo('zhansan',9999);

剩余参数

	function sum(...result:number[]):number{
	   let sum = 0;
	   for(let i=0;i<result.length;i++){
	     sum+=result[i];
	   }
	   return sum;
	}
	sum(1，2，3，4);

如果说使用多个参数，且包含剩余参数的函数，那么剩余参数必须放到最后面；

ts函数重载
Java中的方法重载，指的是两个或者两个以上同名的函数，但是它们的参数是不一样的，这时候就会出现函数重载；

typescript中的重载，通过一个函数提供多个函数类型定义来实现重载；

ES5中出现同名的方法，下面的会替换上面的方法；

ts实现


// ts中的重载
	function gteInfo(name:string):string;
	function getInfo(age:number):string;
	function getInfo(str:any):any{
	    if(typeof str === 'string'){
	        return str
	    }else {
	        return str
	    }
	}
	
	console.log(getInfo())

（3） 类

ES5中的类

	function Person{
	   this.name = 'zhansan';
	   this.age = 20;
	}
	var p = new Person();
	console.log(p.name);

ES5构造函数 和 原型链 里面增加方法

	function Person{
	   this.name = 'zhansan';
	   this.age = 20;
	   this.run = function(){
	     console.log(this.name);
	   }
	}
	Person.prototype.sex = 'man';
	Person.prototype.work = function(){
	 console.log(this.name + "在工作");
	}
	var p = new Person();
	p.work();

那么 原型链上面的方法可以被实例共享，但是构造函数的不会；
ES5增加静态方法

	function Person{
	   this.name = 'zhansan';
	   this.age = 20;
	   this.run = function(){
	     console.log(this.name);
	   }
	}
	Person.getInfo = function(){
	 console.log("23456789);
	};
	// 使用静态方法
	Person.getInfo();

（4）继承

ES5继承----对象冒充继承

	function Person{
	   this.name = 'zhansan';
	   this.age = 20;
	   this.run = function(){
	     console.log(this.name);
	   }
	}
	Person.prototype.sex = 'man';
	Person.prototype.work = function(){
	 console.log(this.name + "在工作");
	}
	
	//定义一个其他方法
	function Dog(){
	  Person.call(this);
	}
	
	//使用继承的方法
	var p = new Dog();
	p.run();
	// p.work(); 不可以

继承的实现： 对象冒充可以继承构造函数里面的属性和方法，但是不能继承 原型链的方法；
ES5继承----原型链继承

	function Person{
	   this.name = 'zhansan';
	   this.age = 20;
	   this.run = function(){
	     console.log(this.name);
	   }
	}
	Person.prototype.sex = 'man';
	Person.prototype.work = function(){
	 console.log(this.name + "在工作");
	}
	
	//定义一个其他方法
	function Dog(){
	  console.log('我是好人’);
	}
	
	//使用继承的方法
	Dog.prototype = new Person();
	var dog = new Dog();
	dog.work();
	dog.run();

原型链的问题：实例化的时候 没法给父类传参；

ES5继承----原型链+构造函数 继承

	function Person{
	   this.name = 'zhansan';
	   this.age = 20;
	   this.run = function(){
	     console.log(this.name);
	   }
	}
	Person.prototype.sex = 'man';
	Person.prototype.work = function(){
	 console.log(this.name + "在工作");
	}
	
	//定义一个其他方法
	function Dog(name, age){
	   Person.call(this,name,age);
	}
	
	//使用继承的方法
	Dog.prototype = new Person();
	var dog = new Dog('zhangsan',89);
	dog.work();
	dog.run();

ts中的类定义

	class Person{
	    name:string;
	    construct(n:string){ // 实例化的时候会触发construct
	       this.name = n;
	    }
	    run():void{
	      console.log(this.name);
	    }
	}
	var p = new Person('zhansan');
	p.run();

ts中的继承

	class Person{
	    name:string;
	    construct(n:string){ // 实例化的时候会触发construct
	       this.name = n;
	    }
	    run():void{
	      console.log(this.name);
	    }
	}
	
	class Dog extends Person{
	  construct(n:string){ 
	      super(name); //构造函数和super都要有；super 相当于 调用父类的构造函数
	   }
	}
	var p = new Dog('zhansan');
	p.run();

（5） 类的修饰符

  • public 公有修饰符，可以在类外使用修饰符的属性或行为。
  • protected 受保护修饰符，可以在类（子类）内使用修饰符的属性或行为
  • private 私有修手符，只可以在当前类（非子类）使用修饰符的属性或行为。
  • readonly 将属性设置为只读的，只读的属性不可被修改，只读属性必须在声明时或构造函数里被初始化。

private的使用

	class Parson{
	    protected name:string; // 保护类型
	    constructor(name:string) {
	        this.name = name;
	    }
	    run():string{
	        return `$(this.name)在做事情`
	    }
	}
	var p = new Parson('哈哈哈')
	console.log(p.name)

那么 name 会提示一个编写的错误

（6）静态属性和静态方法

ES5 静态属性 和 静态方法

		// 静态属性 静态方法 
	function Parson() {
	    this.run = function () {    // 实例方法
	        
	    }
	}
	
	Parson.name = '哈哈哈'; // 静态属性
	Parson.run2 = function (){      // 静态属性
	    
	}
	
	var  p = new Parson();
	Parson.run2();      // 静态方法的一个调用

静态属性 和 静态方法都是直接绑定在函数上面的，实例属性和实例方法都是在函数内部的；

ts的 静态属性 和 静态方法

	class Person{
	  public name:string;
	  public age:number = 20;
	  constructor(name:string){
	    this.name = name;
	  }
	  run(){  // 实例方法
	    console.log(this.name + "123456");
	  }
	  work(){ // 实例方法
	    console.log(this.name+"098765");
	  }
	  static print(){ // 静态方法
	    console.log(this.name+"098765-"+ this.age);
	  }
	}
	var p = new Person();
	p.run(); // 使用实例方法
	Person.print();  //使用静态方法
  • 实例方法 必须在外部实例化以后才能使用；
  • 实例方法 前面加上static 就会变成静态方法；
  • 静态方法不能使用基本属性，只能使用静态属性；

（7）抽象方法

  • 抽象类
    一个类要求它的字类必须包含指定方法，它是提供其他类继承的基类，不能被直接实例化。

定义抽象类：

	abstract class Animal {
	  abstract eat():any ;
	}
	
	let a=new Animal();  // 报错：无法创建抽象类的实例
  • 抽象方法
	// 父类
	abstract class Animal {
	  public name: string;
	  constructor(name: string) {
	    this.name = name;
	  }
	
	  abstract eat(): any;
	}
	// 子类Dog
	class Dog extends Animal {
	  constructor(name: string) {
	    super(name);
	  }
	  // 抽象类的子类必须实现抽象类里面的抽象方法
	  eat() {
	    console.log(this.name + '在吃肉');
	  }
	}
	let d = new Dog('达摩');
	d.eat();
	
	// 子类Cat
	class Cat extends Animal {       
	  constructor(name: string) {
	    super(name);
	  }
	}

子类Cat不实现eat()方法，就会报错：非抽象类“Cat”不会实现继承自“Animal”类的抽象成员“eat”，即子类Cat不会自动继承父类的方法

（8）接口

ts中的接口

接口的一种规范的定义，它定义了行为和动作的规范，是一批类所需要遵守的规范，接口不关这些类中的内部状态，不会去关这些类的方法的实现细节，比抽象类型更规范。

接口类型

  • 属性接口 （规范数据类型）
  • 函数类型接口 （对方法传参数和返回值进行一个约束）
  • 索引接口 （数组，对象）
  • 类型接口 （对类的一个约束）

定义的方法

	function print():void{
	 console.log('12345678');
	}
	print();

定义方法（参数的限定）

	function print(label:string):void{
	 console.log('12345678');
	}
	print();

接口的实现

对批量方法传入参数进行约束；

	interface FullName{
  first:string, // 接口属性
  second:string
}
function name(name:FullName){ 
  console.log(name.first + ''----"+ name.second);
}

// name('23456'); 错误写法
var obj = {  //必须传入 first,second
  age:20,
  first:'zhangsan',
  second:'siwu'
}

name(obj);

传入的对象必须包含接口需要实现的参数；

（9）泛型函数

泛型： 可以支持不特定的数据类型； 要求：传入的参数和返回的参数一致；

举例：只能返回string类型

	function Parson(value:string):string{
	    return value
	}

方法一：
使用any可以实现，但是相当于放弃了类型检查；

	function Parson(value:any):any{
	return '哈哈哈'；
	}
	Parson(123);
	Parson('hhh')

上面可以返回 string，和 number；

返回类型可以是任意类型实现

		function Parson<T>(value:T):any{
	    return '123';
	}
	
	Parson<number>(123);
	Parson<string>('这是一个泛型');

将返回值的类型设置成any即可；

（10）泛型类

举例：比如有一个算法，需要同时支持返回数字和返回字符串两种类型，就可以通过范型类来实现；

	class Point<T>{
	    x: T
	    y: T
	    z?: T
	    constructor(x: T,y: T,z?: T) {
	        this.x = x
	        this.y = y
	        this.z = z
	    }
	}
	let p1 = new Point(1,2,3);
	let p2 = new Point<string>("1","2","3");
	let p3: Point<number> = new Point(1,2);
	console.log(p1)
	console.log(p2)

（11）ts的命名空间

命名空间里面的方法要使用，必须暴露出去；

	//命名空间主要目的就是将一个模块内部再进行作用域的划分, 防止一些命名冲突
	
	export namespace Time {
	    export function format(time: string){
	        return "2021-11-12"
	    }
	}
	
	export namespace Price {
	    export function format(price: number) {
	        return "$15,000"
	    }
	}
Tom长官
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TS总结.md
09-15
TS总结.md
CCIE TS总结
12-09
CCIE 路由交换考试TroutlbeShooting总结
Spark中的三种隐式转换
Yang_1103002408的博客
10-22 3149
1.使用SparkSQL中toDF时 2.Spark整合Kudu,创建Kudu对象时 3.Spark中一些Scala类型转Java类型时(.asjava的隐式转换)
TS 总结
m0_65269374的博客
07-09 1302
TS总结
TypeScript 常见知识点总结及实例解析【复习、了解必看！】
最新发布
计算机小white博客
05-17 892
本文简明扼要地总结了 TypeScript 的常见知识点，并通过一些小实例展示了它的使用方法，旨在帮助初学者快速掌握 TypeScript 的基础知识，也为有需要复习的开发者提供一个便捷的知识点梳理。
学习TS的总结
weixin_34124939的博客
10-09 362
解开疑惑 最近刚刚接触TS,我刚开始不太理解，为啥要用TS,限制很多还要转换，觉得js也有类型转换，强类型和弱类型也没有很大的区别，不懂为啥那么的推崇TS。 之后慢慢的了解思考之后，我明白了些用TS的好处 方便更准确的检查错误。 给程序带来稳定性和可预测性。 静态类型检查。项目中不再需要typeof检查类型，数据类型之前就规定好的。比如react传过来的props就不需要写proptypes。 ...
ts 的学习总结
weixin_50902154的博客
04-29 226
新概念： 接口 、泛型 、装饰器 ts中的类型 let num:number =123; let str:string = 'wangweiqi' let isShow:boolean = false; let arr:number[]=[1,2,3,4] let arr1:Array<number|string>=[5,10,15,"wwq"] //这里声明的联合类型 //定义一个元组 let person:[string,number]=['aaa',18] //数组
TS知识总结
qq_52467890的博客
06-22 293
TS简介总结
vue3+ts总结.xmind
12-05
vue3+ts总结.xmind
新TS问题总结
04-11
新TS问题总结,针对新TS的Trouble Point进行分析，列举
数字电视MPEG TS总结
04-23
以下是对MPEG-TS的详细总结： 1. **基本结构** MPEG-TS是以包（Packet）为单位的数据流，每个包由32个字节组成，其中前4个字节是包头，剩下的27个字节是有效载荷，通常包含音频、视频或其他数据。包头中的PID...
TS学习总结
m0_53547902的博客
07-06 1212
1.基本语法变量声明： 与JS的关键字不一样，TS采用或申明变量，并且在后面加上类型说明，例如： 命名规则： 只能出现数字、字母、下划线、$、且不能以数字开头，可采用驼峰命名法。运算符（选取几个例子)：算数运算符:，赋值运算符:，关系运算符：，位运算符：，逻辑运算符：，三元运算符：，类型运算符：，字符串运算符：；2.函数TS是由JS发展过来的，在众多语法方面和JS大致相同，因此：函数的定义，大致的格式如下： 函数的调用，大致格式如下： 在调用函数时，可以传递参数，用隔开；可选参数，可用代替，可选
ts学习总结
qq_41445106的博客
07-06 437
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 1196
ts header 结构 字段解释 sync_bye 是包中的第一个字节，TS包以固定的8bit的同步字节开始，所有的TS传送包，同步字都是唯一的OX47，用于建立发送端和接收端包的同步。MPEG-2解码器接收到MPEG-2 TS流时，首先检测包结构，在TS流中查找同步字节：总是OX47，总位于TS包开始位置，固定间隔为188字节。同时满足这两个条件，可以确定同步。如果出现一个字节为47he...
ts基础入门学习总结
badoldboy的博客
05-05 688
typescript变量的类型注释数据类型布尔类型（boolean）数字类型（number）字符串类型(string)数组类型（array）元组类型（tuple） 属于数组的一种any枚举类型（enum）null 和 undefinedvoid类型never类型对象类型（Object）可选属性函数函数的定义函数可选参数默认参数剩余参数ts函数重载类ts中类的定义ts中实现继承 extends、 super类里面的修饰符静态属性 静态方法typescript中的抽象类接口属性接口接口 ：可选属性函数类型接
Ts 常用写法
天高任鸟飞
08-25 1243
/* bad */ const str: String = 'foo'; const bool: Boolean = true; const num: Number = 1; const symb: Symbol = Symbol('foo'); const func: Function = () => 1; const lowerObj: object = {}; const capitalObj1: Object = 1; const capitalObj2: Object = { a: 's..
TS写法,一看就会
Wancc123的博客
07-10 858
4、 函数类型 可选参数 在可传可不传参数名称后面加?3、void 类型 函数没有返回值 那么返回值。1、指定 参数和返回值 的类型。
vue3.2的TS写法
11-20 3462
父组件 子组件 也可以用interface定义{id: number, content: string} 有没有发现上面用TS写的不可以写默认值，怎么解决呢用withDefaults：第一个参数是defineProps， 第二个参数是一个对象 对象里面的属性是父组件传值的属性，直接给属性赋值 二、自定义事件TS写法(defineEmits) 父组件 子组件 总结说明： 因为defineEmits()返回的是一个函数， 所以我们定义泛型的时候也是定义成函数类型参数一： e的值是
TS101内核详解：计算模块与寄存器结构
总结来说，DSP TigerSHARC TS101的内核是一个复杂且高度集成的系统，专为高速数字信号处理而设计。通过理解其内核结构，可以更好地掌握如何利用该处理器进行高效计算和数据处理任务。这份课件详细介绍了TS101内核的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值