【一起来烧脑】一步学会TypeScript入门

桃扇骨 2021-09-29 22:10 195阅读 0赞

\[外链图片转存失败(img-rmJXMGFs-1563388353181)([https://upload-images.jianshu.io/upload\_images/11158618-dd813ed6e7f957c9.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-dd813ed6e7f957c9.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

字符串新特性  
变量和参数新特性  
函数新特性  
匿名函数  
for of循环  
TypeScript语言中的面向对象特性

## 理解ES5,ES6,JAVASCRIPT,TYPESCRIPT概念之间的关系 ##

ES是客户端脚本语言的规范  
ES5,ES6是这个规范的不同版本

JavaScript和TypeScript是两种不同的脚本语言  
JavaScript实现了ES5规范  
TypeScript实现了ES6规范

## 本地compiler ##

npm --version
    
    sudo npm install -g typescript
    
    tsc --version
    
    ls
    
    tsc Hello.ts

export class Hello {
    }

"use strict";
    var Hello = (function () {
     function Hello() {
     }
     return Hello;
    }());
    exports.Hello = Hello;

## 字符串新特性 ##

参数类型

var myname: string = "da shu";
    
    var a: any = "da shu";
    
    var b: number = 12;
    
    var man: boolean = true;
    
    function test(name: string) :string {
     return "";
    }
    
    class Person {
     name: string;
     age: number;
    }
    
    var zhangsan: Person = new Person();
    zhangsan.name = "da"
    zhangsan.age = 223

## 参数默认值 ##

参数类型：  
在参数名称后面使用冒号来指定参数的类型  
默认参数：  
在参数声明后面用等号来指定参数的默认值

var myname: string = "da shu"
    
    function test(a: string, b: string, c: string = "da"){
     console.log(a);
     console.log(b);
     console.log(c);
    }
    
    text("xx","yy","zz");

## 可选参数 ##

var myname: string = "da shu"
    
    function test(a: string, b?: string, c: string = "da"){
     console.log(a);
     console.log(b);
     console.log(c);
    }
    
    text("xx","yy","zz");

## Rest and Spread操作符 ##

function func1(...args) {
     args.forEach(function (arg) {
      console.log(arg);
     })
    }

function func1(a, b, c) {
     console.log(a);
     console.log(b);
     console.log(c);
    }
    var args = [1,2];
    func1.applay(void 0, args);
    var args2 = [23,32,2,211];
    func1.apply(void 0, args2);

## generator函数 ##

Rest and Spread 操作符：  
用来声明任意数量的方法参数

generator函数：  
控制函数的执行过程，手工暂停和恢复代码执行

Babel是一个JavaScript编译器。

## 析构表达式 ##

destructuring析构表达式：  
通过表达式将对象或数组拆解成任意数量的变量

function getStock() {
     return {
      code: 'IBM',
      price: 100
     }
    }
    var { code, price } = getStock();
    console.log(code);
    console.log(price);

var array1 = [1,2,3,4];
    function doSomething([number1,number2,...others]) {
     console.log(number1);
     console.log(number2);
     console.log(others);
    }
    doSomething(array1);

## 箭头表达式 ##

用来声明匿名函数，消除传统匿名函数的this指针问题

var myArray = [1,2,3,4,5];
    console.log(myArray.filter(value=> value%2==0));

function getStock(name: string) {
     this.name = name;
     setInterval(function(){
      consolv.log("name is :" + this.name);
      }, 1000);
    }
    var stock = new getStock("IBM");

function getStock(name) {
     this.name = name;
     setInterval(function(){
      console.log("name is" + this.name);
     }, 1000);
    }
    var  stock = new getStock("IBM");

结果没值

function getStock2(name: string) {
     this.name = name;
     setInterval(() => {
      consolv.log("name is :" + this.name);
      }, 1000);
    }
    var stock = new getStock("IBM");

有值了

## for of循环 ##

forEach()，for in，for of

面向对象：  
类，泛型，接口，模块，注解，类型定义文件

for (var n of myArray) {
     if(n > 2) break;
     console.log(n);
    }

## TypeScript-类 ##

class Person {
     name;
     eat() {
      console.log();
     }
    }
    
    var p1 = new Person();
    p1.name = "da";
    p1.eat();

\[外链图片转存失败(img-9fm4hbd8-1563388353184)([https://upload-images.jianshu.io/upload\_images/11158618-6a886263a34cb4af.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-6a886263a34cb4af.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]  
构造函数

\[外链图片转存失败(img-QgxDCRlD-1563388353186)([https://upload-images.jianshu.io/upload\_images/11158618-6637184ffa3563cc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-6637184ffa3563cc.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

\[外链图片转存失败(img-9zUGCPVQ-1563388353188)([https://upload-images.jianshu.io/upload\_images/11158618-a5fa8bb29927c12c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-a5fa8bb29927c12c.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

\[外链图片转存失败(img-Qbzn15ac-1563388353189)([https://upload-images.jianshu.io/upload\_images/11158618-b063b8ac7aaadb41.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-b063b8ac7aaadb41.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

## TypeScript-泛型 ##

参数化的类型，一般用来限制集合的内容

## TypeScript-接口 ##

\[外链图片转存失败(img-Nm0e7beu-1563388353192)([https://upload-images.jianshu.io/upload\_images/11158618-bdf49ed81e70d869.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-bdf49ed81e70d869.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

interface IPerson {
     name: string;
     age: number;
    }
    class Person {
     constructor(public config: IPerson) {
     }
    }
    var p1 = new Person({
     name: 'da',
     age: 12
    });

interface Animal{
    eat();
    }
    class Sheep implements Animal {
     eat() {
      console.log("");
     }
    }
    class Tiger implements Animal{
     eat() {
      console.log();
    }
    }

## TypeScript-模块 ##

\[外链图片转存失败(img-oNNq1GRq-1563388353194)([https://upload-images.jianshu.io/upload\_images/11158618-61b70a83d766d68f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-61b70a83d766d68f.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

\[外链图片转存失败(img-zEdxHjWB-1563388353195)([https://upload-images.jianshu.io/upload\_images/11158618-b1005e275f913275.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-b1005e275f913275.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

\[外链图片转存失败(img-PEHhEQHh-1563388353196)([https://upload-images.jianshu.io/upload\_images/11158618-41d3551c3d907650.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-41d3551c3d907650.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

## TypeScript-注解 ##

\[外链图片转存失败(img-odDOybkh-1563388353197)([https://upload-images.jianshu.io/upload\_images/11158618-6aec5776baa3e512.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-6aec5776baa3e512.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

## 类型定义文件 ##

\[外链图片转存失败(img-fAPjag9x-1563388353199)([https://upload-images.jianshu.io/upload\_images/11158618-7ba7f6c82cfd8d7b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-7ba7f6c82cfd8d7b.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

--------------------

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达叔小生][Link 1]的简书！ ###

**这是一个有质量，有态度的博客**

\[外链图片转存失败(img-zrzA76Ek-1563388353203)([https://upload-images.jianshu.io/upload\_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-9ab0d3fef85d80ce_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

[https_upload-images.jianshu.io_upload_images_11158618-dd813ed6e7f957c9.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-dd813ed6e7f957c9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-6a886263a34cb4af.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-6a886263a34cb4af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-6637184ffa3563cc.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-6637184ffa3563cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-a5fa8bb29927c12c.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-a5fa8bb29927c12c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-b063b8ac7aaadb41.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-b063b8ac7aaadb41.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-bdf49ed81e70d869.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-bdf49ed81e70d869.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-61b70a83d766d68f.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-61b70a83d766d68f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-b1005e275f913275.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-b1005e275f913275.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-41d3551c3d907650.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-41d3551c3d907650.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-6aec5776baa3e512.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-6aec5776baa3e512.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-7ba7f6c82cfd8d7b.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-7ba7f6c82cfd8d7b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[Link 1]: https://www.jianshu.com/u/c785ece603d1
[https_upload-images.jianshu.io_upload_images_11158618-9ab0d3fef85d80ce_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240