day5|青训营

133 阅读7分钟

深入浅出TypeScript

(1)为什么要学习TS ——TS是JS的超集;增强了类型安全;提高生产力

(2)TS基础类型——boolean,number,string;枚举enum;any,unknown,void;never;数组类型[];元组类型tuple

(2)TS函数类型 ——1^定义:函数是一组一起执行一个任务的语句。您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的。函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。 2^输入参数,3^输出参数,4^函数重载

函数表达式定义 匿名函数:function () {};

使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数,匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。

// ts函数表达式定义 let sum2 = function (x: number, y: number): number { return x + y }

函数声明和函数表达式不同之处 函数声明和函数表达式不同之处在于, 一、在解析javascript(typescript会编译成javascript代码)代码时会‘函数声明提升’(Function declaration Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式。 二、函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以FunctionName()形式调用 。以下是两者差别的两个例子。 //函数声明

FunctionName(); function fnName(){ ... } //正常运行,因为‘提升'了函数声明,函数调用可在函数声明之前

//函数表达式

FunctionName(); var fnName=function(){ ... } //报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后

函数接口定义 接口的定义就是为很多函数定制统一的参数类型和返回类型。

// ts函数定义接口方法: // interface关键字表示使用接口方式定义函数,注意这里的函数只是定义,并不实现 interface sum { (x: number, y: number): number } // 实现在接口中定义的函数 let sum1: sum = function (x: number, y: number) { return x + y }

内置构造函数定义 TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数:

//语法格式如下: var res = new Function ([arg1[, arg2[, ...argN]],] functionBody) //参数说明: //arg1, arg2, ... argN:参数列表。 //functionBody:一个含有包括函数定义的 JavaScript 语句的字符串。

var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); console.log(x);

可选参数 在 TypeScript 函数里,如果我们定义了参数,则我们必须传入这些参数。

除非将这些参数设置为可选,可选参数使用问号标识 ?。

function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName; }

let result1 = buildName("Bob"); // 正确 let result2 = buildName("Bob", "Adams", "Sr."); // 错误,参数太多了 let result3 = buildName("Bob", "Adams"); // 正确

可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的,lastName 必选,那么就要调整它们的位置,把 firstName 放在后面。

如果都是可选参数就没关系。

默认参数 我们也可以设置参数的默认值,这样在调用函数的时候,如果不传入该参数的值,则使用默认参数。

一个参数不能同时设置为可选和默认。

function sum(a:number,b:number = 10) { let sum1 = a * b; console.log("计算结果: ",sum1); } sum(10); //计算结果: 100

sum(10,20)//计算结果: 200

剩余参数 当我们不知道要向函数传入多少个参数,就可以使用剩余参数。

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

函数的最后一个命名参数 [restOfName] 以 … 为前缀,它将成为一个由剩余参数组成的数组,索引值从0(包括)到 restOfName.length(不包括)。

function addNumbers(...nums:number[]) {
var i;
var sum:number = 0; for(i = 0;i<nums.length;i++) { sum = sum + nums[i]; } console.log("和为:",sum) } addNumbers(1,2,3); //和为: 6 addNumbers(10,10,10,10,10);//和为: 50

匿名函数 匿名函数是一个没有函数名的函数。

匿名函数在程序运行时动态声明,除了没有函数名外,其他的与标准函数一样。

我们可以将匿名函数赋值给一个变量,这种表达式就成为函数表达式。这个在上面的函数定义里已经介绍过了。

匿名函数自调用 匿名函数自调用在函数体后使用 () 即可:

//两种写法

//括号外面括号 (function () { var x = "Hello!!";
console.log(x)
})()

//括号里面括号 (function() { var x = "Hello!!";
console.log(x)
}() ); 第一个括号内,创建一个匿名函数;第二个括号,立即执行通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量所以 ( function(){…} )() 内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。

(2)TS interface——定义,特点:可选属性,只读属性,可描述函数类型,可描述自定义属性,总结:接口非常灵活duck typing

当前的文件为一个模块,它相当于有了作用域 export {}

ts中定义一个类,使用class关键字来完成 定义的类,它也可以当前一个类型来使用 ts中定义的类,它有类的修饰符 如果你定义的方法或属性没有指修饰符,则默认为public public 公有的 定义的方法或属性在本类或子类或实例中都可以操作 protected 受保护的 定义的方法或属性只能在本类或子类中操作 private 私有的 定久的方法或属性只能在本类中操作 readonly 定义后,当前的属性它就为只读,不可修改 static 定义的属性为静态属性,定义的方法为静态方法,静态方法中不能使用this 访问器和修改器 getter/setter

标准写法 class Person { // 定义属性 public name: string // 属性进行初始化 constructor(name: string) { this.name = name } }

定义的类,它也可以当前一个类型来使用

class Person { // 定义属性 public name: string // 属性进行初始化 constructor(name: string) { this.name = name } }

let p:Person = new Person("niuniiu") console.log(p.name);

=========简写 class Person{ constructor(public name:string){ let p1:Person = new Person("牛牛") } console.log(p1); } typescript属性的封装时,用到set方法和get方法时的错误提示: ​​Accessors are only available when targeting ECMAScript 5 and higher.

大概就是说:访问器仅在针对ECMAScript 5及更高版本时可用。 可以通过命令指定:

tsc xxx.ts -t es5

class Person{ constructor( public _name:string){} get name(){ return this._name+"@@@" } set name(name:string){ this._name = name } }

let p1:Person = new Person("牛牛") console.log(p1.name) p1.name="niuniu"; console.log(p1.name)

(2)TS 类——定义,特点:增加了public,private,protected修饰符;抽象类:只能被继承,不能被实例化,作为基类,抽象方法必须被子类实现;interface约束类,使用implements关键字

(3)TS 高级类型——联合类型,交叉类型,类型断言,类型别名(type VS interface):定义,相同点:定义函数或对象,允许继承,差异点:interface是TS定义对象,type是用来定义别名方便使用;type可以定义基本类型,interface不可以;interface可以合并重复声明,type不行

(3)TS 泛型的基本使用,基础操作符:typeof:获取类型,keyof:获取所有键,in:遍历枚举类型,T[K]:索引访问,extends:泛型约束,常用工具类型:Partial可选,Required必选,Readonly只读,Pick,Record

(4)TS实战——声明文件:declare,.d.ts声明文件定义,@types,tsconfig.json;泛型约束后端接口类型:路径错误,参数错误