Typescript介绍

一、Typescript 介绍

1、Typescript 是由微软开发的一款开源的编程语言，它很像Javascript的超集，遵循最新的ES6、ES5规范，扩展了JavaScript的语法。

2、谷歌也再大力支持TypeScript的推广，谷歌也在大力支持TypeScript的推广，谷歌的angular2.x++就是基于Typescript语法

3、最新的Vue、React也可以集成Typescript，Node.js框架Nestjs、midway中用的就是Typescript语法。

总结：ES5 -> ES6 -> Typescript，也就是说TypeScript包含了js的所有系列，目前前端的必备知识就是Ts。

 

二、Typescript 安装

• npm install -g typescript
• cnpm install -g typescript
• yarn global add typescript

如果电脑上没有安装的cnpm,请先安装cnpm：  npm install -g cnpm --registry=https://registry.npm.taobao.org;

如果电脑上面没有安装过yarn请先安装yarn：  cnpm install -g yarn

通过vscode新建一个index.ts文件：

console.log("你好ts")
// ts 编译城 es5: tsc index.ts -> index.js

var str:string = "你好ts"  // 创建一个变量str，类型为string
// 我们只有在终端输入：tsc index.ts 才能生成js文件，而不能自动生成js文件

let num:any = "123"

　　通过执行tsc index.ts 会生成对应的js文件，如何自动编译成es5的文件？

Typescript 开发工具 vscode自动编译.ts文件

• 创建tsconfig.json文件，通过在空目录下的终端输入： tcs --init，之后会出现一个tsconfig.json文件
• 在生成的json文件中，打开 "outDir": "./js", 配置，表示通过ts生成的js文件放在js目录中
• 点击vscode菜单栏中的Terminal -> Run task -> typescript -> watch tsc；表示自动监视ts文件，只要保存就生成js文件到js目录中

 

Typescript 中的数据类型

Typescript为了使得编写的代码更加规范，更加便于维护，为我们增加了数据类型：

• 布尔类型（boolean）
• 数字类型 （number）
• 字符串类型（string）
• 数组类型（array）
• 元组类型（tuple）
• 枚举类型（enum）
• 任意类型（any）
• null 和undefined
• void类型
• never类型

  // 布尔类型,只能是true/false
  var flag:boolean= true
  flag = false
  
  // 数值类型, 整型和浮点型都是数值类型
  var a:number = 123
  a=12.2
  console.log(a)
  
  // 字符串类型
  var str:string = "this is ts"
  console.log(str)
  
  // 数组类型 第一种定义方式，yies5中定义数组：var arr = [1,"123"]
  let arr:number[] =[1,2,3,3.4] // 只能是数值
  let arr1:string[] = ["php",'js','golang']
  
  // 第二种定义数组的方式,使用范型
  let arr2:Array<number> = [1,3,4]
  
  // 元组类型,属于数组，不过要指定好每个元素的类型
  let tup:[string,number,boolean] = ["ts",2,false]
  
  // 枚举类型
  enum Falg {   // 定义一个enum类型
      success=1,
      error=-1
  }
  
  var f:Falg = Falg.success  
  console.log(f)  // 1
  
  // 枚举官方案例
  enum Color{
      red,
      blue,
      orange
  }
  
  var c:Color = Color.blue
  console.log(c) // 索引值1，使用默认值
  
  // 任意类型
  var num:any = 123
  num="12x"
  console.log(num)
  
  // 任意类型案例，假设html中有一个dom的id为app
  var obox:any = document.getElementById('app');
  obox.style.color = 'red';
  
  // null 和 undefined
  var nums:number | undefined
  console.log(nums) // 定义类未赋值则为undefined
  
  nums =11
  console.log(nums)
  
  // void类型：typescript中的void表示没有任何类型，一般用于定义方法的时候没有返回值
  function run() {  // es5的语法
      console.log('run')
  }
  run();
  
  function run_ts():void {  // 表示方法不返回任何数据类型
      console.log("run ts....")
  }
  run_ts();
  
  function run_num():number{
      return 3
  }
  run_num();
  
  
  // never类型：是其他类型（包括 null和undefined）的子类型，代表从不会出现的值。
  
  var b:undefined
  b=undefined  // 只能是undefined
  
  var c1:never
  c1 = (() => {
      throw new Error("错误")
  })()
  console.log(c1)　　

 

Typescript的函数

关于Typescript的函数相关代码讲解如下：

/* es5中的函数定义两种方法
// 函数声明发
function run() {
    return ''
}

// 匿名函数
var run2 = function(){
    reutrn 'run2'
}
*/

// ts中定义的函数方法
// 函数声明法
function run():string {
    return 'run1'
}

// 匿名函数
var fun2 = function():number{
    return 3
}

alert(fun2())

// ts中定义方法传参
function getInfo(name:string,age:number):string{
    return `${name}---${age}`
}

alert(getInfo('wangwu',5))

// 匿名函数
var getInfo2 = function(name:string,age:number):string{
    return `${name}--${age}`
}

// 传参的可选择性,通过？，注意可选参数必须靠后
function getInfo3(name:string,age?:number):string{
    if (age){
        return `${name}---${age}`
    } else {
        return  `${name}---年龄保密`
    }
}

alert(getInfo3("wangx"))

// 默认参数，在es5中无法设置默认参数，es6和ts可以
function getInfo4(name:string,age:number=20):string{
    if (age){
        return `${name}---${age}`
    } else {
        return  `${name}---年龄保密`
    }
}

alert(getInfo4("wangx"))

// 剩余参数,
function sum(a:number,b:number,c:number):number {  // 写法很冗余
    return a+b+c;
}
alert(sum(1,2,3))

// 使用三点运算符打散
function sum1(a:number,...result:number[]):number {  // a会接受第一个，其余的给result
    var sum = 0;
    for (var i=0; i<result.length;i++){
        sum += result[i];
    }
    return sum
}

alert(sum1(1,2,4))


// 函数的重载，重载指的是两个或两个以上的同名函数，但它们的参数不一定，这时会出现函数的重载情况，在ts中通过为
// 同一个函数类型定义来试下多种功能的目的,(同名函数，根据传入的参数不同而执行不同的功能)
// 在es5中出现两个重名方法，则下面的会覆盖上面的方法

// ts中的重载
function getInfo5(name:string):string;
function getInfo5(age:number):string;
function getInfo5(str:any):any{   // 类似于多态
    if (typeof str === 'string'){
        return '我叫'+ str
    } else {
        return '我的年纪是：'+ str
    }
}

alert(getInfo5("zhangsan"))
alert(getInfo5(5))

// es6的箭头函数，this指向上下文
setTimeout(()=>{
    alert('run')
},3000)