Typescript的快速学习

ts概述

这个typescript是微软推出来的,据说是未来js的进化。
比如js好像是流氓,很多东西不清不楚。而ts却清楚的分明各自的价值。

第一节 安装

全局安装:cnpm i typescript -g
安装完成试试是否成功:tsc -v
但是这个东西是不能直接用的,需要像less一样转码
最终文件就会变成js了
Typescript的快速学习_第1张图片

如果你用的不是Hbuilder,建议你使用Visual Studio Code
首先
拉进去一个文件夹

紧接着在这个终端输入
tsc --init生成一个文件
里面会有一行被隐藏的一句话"outDir": "./"应该是在第17行

最后在VS Code中最上方的最右侧
终端 => 运行任务 => typescript => 第二个
Typescript的快速学习_第2张图片
有了他你写完的ts文件一个保存,自动成js!很方便


第二节

var a:boolean=true
a = 'hahhahha'

我就是我,你就是你!不要上来把我的布尔值变成字符串!
所以第一节课就是分清彼此的身份

布尔值:

var a:boolean=true

数字

var a:number=123456

字符串

var a:string='苍井空的精彩作品'

数组:

var a:number[]=[1,2,3,4,5,6]
var a:[string, number, boolean] = ['苍井空', 521, false] 
//这是一个元组类型

或者任意类型

var a:any[]= ['苍井空', 521, false]
console.log(a)
//这是一个元组类型

枚举类型

//给它赋值1或-1
enum cnm{ succ:1, err:-1 }
var a:cnm = cnm.succ
console.log(a)

//不给他赋值123,如果嘻嘻赋的5,那呵呵则默认为6!顺序成了056
enum cnm{ haha, xixi, hehe }
var a:cnm = cnm.haha
console.log(a)

第三节

任意类型
any其实是解决ts中没有object,所有用了any解决这个问题。
快速记住any这三个字母,你就当他是“爱你呀”

var a:any = 123
a='苍老师的超级'
//或者
var xBox:any = document.getelementById('box')
xBox.style.background = '#000'

空类型和没有定义
null和undefined
1.a要么数字要么没有定义

var a:number|undefined
console.log(a)

2.a要么数字要么为空

var a:number|null
a=null
console.log(a)

3.如果函数返回任意类型,括号后面加一个void

function sb():void{
    console.log('hahahahaha')
}

sb()

4.正常的函数类型, 就是看你返回来的是不是我想要的

function sb():number{
    console.log(438741)
}

sb()

第四节

函数的完整定义

传统方式如下

function sb(){ return 'hahahah' }
//或者
var sb = function(){ return 'hahahah' }

如今TS:屁股后面加类型

function sb():string{ return '123456' }
//或者  ↓
var sb = function():string{ return '123456' }
//或者传参加类型  ↓
function sb(a:string,b:number, c:boolean):string
{ return '${a}----${b----${c}}' }
sb('hahaha', 250 , false)
//匿名函数同类  ↓
var sb = function(a:string,b:number, c:boolean):string
{ return '${a}----${b----${c}}' }
sb('hahaha', 250 , false)

待续

你可能感兴趣的:(自学)