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());
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值