typescript

飞跃广告 發表於 2019-12-21 19:30:00

一、介绍
1.typescript是由微软开发的一款开源的编程语言
2.ts是js的超级，拓展了js语法，更像java/c#这样面向对象语言，更适合开发大型项目。
3.谷歌也在大力支持ts,谷歌的angular2x+ 就是基于ts语法的。
4.最新的Vue ,React 也可以集成ts。
二、安装和编译
1.安装：npm install -g typescript
2.生成配置文件：tsc --init  创建tsconfig.json 文件（eg:可修改输出地址“outDir”：“./js”,等配置）
3.编译：tsc hello.ts  (hello.ts 是自己建的ts名)
4.点击菜单栏任务-运行任务  点击tsc 监视-tsconfig.json ,然后就可以自动生成代码了。
三、ts的数据类型
1.布尔类型（boolean）
2.数字类型（number）
3.字符串类型（string）
4.数组类型（array）
5.元祖类型（tuple）
6.枚举类型（enum）
7.任意类型（any）
8.null 和 undfined
9.void 类型
10.never类型
四、各类型的用法
1.布尔类型（boolean）
<div>
<div class="cnblogs_code">
<pre>let flag:boolean = true;
flag =false;</pre>
</div>
2.数字类型（number）
</div>
<div class="cnblogs_code">
<div>
<div>let num:number;</div>
<div>num =3;</div>
</div>
</div>
3.字符串类型（string）
<div class="cnblogs_code">
<pre>let str:string = '';
str = 'I am string';</pre>
</div>
4.数组类型（array）
<div class="cnblogs_code">
<pre>let arr:string[]=[];
arr = ['1','2','3','4']; or let arr:Array<number> =;</pre>
</div>
5.元祖类型（tuple）
<div class="cnblogs_code">
<pre>//已知数组元素的个数，并且知道每个元素的类型 let tupleArr : =['lalala',2];</pre>
</div>
6.枚举类型（enum）
<div class="cnblogs_code">
<pre>enum Color{
red = 1,
blue,
orange = 5,
green = 7
}
let redNum:Color = Color.red //1
let blueNum:Color = Color.blue //2
let orangeNum:Color = Color.orange //5

let red:string = Color //red
let blue:string = Color //blue
let orange:string = Color //orange</pre>
</div>
7.任意类型（any）
<div class="cnblogs_code">
<pre>let notSure:any = 4;
notSure = 'maybe a string instead';
notSure = false; //okay</pre>
</div>
8.null 和 undfined
<div class="cnblogs_code">
<pre> //strictNullChecks标记的启用是在tsconfig.json文件里进行配置。
// {
// "compilerOptions": { //编译选项,可以被忽略，这时编译器会使用默认值
// "strictNullChecks": false, //在严格的null检查模式下，null和undefined值不包含在任何类型里，只允许赋值给void和本身对应的类型。
// }
// }
//"strictNullChecks": false,
//默认情况下，null 和 undefined 是其它类型的子类型，可以赋值给其它类型，如number类型，此时，赋值后的类型会变成 null 或 undefined。
let hh: number;
hh = null; //ok的
hh = undefined;//ok的

//"strictNullChecks": true,
let ss: number;
ss = null; //提示不可以
ss = undefined;//提示不可以 //定义没有赋值就是undifined; let aa :string | undifined; console.log(aa)//undefined //一个元素可能是number，null，undifined let num: number | null | undefined num=123;</pre>
</div>
9.void 类型
<div class="cnblogs_code">
<pre>//表示方法没有返回任何类型
function run(): void {
console.log(111);

}
run()
//表示传参是number类型，函数返回值也是number类型
function sum(num:number): number {
console.log(111);
return num + 123
}
sum(12);</pre>
</div>
10.never类型
<div class="cnblogs_code">
<pre>//never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 // 即使 any也不可以赋值给never。通常表现为抛出异常或无法执行到终止点（例如无线循环）。比如：
let x: never;
let y: number;

// 运行错误，数字类型不能转为 never 类型
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (() => { throw new Error('exception') })();

// 运行正确，never 类型可以赋值给数字类型
y = (() => { throw new Error('exception') })();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
throw new Error(message);
}

// 返回值为 never 的函数可以是无限循环这种无法被执行到的终止点的情况
function loop(): never {
while (true) { }
}</pre>
</div>
五、类
1.类的写法
2.类的继承
3.属性修饰符（public、protected、private）
4.必传参数和可选参数
<div class="cnblogs_code">
<pre>//类里面的修饰符:ts里定义属性的时候提供了三种修饰符:
/*
public:共有在类里面、子类、类外面都可以访问
protected：保护类型在类里面，子类里面可以访问，在类外部没法访问
private:私有在类里面可以访问，类外面和子类都不访问
属性如果不加修饰符，默认是public
*/
class Person {
name: string; //必传，属性修饰符这里没写就默认是public，同public name:string;
 private sex: string;
protected age?: number; //age：可有可没有

//namepro:必传，agepro：可传可不传，可选参数必须配置到参数的最后面 //‘lisi’是namepro的默认值
constructor(namepro: string = 'lisi', sexpro: string = '男', agepro?: number) {
 this.name = namepro;
 this.age = agepro;
 this.sex = sexpro;
}
run(): void {
 console.log(this.name);
}
}
let zhangsan = new Person('zhangsan', '女');
zhangsan.run();
zhangsan.age;//提示出错。age是保护类型

