TypeScript快速入门-CSDN博客

何为TypeScript？

TypeScript是微软开发的设计一款强类型编译性语言，目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。typescript比javascript更java的script ，或者换句话说TypeScript是javascript未来的自己。

java：类的定义
public class Dog{

  String breed;
  int age;
  String color;
  void barking(){
  }
  void hungry(){
  }
  void sleeping(){
  }
复制代码

}

TypeScript：类的定义

class Dog{

  breed：string;
  age：number;
  color：string;
  barking():void{
  }
  hungry():void{
  }
  sleeping():void{
  }
复制代码

}

课程结构：

一、环境搭建 node(npm)——>npm install -g typescript——>tsc demo.ts——>执行编译后的脚本（js）编译后的

编译前：test.ts

let a:number=123;

console.log(a)

编译后：test.js

var a = 123;

console.log(a);

TypeScript 转换为 JavaScript 过程如下图：

二、数据类型

基础类型：
1.string
let str:string="你好,小宇哥哥"
复制代码

ts：
let email:string="111@qq.com";
let msg:string=`my email is ${email}`
console.log(msg)
js：
var email = "111@qq.com";
var msg = "my email is " + email;
console.log(msg);
复制代码

2.number
let num1:number=1;
let num2:number=2
console.log(num1+num2)//3

3.boolean
let isshow:boolean=false;
console.log(isshow)//false
4.数组
    a)根据类型限定数组的每一项类型
    b)泛型数组
    c)元组：面向对象的语言大部分都有这个概念
    
    a):根据类型限定数组的每一项类型
    let list:number[]=[1,2,3,4] 
    访问数组的项:
    console.log(list[0]); //1
    Array 声明数组大小：
    var list:number[] = new Array(5);
    for(var i = 0; i<list.length; i++) { 
            list[i] = i * 2 
            console.log(list[i]) 
    }
    Array 初始化数组元素：
    var list:string[] = new Array("郭京飞","倪大红","高鑫");
    for(var i = 0;i<list.length;i++) { 
            console.log(list[i]) 
    }
    数组结构：
    var arr:number[] = [12,13] 
    var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
    console.log(x) //12
    console.log(y)//13
    数组的方法：
    concat()连接两个或更多的数组，并返回结果。
    indexOf()搜索数组中的元素，并返回它所在的位置。
    join()把数组的所有元素放入一个字符串。
    map()通过指定函数处理数组的每个元素，并返回处理后的数组。
    push()向数组的末尾添加一个或更多元素，并返回新的长度。
    forEach()、filter()、every()....
    
    c)元组
    var mytuple = [10,"Runoob"];
5.enum（枚举)：举一些东西，当我们限定一个值只能在一个范围内使用。
    eg：星期
    enum Weeks{Mon,Tue,Wed}
    let day:Weeks=Weeks.Mon
        console.log(day)0
        console.log(Weeks[0])Mon
        console.log(Weeks['Mon']) 0
     
6.  any对变量约束任意类型 
    let x:any="aaa"
7.void用于标识方法返回值的类型，表示该方法没有返回值。
        function hello():void {
            alert("Hello 小宇哥哥");
        }
        function hello2():string{
        return "Hello 小宇哥哥" 
        }
8.undefined null never 
    let x1:undefined=undefined;
    let x1:null=null;
    never：包括上两个，代表从不出现的值。
联合类型：
    let x2：number|string|boolean；如果赋值其它类型就会报错
        x2=2;
        x2="2";
        x2="false";
        
    也可以将联合类型作为函数参数使用：
        function disp(name:string|string[]) { 
                if(typeof name == "string") { 
                        console.log(name) 
                } else { 
                        var i; 
                        for(i = 0;i<name.length;i++) { 
                        console.log(name[i])
                        } 
                } 
        } 
        disp("Runoob") 
        disp(["Runoob","Google","Taobao","Facebook"])
    //类型断言
    let x5:number|string|boolean="this is a string"
    let strlength:number=(<string> x5).length
    let strLength1:number=(x5 as string).length
复制代码

三、运算符和条件语句循环语句： 1.算术运算符：

2.关系运算符:

3.逻辑运算符:

4.其他条件语句：与js一致。

5.循环
for (var val in list) { //for循环
    //语句 
}
var j:any; 
var n:any = "a b c" 

for(j in n) {//for in 循环
    console.log(n[j])  //a b c
}

for…of
let someArray = [1, "string", false];
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

forEach 
let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
});

every 
let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
    return true; // Continues
    // Return false will quit the iteration
});
复制代码

