杭州网站制作外包,网站开发的核心技术,微商代理怎么做,app系统软件开发介绍
TypeScript 是 JavaScript 的一个超集#xff0c;添加了静态类型支持和更多现代编程特性#xff0c;提高了代码的可靠性和可维护性。最终会被编译成标准的 JavaScript 代码运行。
使用npm install -g typescript进行全局安装
将编写好的ts代码进行运行#xff0c;第…介绍
TypeScript 是 JavaScript 的一个超集添加了静态类型支持和更多现代编程特性提高了代码的可靠性和可维护性。最终会被编译成标准的 JavaScript 代码运行。
使用npm install -g typescript进行全局安装
将编写好的ts代码进行运行第一种是手动运行直接输入对应的命令tsc加对应的ts文件另一种是使用vscode tsc --init自动运行
基础
1原始数据类型
JavaScript的类型分为两种:原始数据类型(Primitive data types和对象类型(Objecttypes)。 原始数据类型包括:布尔值、数值、字符串、null 、 undefined以及ES6中的新类型 symbol等。
一布尔类型字符串数字类型undefined和null在ts中的使用
export{}
//布尔类型
let flag:booleantrue
console.log(flag)
//数字类型
let num:number20
console.log(num)
//字符串类型
let str1:string李四
str1张三
console.log(str1)//undefined和null
let unf:undefinedundefined
let nu:nullnull
console.log(unf,nu)
编译完成转成js之后的代码
use strict;
Object.defineProperty(exports, __esModule, { value: true });
//布尔类型
let flag true;
console.log(flag);
//数字类型
let num 20;
console.log(num);
//字符串类型
let str1 李四;
str1 张三;
console.log(str1);
//undefined和null
let unf undefined;
let nu null;
console.log(unf, nu);2数组
在ts中进行数组的定义
export{}
//定义数组和前两种基本数据类型有所不同
//方式一
let arr1:number[][1,2,3]
console.log(arr1)
//方式二使用泛型
let arr2:Arraynumber[4,5,6]
console.log(arr2)
被转成js之后
use strict;
Object.defineProperty(exports, __esModule, { value: true });
//定义数组和前两种基本数据类型有所不同
//方式一
let arr1 [1, 2, 3];
console.log(arr1);
//方式二使用泛型
let arr2 [4, 5, 6];
console.log(arr2);
3对象
表示非原始类型除了numberstringboolean之外的类型
export{}
let obj:object{}
let obj2:object{a:1}
obj new String()
objobj2
console.log(obj)
被编译js之后
use strict;
Object.defineProperty(exports, __esModule, { value: true });
let obj {};
let obj2 { a: 1 };
obj new String();
obj obj2;
console.log(obj);4any类型
在typescript中任何类型的值都可以赋值给 any any 也可以赋值给任意类型
export{}let type1:anytrue
type1222
console.log(type1)let newArr:any[][1,2,3,4]
console.log(newArr)
被转换成ts之后和最终的输出结果
use strict;
Object.defineProperty(exports, __esModule, { value: true });
let type1 true;
type1 222;
console.log(type1);
let newArr [1, 2, 3, 4];
console.log(newArr); 5void类型
它表示空值代表没有任何返回值的函数
export{}
function fun1():void{console.log(123)
}
console.log(fun1())
转换成ts之后及输出
use strict;
Object.defineProperty(exports, __esModule, { value: true });
function fun1() {console.log(123);
}
console.log(fun1());6类型推断
ts在没有明确指定类型的时候会推测一个类型,分两种情况
1定义变量的时候直接给变量赋值则定义类型为对应的类型
2定义变量的时候没有赋值则定义类型为any类型
export{}let t1123//这里t1是number类型,如果给t1一个字符串则会有错误提示
let g2;//这里的g2可以是任意类型的相当于any
g2123
g2
g2[]
7联合类型
表示取值可以为多种类型中的一种
export{}
//定义布尔类型和number类型的
let f:boolean|numbertrue//表示这个值可以接受布尔值和number两种的任意一种
f123
ffalse
console.log(f)
8接口-对象类型
什么是接口?
1在面向对象语言中接口(Interfaces)是一个概念它是对行为的抽象而具体如何行动需要由类(classes去实现( implement); 2TypeScript 中的接口是一个非常灵活的概念除了可用于对类的一部分行为进行抽象以外也常用于对「对象的形状(Shape)」进行描述;
3接口它是对行为的抽像用于行为的描述理解为一种约束;
4定义中的属性和类型必须要和使用的相同;
interface Person{name:string,age:number,height?:number,//加了问了表示是一个可选属性,这个属性可以有也可以没有readonly add:string,//定义一个只读的对其行为进行一个约束
}
let P:Person{name:李四,age:18,height:24,add:某某区
}
//如果在对id进行操作,则会给出错误提示
P.id某某区1//这里会错误提示
9接口-数组类型
接口对数组进行约束
interface InewArray{[index:number]:number//表示接口里面有任意值并且只能是number类型
}
//进行定义
let arr:InewArray[1,2,3,4]//如果这里面传入非number类型会有错误提示
console.log(arr)//1234
10接口-函数类型
对函数进行约束
//定义了一个add函数a和b都是number类型
//后面的number表示这个函数的返回为number类型
function add(a:number,b:number): number{return ab
}
console.log(add(1,2))
//另一种定义函数的方式
//这里的问号也是代表可选参数,必选参数不可以放在可选参数的后面
let resfunction(a:string,b?:string):string{return ab
}
console.log(res(type,script))
//多个参数的情况
function fn(x:string,y:string,...args:number[]){console.log(x,y,args)
}
fn(,,1,2,3)
//多个函数类型
function add2(x:string|number,y:string|number):string|number{if(typeof xstringtypeof ystring){return xy}else if(typeof xnumbertypeof ynumber){return xy}
}
add2(2,3)
add2(张三,李四)
11类型断言
将一个联合类型断言为其中一个类型
//定义一个函数获取到一个数字或字符串的长度
//类型断言可以手动指定一个类型,两种方式
//1变量 as 类型
//2,类型 变量
function StringLength(x:string|number):number{if((x as string).length){return (stringx).length}else{return x.toString().length}
}
console.log(StringLength(typescript))
console.log(StringLength(123))
将任何一个类型断言为any 进阶
1类型别名
类型别名用来给一个类型起个新名字
type sstring//给类型起别名
let str:stypescript
console.log(str)
//另一种使用方式
type allstring|number|boolean
let a1:all123
console.log(a1)
2字符串字面量类型
字符串字面量类型用来约束取值只能是某几个字符串中的一个
//例如指定只能取以下的几个值
type stringName张李|李四|王五
//这里的name只能取上面三个中的一个
let name:stringName李四
console.log(name)
3元组
数组合并了相同类型的对象而元组合并了不同类型的对象
//定义一个元组
let Arr:[number,string][123,Script]
//添加内容的时候需要的是number和string类型即可
Arr.push(456)
Arr.push(hhh)
//如果添加的数据越界会给出错误提示
4枚举
枚举(Enum)类型用于取值被限定在一定范围内的比如一周只能有七天颜色限定为红 绿蓝等。
1常数项
枚举的使用
enum NumberType{one1,two2,three,four
}
console.log(NumberType)
注意点 1每个数据值都可以是元素 2如果没有手动赋值默认第一个参数为0,后面的递增加1 3后面的值如果没有手动赋值会根据前面的值递
编译成js之后
(function (NumberType) {NumberType[NumberType[one] 1] one;NumberType[NumberType[two] 2] two;NumberType[NumberType[three] 3] three;NumberType[NumberType[four] 4] four;
})(NumberType || (NumberType {}));
console.log(NumberType);
2计算所得项
//计算所得项
enum abs{red,//这里写了计算所得项需要放置在已经确定的赋值枚举项之前blurblur.length
}
5类
1在类中定义属性和方法
//ts中的类
class Person {//对被传入的属性进行类型限定constructor(name, age) {this.name name;this.age age;}say(str) {console.log(haha, str);}
}
let Obj new Person(张三, 28);
Obj.say(王五);
编译成js之后
class Person {constructor(name, age) {this.name name;this.age age;}say(str) {console.log(haha, str);}
}
let Obj new Person(张三, 28);
Obj.say(王五);
//编译成ts后输出 haha 王五
2使用类进行继承
//使用类进行继承 父类
class Dog{name:stringage:numberconstructor(name:string,age:number){this.namenamethis.ageage}say(str:string){console.log(ha,str)}
}
//子类
class cat extends Dog{constructor(name:string,age:number){//调用父类的构造函数使用supersuper(name,age)}jump(str:string){console.log(jump,str)}
}let cat1new Dog(旺财,4)
console.log(cat1.say(来财))
let cat2new cat(花猫,3)
console.log(cat2.jump(小多多))
被编译之后的js代码
class Dog {constructor(name, age) {this.name name;this.age age;}say(str) {console.log(ha, str);}
}
//子类
class cat extends Dog {constructor(name, age) {//调用父类的构造函数使用supersuper(name, age);}jump(str) {console.log(jump, str);}
}
let cat1 new Dog(旺财, 4);
console.log(cat1.say(来财));
let cat2 new cat(花猫, 3);
console.log(cat2.jump(小多多));
3修饰符publicprivate 和 protected
TypeScript 可以使用三种访问修饰符(Access Modifiers)分别是 public(公共) 、private(私有的) 和protected(受保护的) 1public 修饰的属性或方法是公有的可以在任何地方被访问到默认所有的属性和方法都 是 public 2private修饰的属性或方法是私有的不能在声明它的类的外部访问 3protected 修饰的属性或方法是受保护的它和 private 类似区别是它在子类中也是允许 被访问的
4接口继承类
class newDog{name:stringage:numberconstructor(name:string,age:number){this.namenamethis.ageage}say(str:string){console.log(ha,str)}
}
//接口只会继承类中的实例属性和方法
interface newCat extends newDog{age:number
}
let person:newCat{name:,age:18,say(){}
}
console.log(person) 6类与接口的联合使用
一般来讲一个类只能继承自另一个类有时候不同类之间可以有一些共有的特性这时候就可以把特性提取成接口interfaces)用implements关键字来实现。这个特性大大提高了面向对象的灵活性。
interface Ising{sing()
}
interface Sdance{dance()
}
class obj1 implements Ising{sing(){}
}
class obj2 implements Sdance{dance(){}
}const o1new obj1()
const o2new obj2()
o1.sing()
o2.dance() 7接口的合并
如果定义了两个相同名字的函数接口或类那么它们会合并成一个类型
//合并的数据要一模一样有一处不同会有错误提示
interface Dog{name:来财
}
interface Dog{name:来财,age:15
}const cat:Dog{name:来财,age:15}
console.log(cat)
8泛型
泛型(Generics是指在定义函数、接口或类的时候不预先指定具体的类型而在使用的时候再指定类型的一种特性。 1具体使用
/*
1,定义一个函数传入两个参数第一个参数是数据第二个参数是数量
2,函数的作用根据数量产生对应个数的数据存放在一个数组中
*/
//这里的T表示可以输入任何类型
//如果没有确定会自动进行类型推断
function newGetArrT(value:T,count:number):T[]{let arr:T[][]for(let i0;icount;i){arr.push(value)}return arr
}
console.log(newGetArr(123,3))
2对数据互换位置
function updataStrT,U(t:[T,U]):[U,T]{return [t[1],t[0]]
}
console.log(updataStr([456,123]))
3泛型约束
在函数内部使用泛型变量的时候由于事先不知道它是哪种类型所以不能随意的操作它的属性 或方法。
//获取参数的长度,约束这个任意输入的类型必须有length属性
interface Llength{length:number
}
//通过接口约束类型
function getLengthT extends Llength(x:T):number{return x.length
}
console.log(getLength(123))
4泛型接口和泛型类
//泛型接口
interface IArr{T(value:T,count:number):ArrayT
}
let newGetArr2:IArrfunctionT(value:T,count:number):T[]{let arr:T[][]for(let i0;icount;i){arr.push(value)}return arr
}
console.log(newGetArr2(123,3))
//泛型类
class Person1T{name:stringage:Tconstructor(name:string,age:T){this.namenamethis.ageage}
}
const p1 new Person1String(ts,123)
const p2 new Person1number(456,20)
console.log(p1,p2)
typeSscript使用感受 1有一定的学习成本感觉和学一门新语言差不多; 2和直接使用javascript写代码相比typescript需要编写更多的代码无形之中增加了工作量
