菜鸟java开发学习TypeScript

心已赠人 2021-12-12 06:23 453阅读 0赞

## 简介： ##

### *TypeScript是一门编译型语言，强类型的语言，面向的语言*，TypeScript是比javascript更java的script，是JavaScript的超集，它增加了类型规则，让代码的可读性和可维护性大大的提高，*TypeScript遵循es6规范，它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。* ###

#### 1. 安装 ####

如果你的本地环境已经安装了 npm 工具，可以使用以下命令来安装：
    npm install -g typescript

创建一个.ts文件，通过命令`tsc 文件名.ts`将ts文件编译成js文件来运行（可以同时编译多个 `.ts` 文件），在与.ts同目录下就会生成一个js文件，可以通过命令`$ node 文件名.js`执行代码，或者通过HTML页面引用以执行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70 1]

#### 2. 基础语法 ####

##### 2.1.基本数据类型以及一些其他关键字 #####

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>类型</th> 
   <th>对比Java</th> 
   <th>实例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>any</td> 
   <td>任意类型</td> 
   <td>Object</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>数字类型</td> 
   <td><strong>整数型+浮点型</strong> 都用这一个</td> 
   <td><code>let obj:any:="xxx"</code></td> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>布尔类型</td> 
   <td>String</td> 
   <td><code>let name: string = "aaa"; let words: string =</code> `我是 ${ name } ``（用于拼接字符串）</td> 
  </tr> 
  <tr> 
   <td>boolean</td> 
   <td>布尔类型</td> 
   <td>boolean</td> 
   <td><code>let flag: boolean = true;</code></td> 
  </tr> 
  <tr> 
   <td><code>any[]</code> <strong>/</strong> <code>Array&lt;any&gt;</code></td> 
   <td>数组类型(未知长度)</td> 
   <td><code>new List&lt;Object&gt;</code></td> 
   <td><code>let arr: number[] = [1, 2];let arr: Array&lt;number&gt; = [1, 2];</code></td> 
  </tr> 
  <tr> 
   <td><code>let x: [string, number]</code></td> 
   <td>元组(已知长度)</td> 
   <td><code>new List(4);</code></td> 
   <td><code>let x: [string, number];</code>x = [‘Runoob’, 1]; //运行正常;<code>x = [1, 'Runoob'];//报错</code> 这个必须对号入座</td> 
  </tr> 
  <tr> 
   <td><code>let x:any|any|...</code></td> 
   <td>联合类型</td> 
   <td><code>new Object();</code></td> 
   <td><code>let a:string|number|boolean=xxx</code><img src="https://img-blog.csdnimg.cn/20190712152647551.png?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldmlvcGt1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="450" height="130" alt="图片名称" align="center"></td> 
  </tr> 
  <tr> 
   <td>enum</td> 
   <td>枚举</td> 
   <td>enum</td> 
   <td>enum Color {Red, Green, Blue};let c: Color = Color.Blue;console.log( c ) // 输出 2</td> 
  </tr> 
  <tr> 
   <td>void</td> 
   <td>函数无返回值类型</td> 
   <td>void</td> 
   <td>function hello(): void { alert(“Hello Runoob”);}</td> 
  </tr> 
  <tr> 
   <td>null、undefined</td> 
   <td>空值，未定义</td> 
   <td>null</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>never</td> 
   <td>其它类型（包括 null 和 undefined）的子类型</td> 
   <td></td> 
   <td>代表从不会出现的值</td> 
  </tr> 
 </tbody> 
</table>

##### 2.2. 面向对象 #####

##### 2.2.1. 类 #####

类的定义：

class Obj{  
       field1:"aaa";
       field1:"bbb";
       run():void {  
          console.log("run method") 
       } 
       // 构造函数 
        constructor(engine:string) {  
            this.engine = engine 
        } 
    } 
    var obj = new Obj(); 
    obj.run();
    
    这段代码编译成*原生js*代码，就是：
    var Obj= /** @class */ (function () { 
        function Obj() { 
        }
        Obj.prototype.run= function () { 
            console.log("run method");
        };
        return Obj;
    }());
    var obj = new Obj();
    obj.run();

类的继承：（同样也是单继承，但支持多重继承）

单继承：
    class Shape {  
       Area:number 
       
       constructor(a:number) {  
          this.Area = a 
       } 
    } 
     
    class Circle extends Shape {  
       disp():void {  
          console.log("面积: "+this.Area) 
       } 
    }
      
    var obj = new Circle(223); 
    obj.disp()
    
    多重继承：
    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)

涉及到一些关键字和运算符：

static 关键字：（和java完全一致，就是一个静态，就不做记录了）
    instanceof 运算符：（同java）
    访问控制修饰符：（除了没有default，其余三种都可用，作用同java）
    implements关键字：（同java）

##### 2.2.2. 接口 #####

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，
    让具体的类执行具体的方法。ts的接口会比java的范围更广。

①基本用法

对类:

interface Iprinter{ orinting(msg:string):string;}
    //实现接口
    class colorprinter implements Iprinter{ 
    	Printing(msg:string):string{ return "a"+msg}	//必须实现所有接口
    }
    let p1=new colorprinter()
    let val=p1.Printing("out")
    console.log(val)

②扩展（比java更广的地方）

对类：

interface IPerson {  //与java命名规范一致，首字母大写
        field1:string, 
        field2:number, 
        run: ()=>string 
    } 
    //继承接口？（还是习惯叫实现，可以多实现）
    var customer:IPerson = {  
        firstName:"Tom",
        lastName:"Hanks", 
        sayHi: ():string =>{ return "Hi there"} 
    }

对函数的约束:

interface Imyfunction{ (a:string,b:number):boolean;}
    let fun1: Imyfunction;
    fun1=function(a:string,b:number):boolean{ return false;}

对数组:

interface Istuarr{ [index:number]:string;}let arr1:Istuarr;arr1-["aaa","bb"] console.1og(arr1[0])

对json：

interface Idata{ 
    		name:string, 
    		age : number,
    		readonly test1:boolean,//只读
    		test2?:any			   //非必须
    		}
    function showdata(n:Idata){ 
    	console.log(JSON.stringify(n)
    }
    showdata({ name: "zhangsan", age:19})

##### 2.3 . 函数的定义 #####

参数的定义：

//可选参数（一般放到参数列表最末）----支持不声明类型
    function show(age? : number, name) : void{  console.log(name, age) }
    show(10,"zhangsan")
    //默认参数
    function show(age: number=12) : void{  console.log(name, age) }
    //剩余参数
    function add1(x1,x2,...x:number[]): number{  
    	var sum=0
    	x.forEach((item,index)=>{ 
    		sum+=item
    	})
    	return x1+x2+sum

函数重载（同java）

##### 2.4. 泛型(同java) #####

函数：

function printarr<T>(arr:T[]):void{  
    	for(var item of arr){ console.log(item) }
    }
    printarr<number>( [11,22, 33,441) 
    printarr<string>(["aa","bbb","cc"])

类：

class myArraylist{  
    	public list:T[]=[];
    	add(val:T): void{ 
    		this.list.push(val)
    	}
    }
    var arr=new myArraylist<number>() 
    arr.add(11)
    arr.add(22)
    console.log(arr.list)

接口：

interface Iadd{  
    	(x:T,y:T):T;
    }
    var add:Iadd<number> add=function(x: number,y: number){  return 1111}

**大概就这么多了，从java起步了解ts时，就像看他的一项继承语言一样，相比起java，虽已经无限靠近，但还是很多欠缺之处，规范还是不够规范，然后理解起来比较容易，感觉掌握了javaee，就可以来学习ts了**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70]: /images/20211211/3c0736279f4347ba89d1b039831e858d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQyMzM4OTYy_size_1_color_FFFFFF_t_70 1]: /images/20211211/198cf9b5b7704f7a8c6539cddc797700.png