四、函数 function test() { // 函数定义 console.log("调用函数") } test()

函数带返回值
function greet():string { // 返回一个字符串
    return "Hello 小宇哥哥" 
} 
console.log(greet())

带参数不约束返回值类型
function add(x: number, y: number){
    return x + y;
}    

带参数带返回值
function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

类型混合
function add(x: number, y: string): string {
    return x + y;
}
console.log(add(1,'2'))

可选参数：
function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
 
let result1 = buildName("Bob");                  // 错误，缺少参数
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");         // 正确


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 calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("计算结果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

不定参：在无法确定像函数传递多少个参数时，这个时候就可以使用剩余参数来定义。
function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

参数全不定：
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) 
 addNumbers(10,10,10,10,10)
 
 匿名函数
 var res = function(a:number,b:number) { 
    return a*b;  
 }; 
 console.log(res(12,2))
 
 自执行匿名函数
 (function () { 
    var x = "Hello!!";   
    console.log(x)     
 })() 
 
 

构造函数:实例化构造函数Function()来定义函数
var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

箭头函数：
var foo = (x:number)=>10 + x 
console.log(foo(100))

函数重载(重构)：
function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz");
复制代码

五、类 1.类的定义和使用 TypeScript 是面向对象的 JavaScript，类是描述所创建的对象共同的属性和方法。 a)定义函数 class class_name { // 类作用域：类的属性、构造函数、以及一些自定义的方法 } eg: class Dog { // 属性 name:string; age:number; weight:number; // 构造函数 constructor(name:string,age:number,weight:number) { this.name = name; this.age=age; this.weight=weight; }
// 自定义方法 disp():void { console.log("你好,我是一只可爱的小狗，我的名字叫："+this.name+"我今年"+this.age+"岁,体重"+this.weight+"kg,艾玛改减肥了！！") } } b)调用函数 var obj = new Dog("杜宾", 3, 50) obj.disp()

2.类的继承//extends
eg：
class Dog { //父类“狗”
   area:string
   constructor(a:string) { 
      this.area = a 
   } 
} 
 
class Dobermann extends Dog { 
   disp():void { 
      console.log("狗的产地:  "+this.area) 
   } 
}
  
var obj = new Dobermann("德国"); 
obj.disp()
解释：子类继承了父类的属性和构造函数。
注：1.子类只能继承一个分类，ts不支持继承多个子类，可以支持多重继承，理解为家族遗传
    eg：
    class Root { 
       str:string; 
    } 
     
    class Child extends Root {} 
    class Leaf extends Child {} // 多重继承，继承了 Child 和 Root 类
     
    var obj = new Leaf(); 
    obj.str ="hello" 
    console.log(obj.str)
3.类的重写（重构）//关键词super，super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。
    //如果父类和子类有相同姓名的方法，那么执行时子类覆盖父类的方法，规则：自下而上
    class PrinterClass { 
       doPrint():void {
          console.log("父类的 doPrint() 方法。") 
       } 
    } 
     
    class StringPrinter extends PrinterClass { 
       doPrint():void { 
          console.log("子类的 doPrint()方法。")
       } 
    }
    
    重构父类的函数
    class PrinterClass { 
       doPrint():void {
          console.log("父类的 doPrint() 方法。") 
       } 
    } 
     
    class StringPrinter extends PrinterClass { 
       doPrint():void { 
          super.doPrint() // 调用父类的函数
          console.log("子类的 doPrint()方法。")
       } 
    }
    
    所有的方法都可以进行重构，包括构造函数
        class PrinterClass { 
            age: number;
            constructor(a:number) { 
                this.age=a
            }
               doPrint():void {
                  console.log("父类的 doPrint() 方法。") 
               } 
            } 
             
        class StringPrinter extends PrinterClass { 
            constructor(a:number) { 
                super(12)
            }
            doPrint():void { 
                super.doPrint() // 调用父类的函数
                console.log("子类的 doPrint()方法。")
            } 
        }    
        
4.类的静态属性和静态方法：统称为类的静态成员，静态成员可以直接通过类名调用。//关键字

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

5.修饰符：是通过关键字来对类的变量、方法等的权限控制，保证其访问的权限。
    public（默认） : 公有，可以在任何地方被访问。

    protected : 受保护，可以被其自身以及其子类和父类访问。
    
    private : 私有，只能被其定义所在的类访问。
        class Encapsulate { 
            str1:string = "hello" ;
            private str2:string = "world" ;
            protected str3:string="111"
        }
 
    var obj = new Encapsulate() 
    console.log(obj.str1)     // 可访问 
    console.log(obj.str2)   // 编译错误， str2 是私有的
    console.log(obj.str3)   // 可访问
复制代码

6.多态:不同的实现方式即为多态。 class Animal{ eat(){ console.log("吃东西") } }

    class Cat extends Animal { 
       eat(){ 
          // 调用父类的函数
          console.log("猫吃鱼")
       } 
    }
     class Dog extends Animal { 
       eat(){ 
          // 调用父类的函数
          console.log("狗吃肉")
       } 
    }       
    var c1 = new Cat();
    c1.eat()
    
7.抽象类和抽象方法 //抽象类和抽象方法
    abstract class Animal{ 
     abstract eat();
    } 
     
    class Cat extends Animal { 
       eat(){ 
          // 调用父类的函数
          console.log("猫吃鱼")
       } 
    }
     class Dog extends Animal { 
       eat(){ 
          // 调用父类的函数
          console.log("狗吃肉")
       } 
    }       
    var c1 = new Cat();
    c1.eat()
复制代码

六、接口：对行为的规范和限制 interface Iprinter{ Printing(msg:string):string;

}
calss colorprinter implements Iprinter{
    Printing(msg:string):string{
        return "打印"+msg+"成功"
    }
}
let p1=new colorprinter("简历")
let val=p1.Printing("简历")    

解释：
a)实现接口的时候，要实现里面的内容
b)定义接口的时候，只定义声明即可，不包含具体内容
c)接口是为了更方便的应用业务场景， 比如打印机 都有打印的功能， 接口下面可以分为红色打印机 ，蓝色打印机
interface Iprinter{
    Printing(msg:string):string;
}
interface Iprinter2{
    getmsg():string;
}

calss colorprinter implements Iprinter，Iprinter2{
    Printing(msg:string):string{
        return "打印"+msg+"成功"
    }
    getmsg():string{
        return "惠普"
    }
}
let p1=new colorprinter("简历")
let val=p1.getmsg()
复制代码

推荐文档：

https://ts.xcatliu.com/

http://caibaojian.com/typescript-doc.html

https://juejin.im/post/5cdcbb6df265da039d32a96f
复制代码

谢谢阅读希望对您有所帮助！

TypeScript快速入门

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