class Web extends Person {
constructor(name: string) {
 super(name) //继承父级的参数需要同过super函数传值
}
work() {
 console.log(this.sex); //sex是父类的私有属性，所以子类是访问不到的，这里会提示错误

}
}</pre>
</div>
5.参数中的三点运算符
<div class="cnblogs_code">
<pre>//三点运算符，接受新参传过来的值
function sumFn(...result: number[]): number {
let sum: number = 0;
for (let i = 0; i < result.length; i++) {
 sum += result;
}
return sum;
}
sumFn(1, 2, 3, 4);
sumFn(1, 2, 3, 4, 5, 6)
//如果有默认的参数，那传参前面就是默认的参数，剩下的就在。。。的result中
function sumFn(a:number,b:number,...result: number[]): number {
let sum: number = a+b;
for (let i = 0; i < result.length; i++) {
 sum += result;
}
return sum;
}
sumFn(1, 2, 3, 4);
sumFn(1, 2, 3, 4, 5, 6)</pre>
</div>
六、ts函数重载
1.ts中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的
<div class="cnblogs_code">
<pre>function getInfo(name: string): string;
function getInfo(age: number): string;
function getInfo(str: any): any {
if (typeof str === 'string') {
 return '我叫' + str;
} else {
 return '我的年龄' + str;
}
}
getInfo('张三')//我叫张三
getInfo(20)//我的年龄20</pre>
</div>
七、类的静态属性静态方法
<div class="cnblogs_code">
<pre>1. /*es5中的写法*/  function Person () {
　　// this.run = function () {} // 实例方法
　　// this.run = ()=> {}
}
Person.run = function () {} // 静态方法
 2./*es6的写法*/ 
class Person1 {
　　name:string;
　　static sex = 'man'; // 静态属性
　　constructor(name: string) {
　　　　this.name = name;
　　}　　
　　eat() {
　　　　console.log(`${this.name}吃饭`)
　　}
　　static work() {
　　console.log(`这是一个静态方法` + Person1.sex)
　　// console.log(`${this.name}哈哈`) // 错误的写法，静态方法里面无法调用类的属性、方法。
　　}
}
var p = new Person1('aaa');
p.eat(); // 实例方法调用
Person1.work(); // 静态方法调用</pre>
</div>
八、ts中的抽象类和抽象方法,多态
1.typescript中的抽象类是提供其它类的基类，不能直接被实例化；
2.用abstract关键字定义的抽象方法和抽象类，不包括具体实现必须在派生类实现。
3. 抽象类: abstract 修饰，里面可以没有抽象方法。但有抽象方法(abstract method)的类必须声明为抽象类(abstract class)
4.抽象类用于定义标准
5. 多态:父类定义一个方法不去实现，让继承它的子类去实现  每一个子类有不同的表现
<div class="cnblogs_code">
<pre>abstract class Animal {
name: string;
constructor(name: string) {
 this.name = name;
}
//抽象方法，不包含具体实现，要求子类中必须实现此方法
 abstract eat(): any;
//非抽象方法，无需要求子类实现、重写
run(): void {
 console.log('非抽象方法，不一定要子类实现、重写');
}
}
//子类中必须实现父类抽象方法，否则ts编译报错
class Dog extends Animal {
eat() {
 return this.name + '吃鱼'
}
}
class Cat extends Animal {
//子类中必须实现父类抽象方法，否则ts编译报错
 eat() {
 return this.name + "吃鱼";
}
}
var dog = new Dog("tom");
var cat = new Cat("kitty");
console.log(dog.eat());
console.log(cat.eat());

//多态，一种事物的不同表现形态。如下面的代码中先声明变量f是Animal类型，具体是Dog还是Cat，在new 对象时才知道
//如果是Dog，则f.eat()调用的是Dog类中的eat方法；如果是Cat，则f.eat()调用的是Cat类中的eat方法，这就是多态！！！
var f: Animal;//声明变量为Animal类型
//f=new Dog("sunny");
f = new Cat("sunny");
console.log(f.eat());</pre>
</div>
九、接口
1.接口：行为和动作的规范，对批量方法进行约束
2.接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面
3.分类：属性接口、函数类型接口、可索引接口、类类型接口
（1）属性接口：
<div class="cnblogs_code">
<pre>//属性接口
interface fullName{
firstName:string;
secondName:string;
}
function getName(name:fullName):void{
console.log(name.firstName + name.secondName);
}
getName({
firstName:'Li',
secondName:'haha'
})</pre>
</div>
<div class="cnblogs_code">
<pre>interface Shape {
head: string;
arm: string;
}
interface Human {
name: string;
age: number;
shape: Shape;
say(word: string): void;
}

