TypeScript
准备
为啥学TS
ts是为了解决js在开发大型项目时的天生缺陷的js超集。他使js拥有像java、c#、c++的一下高级语言的功能，如强类型变量、继承、重载、类、接口、多态、抽象类等功能。
安装
npm i -g typescript
编译（生成为同名的js文件）
tsc <ts文件>
配置自动编译
第一步：生成ts配置文件tsc --init
第二步：修改tsconfig.json的outdir参数（生成js文件的位置）
第三步：点击任务 【任务】->【运行任务】->【tsc】->【监视tsconfig.json】
类型
-
boolean 布尔型
- var boo:boolean;
-
number 数字型
- var num:number;
-
string 字符串型
- var str:string;
-
array 数组类型
- var arr:number[];
- var arr:Array<string>;
-
tuple 元组类型
- var tup:[string,number,string]=[‘12’,15,‘58’];
-
enum 枚举类
enum Flat{ success=1, fail=0 } var c:Flat = Flag.success;-
any 任意类型
- var an:any;
-
null 与 undefined
- never的子集
- var a:null;
- var b:undefined;
-
void 类型
function fn():void{ //表示没有返回值 }
-
never 其他类型
- 表示重来都不会出现的值
-
同时使用定义多个类型
- var num:number | undefined;
-
强制类型转换
- Number()
- Boolean()
- ….
函数定义
普通函数
function run(name:string):string{
console.log(name);
return "ok";
}
var fn = function():string{
return "ok";
}
可选参数
function run(name?:string):string{
console.log(name);
return "ok";
}
注意：可选参数放到后边。
默认参数
function run(name:string='张三'):string{
console.log(name);
return "ok";
}
剩余参数
function sum(...result:number[]):void{
console.log(result);
}
函数重载
java重载：重载指的是两个或者两个以上的同名函数，但他们参数不同，这是会出现函数重载的情况。
ts重载：通过一个函数提供多个功能。
function fn(name:string):string;
function fn(age:number):number;
function fn(str:any):any{
if(typeof str == "string"){
return str;
}else{
return str;
}
}
ES5的类与ts的静态方法与继承
ES5的类
function Per(){
this.name='李四';
this.age=25;
}
/*
注意：原型链上面的属性与方法会被多个实例共享，构造函数则每次new都会创建相同的独立的对象。
*/
Per.prototype.sex = '男';
Per.prototype.print = function(){/*实例方法*/
console.log(
this.name,
this.age,
this.sex
)
}
Per.test = function(){
/*静态方法*/
alert('这是一个静态方法');
}
/*
实例方法：表示必须new之后才可以使用
静态方法：表示不需要实例也可以使用。
*/
ES5继承
function Fn(name){
this.name=name;
}
Fn.prototype.getName = function(){
console.log(this.name);
}
/------------------------------
function Jc(){
Fn.call(this);/*对象冒充继承，只能基础实例下的属性不能继承原型链上的属性*/
}
var a = new Jc();
log(a.getName)//err not default function
//------------------------------
function Jc(){
}
Jc.prototype = new Web();/*原型链继承，可以完全继承，但是不能给继承的对象传参*/
//------------------------------
/*组合继承，通过冒充继承来继承构造函数的属性与发法，通过原型链继承被继承的原型链*/
//------------------------------
ts定义类
class Fn{
public name:string;//public可以省略
//属性
constructor(name:string){//构造函数 new的时候触发
this.name = name;
}
getName():void{
log(this.name);
}
//方法
}
ts继承
class Fnc extends Fn{//继承上面的类
constructor(name:string){
super(name);//调用继承的构造函数
}
}
/*
定义属性的三个修饰符：
public 公有，没有限制*
protected 保护，外面不可以访问
private 私有，只能本类访问
*/
定义静态方法
class Fn{
constructor(){
}
static sex = '静态属性';
static print(){
/*静态方法*/
log("静态方法");
}
}
fn.print();//打印：静态方法
多态
定义：父类定义一个方法不去实现，让继承的子类去实现，每个子类有不同的表现。
抽象类与抽象方法
定义：
-
ts中的抽象类不能直接实例化，他只能做为其他类的父类。
-
通过abstract来定义一个抽象类或抽象方法。
-
abstract抽象方法只能放在抽象类里。
-
抽象类和抽象方法用来定义标准的，他的子类必须实现抽象方法。
接口
定义：只定义的传值、数量、类型、返回值，不进行实现，这就是接口的定义。
属性接口
//普通约束
function fn(obj:{a:number}):void{
//传值必须为对象，并且包含a数字
}
//批量约束
interface Full{
//定义约束对象
a:string;
b:number;
}
function(obj:Full){
//必须传入只包含a与b的对象
}
可选属性接口
interface Full{
//定义约束对象
a:string;
b?:number;
}
function(obj:Full){
//必须传入只包含a与b的对象,b可以不传，a必须传
}
类类型接口
定义：对类进行限制，与抽象类很相似。
interface Animal{
name:string;
eat(str:string):void;
}
class Dog implements Animal{
//结构必须与定义的一样
name:string;
constructor(){
this.name = "狗";
}
eat(){
console.log(this.name+"吃肉");
}
}
接口继承
interface In{
name:string;
fn():void;
}
interface InExt extends In{
age:number;
fn1():void;
}
class Pre implements InExt{
//必须实现inExt与In的规定
name:string;
age:number;
constructor(){
}
fn():void{
}
fn1():void{
}
}
泛型
定义：通过一个字母来代替一个类型，可以配合接口，类一起用。
function getData<T>(value:T):T{
return value;
}
getData<string>('1234');
网友评论