Ts介绍、安装、类型学习

TS基础学

---

一、TS是什么？能做啥

TypeScript是由微软开发的一款开源的编程语言。TypeScript是JavaScript的超集，遵循最新的ES6,ES5规范。TypeScript扩展了JavaScript 的语法。（Javascript=>弱类型，没有模块化）具有可选的类型并可以编译为纯JavaScript。
作用：TypeScript 的设计目的是解决JavaScript 的痛点：
1、弱类型和没有命名空间，导致很难模块化，
2、不适合开发大型程序。
3、提供了一些语法糖来帮助大家更方便的实践面向对象的编程。（类，接口，枚举，泛型，方法重载等）
4、TypeScript的一个设计亮点就是它并没有抛弃JavaScript的语法另起炉灶，而是做成了JavaScript的超集（这个功劳应该记在Anders上），这样任何合法的JavaScript的语句在TypeScript下都是合法的，也就是说学习成本很低

二、TS自动编译配置

1.运行npm install -g typescript

2. tsc helloword.ts

3.运行 tsc --init，创建tsconfig.json文件。

4.将下图红色圈的代码去掉注释

3.VSCode 中选择终端–运行任务

4.选择tsc：监视

此时ts文件会自动编译成js文件并保存在js目录中。

三、TS数值类型介绍

ts中的类型是强类型，比起js中的弱类型更加的规范化，模块化。

1.布尔类型

let flag:boolean = true
    flag = false
    flag = 22//报错

2.number

let num:number = 111
     num = '222' //报错

3.String

let name: string = "bob";
    name = 11//报错

4.数组

类型单一的数组

//类型单一的数组
let arr:number[] = [1,2,3]
//使用数组泛型，Array<元素类型>：
let arr2:Array<number> = [1,2,3]
//使用any,数组类型多个
let arr3:any[] = [1,2,'a',true]

5.枚举（可以限定参数）

enum Flag{success = 1 , error = 0}
let s:Flag = Flag.success
let e:Flag = Flag.error
console.log(s,e);

//一个小面试题,打印出的b与t的值是什么
enum Car {bm,honda,jeep = 3,toyota}
let b:Car = Car.bm
let j:Car = Car.jeep
let t:Car = Car.toyota
console.log(b,j,t)
// 枚举参数默认下标从0开始，所以b打印的值为0，
//t取的值是第四个，但是第三个jeep赋值为3，
//所以t打印出为4

6.any （任意类型）

let dome:any = 2
    dome = 'a'
//any使用场景    
let box:any = document.getElementById('xx');

7.undefined

原生js变量声明未赋值会显示underfined（默认赋值为underfined）

let demo:undefined
console.log(demo);//打印出undefined

8.void

//无返回值的方法
function get():void{
console.log("无返回值")
}
//有返回值的方法,返回类型是String
function getOne():String{
  return '1'
}
//声明一个void类型的变量没有什么大用，
//因为你只能为它赋予undefined和null
let unusable: void = undefined;

9.never

用的不会很多，定义不会出现的值=>通常定义某个错误

let a:never;
a=(()=>{
  throw new Error(''错误)
})()

10.有返回值的方法

String 为返回类型，还可以是其他的

function run():String{
return '1'
}

11.传参

接口

//参数name与age必传
function getInfo(name:String,age:number):String{
return `${name} ---${age}`
}

可选参数(必选的参数必须放第一位，可选的放后面)，也可以都可选参数

function getInfo(name:String,age?:number):string{
return  age?`${name} ---${age}`:`${name}`
}

四、TS中的Class

下面例子是BM继承Car ，继承的作用其实就是复用。

//constructor优先级最高
class Car{
name:string;
constructor(name:String){
  this.name = name
}
run():String{
return `${this.name} 啦啦啦！` ;
}
}
class BM extends Car{
   constructor(name:String){
     super(name);
   }
}
let b = new BM("宝马");
console.log(b);
console.log(b.run());