let jack: Human = {
name: 'Jack',
age: 18,
shape: {
 head: 'head',
 arm: 'arm'
},
say(word: string) {
 console.log(word)
}
}
jack.say('hi')</pre>
</div>
（2）函数类型接口：
<div class="cnblogs_code">
<pre>//函数类型接口
interface Fn{
(key:string,val:string):string;
}
let add1:Fn = function(key:string,val:string):string{
return key+val;
}
let add2:Fn = function(key:string,val:string){
return `${key}------${val}`
}</pre>
</div>
（3）可索引接口（数组对象的约束，不常用）
<div class="cnblogs_code">
<pre>//ts定义数组的方式
let arr1: number[] = ;
let arr2: Array<string> = ['11', '22'];
//可索引接口的实现
interface UserArr {
: string
}
let arr3: UserArr = ['aa', 'bb'] //ok
console.log(arr3);
let arr4:UserArr=;//报错

interface UserObj{
:string
}
let arr5:UserObj ={name:'张三'} //OK，但是这样实现已经不是数组，没有意义了，所以不常用</pre>
</div>
（4）类类型接口（对类的约束，和抽象类有点像）
<div class="cnblogs_code">
<pre>interface Aniaml1 {
name: string;
eat(str: string): void;
}
//implements ,是对类Aniaml1的实现
class Dog1 implements Aniaml1 {
name: string;
constructor(name: string) {
 this.name = name;
}
eat(str: string) {
 console.log(this.name + '吃粮食' + str);

}
}
let d = new Dog1('小黑');
d.eat('肉');</pre>
</div>
4.接口的拓展：接口可以继承接口
<div class="cnblogs_code">
<pre>interface Animal {
eat(): void;
}
interface Person extends Animal {
work(): void;
}
class Web implements Person {
name: string;
constructor(name: string) {
 this.name = name;
}
eat() {
 console.log(this.name + '喜欢吃馒头');
}
work() {
 console.log(this.name + '写代码');
}
}
let zhangsan = new Web('zhangsan');
zhangsan.work();</pre>
</div>
十、泛型
1.泛型的定义：指在定义函数、接口或者类的时候，不预先指定其类型，而是在使用时手动指定其类型的一种特性
2.泛型分类：泛型函数、泛型类、泛型接口
（1）泛型函数
<div class="cnblogs_code">
<pre>//使用泛型函数（T：类型变量）
function myfn<T>(args: T): T {
return args;
}
let output = myfn<string>("Hello"); //明确传入类型参数
let output2 = myfn("Hello")//不传入类型参数，TS根据上下文自动推断类型
//使用泛型变量（这可以让我们把泛型变量T当做类型的一部分使用，而不是整个类型）
function myfn1<T>(args: T[]): T[] {
console.log(args.length)
return args;
}
function myfn2<T>(args: Array<T>): Array<T> {
console.log(args.length);
return args;
}</pre>
</div>
（2）泛型类
<div class="cnblogs_code">
<pre>class add<T>{
value: T;
add: (x: T, y: T) => T;
}
let myTest = new add<number>();
myTest.value = 0;
myTest.add = function (x, y) {
return x + y
}</pre>
</div>
（3）泛型接口
<div class="cnblogs_code">
<pre>//第一种方法
interface Test {
<T>(args: T): T
}
let myTest: Test = function <T>(args: T): T {
return args;
}
myTest<string>('20');
myTest<string>(20);

//第二种方法
interface Test1<T> {
(args: T): T
}
function myfn1<T>(args: T): T {
return args;
}
let myTest1: Test1<string> = myfn1;
myTest1('20') //ok
myTest1(20)//报错</pre>
</div>
 
（4）泛型约束（类型变量继承接口）
<div class="cnblogs_code">
<pre>//例中，传入的参数必须具有length属性
interface Test{
length:number;
}
function myfn<T extends Test>(args:T):T{
console.log(args.length)
return args;
}
myfn(3); //error
myfn("abc") //3</pre>
</div>
十一：模块
1.模块的概念
2.模块导出的几种方式：export导出声明、export导出语句、export default、import 导入模块
3.模块封装（DB库）
4.命名空间
十二、装饰器
1.概念
2.分类：属性装饰器、方法装饰器、方法参数装饰器、类装饰器（装饰器的执行顺序也是这样）
3.装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参）
（1）普通装饰器
<div class="cnblogs_code">
<pre>//类装饰器
function logClass(target: any) {
console.log(target); //httpClient类
params.prototype.apiUrl = '动态扩展的属性';
params.prototype.run = function () {
 console.log('动态拓展的方法');
}
}

@logClass
class httpClient {
constructor() {

}
getData() {

}
}
let http: any = new httpClient();</pre>
</div>
<div class="cnblogs_code">
<pre>//类装饰器重载构造函数和当前类的方法（普通装饰器）
function logClass(target: any) { //target:httpClient 类
return class extends target { //装饰器重载构造函数
 apiUrl: any = '我是修改后的数据';
 getData() {
 this.apiUrl + '----';
 console.log(this.apiUrl);
 }
}

}

@logClass
class httpClient {
public apiUrl: string | undefined;
constructor() {
 this.apiUrl = '我是构造函数里面的apiUrl';
}
getData() {
 console.log(this.apiUrl);
}
}
let http: any = new httpClient();
console.log(http.apiUrl);//我是修改后的数据</pre>
</div>
 
（2）装饰器工厂（可传参）
     2.1   类装饰器
<div class="cnblogs_code">
<pre>//类装饰器（装饰器工厂的方式）
function logClass(params: any) {//params：传的参数

return function (target: any) {//target:httpClient类
 console.log(params);//hello
 console.log(target);//httpClient类

 target.prototype.apiUrl = params; //可以用上传的参数
 target.prototype.run = function () {
 console.log('动态拓展的方法');
 }
}
}

@logClass('hello') //可以传参
class httpClient {
constructor() {

}
getData() {

}
}
let http: any = new httpClient();
console.log(http.apiUrl);//hello</pre>
</div>
　　2.2  属性装饰器
<div class="cnblogs_code">
<pre>//属性装饰器
function logProperty(params: any) { //params：传的值：我是属性装饰器
return function (target: any, attr: any) { //target:httpClient 类，attr：apiUrl
 target = params;
}
}
class httpClient {
@logProperty('我是属性装饰器') //注意后面是不能加分号的
public apiUrl: string | undefined;
constructor() {
 this.apiUrl = '我是构造函数里面的apiUrl';
}
getData() {
 console.log(this.apiUrl);
}
}
let http: any = new httpClient();
console.log(http.apiUrl);//我是属性装饰器</pre>
</div>
2.3 方法装饰器//方法装饰器
<div class="cnblogs_code">
<pre>function get(params: any) { //params：传的值：我是方法装饰器
//target:httpClient类，methodName：方法名getData， desc:方法的描述
return function (target: any, methodName: any, desc: any) {
 target.addPara = '我是拓展的属性';//同类装饰器的方法
 target.addFn = function () { //同类装饰器的方法 
 console.log('我是拓展的方法');
 }
 //修改装饰器的方法，把装饰器里面传入的参数改为string类型 
 //获取当前的方法 desc.value =getData() {console.log(this.apiUrl);}
 //先保存当前的方法
 let oldMethond = desc.value;
 //修改当前的方法
 desc.value = function (...args: any[]) {
 args = args.map((val) => {
 return String(val)
 })
 console.log(args);//['123','xxx'] 　　　　　　　console.log(params); //我是方法装饰器 
 //将原来的方法继承到修改后的方法里面，这样既有修改的方法，又包含原有未修改的方法
 oldMethond.apply(this, args)
 }
}
}
class httpClient {
public apiUrl: string | undefined;
constructor() {
 this.apiUrl = '我是构造函数里面的apiUrl';
}
@get('我是方法装饰器')
getData(...args: any[]) {
 console.log(args); //['123','xxx']
 console.log(this.apiUrl); //我是构造函数里面的apiUrl
 }
}
let http: any = new httpClient();
http.getData;
//['123','xxx'] //我是方法装饰器 //['123','xxx']
//我是构造函数里面的apiUrl</pre>
</div>
2.4 方法参数装饰器
<div class="cnblogs_code">
<pre>//方法参数装饰器:可以为类的原型增加一些元素数据（一般不用，类装饰器就可以做到这些）
function logParams(params: any) { //params：传的值：我是方法参数装饰器
//target:httpClient类，methodName：方法名getData， paramsIndex:函数参数的index索引
return function (target: any, methodName: any, paramsIndex: any) {
 target.addUrl = 'params';//可以为类的原型增加一些元素数据
 }
}
class httpClient {
public apiUrl: string | undefined;
constructor() {
}

getData( @logParams('我是方法参数装饰器') uuid:any) {
 console.log(uuid); //haha
 }
}
let http: any = new httpClient();
http.getData('haha');</pre>
</div> 
来源：https://www.cnblogs.com/zhengyulu/p/12077981.html

頁: [1]

琼殿技术论坛's Archiver

typescript