01 typescript环境安装与运行
需要安装 node 和 npm
全局安装typescript ： npm install -g typescript
校验: tsc -v
tsc的作用: 负责将ts代码转化为 浏览器 和 node 识别的js代码
创建ts文件并编译js
tsc ./01test.ts 会生成一个 01test.js文件
设置vscode自动编译
-
运行
tsc --init创建tsconfig.json文件 -
修改 tsconfig.json 文件，设置js文件夹：
'outDir':'./js/' -
设置 cscode 监视任务
02 typescript 变量与数据类型
变量的语法：
js： let 变量名 = 值;
ts： let 变量名:变量类型 = 值;
在ts中，为变量指定了类型，就只能给这个变量设置相同类型的值
let dName:string = 'Ruikey';
dName = 520;
//报错：Type '520' is not assginable to type 'string'
数据类型
常见数据类型
//字符串 '' `` ""
let aName:string = '貂蝉';
//数值
let dAge:number = 18;
dAge = 18.13;
//布尔值 true/false 不能使用0、1
let isSingleDog = true;
isSingleDog = false;
//undefined 和 unll
let undef:undefined = undefined;
let nul:null = null;
//数组 元素类型固定 但是长度不限制
//方式1
let arrHeros:string[] = ['安其拉','亚索','盲僧']
//方式2
let arrAge:Array<number> = [18,19,20]
//元组 规定了元素数量和每个元素类型的数组
let tup1:[string,number,boolean] = ['亚索',18,false];
//元组出现的目的：ts中数组原型类型必须一致，如果需要不同的元素，就要使用元组 ， 元组声明时必须指定个数和类型，也可以用下标和length
//枚举 一组标识
//例子 创建性别枚举
enum Gender{
Boy = 1,
Girl = 2,
UnKnown = 3
}
console.log(Gender.Boy) //1
console.log(Gender.Girl) //2
console.log(Gender.Unknown) //3
enum Gender2{
Boy,
Gril,
unKnown
}
console.log(Gender2.Boy) //0
console.log(Gender2.Gril) //1
console.log(Gender2.unKnown) //2
//使用性别枚举
let userSex:Gender = Gender.Boy
if(userSex == Gender.Boy){
console.log('是男生')
}else if(userSex == Gender.gril){
console.log('是女生')
}else{
console.log('我也不知道)
}
any
any代表任意类型，一般用在获取dom时使用，在接收用户输入或第三方代码库的时候，不确定返回什么类型的值，也可以使用
let textName : any = document.getElementById('txtN')
void
表示没有类型，一般用在无返回值的函数
function sayHi():string{
return 'hi,你好';
}
let re1 = sayHi()
function sayHi2():void{
console.log("可以不用return值")
}
never
表示不存在的值，常用作抛出错误或无线循环的函数返回类型
never类型是ts中的底部类型，所有类型都是never类型的父类，所以never类型值可以赋给任意类型的变量
//无线循环
function test():never{
while(true){
}
}
//抛出错误
function test2():never{
throw new Error("出现错误")
}
//可以赋给任意类型的变量
let x:never = test2()
let y:string = test2()
类型判断
概念：如果变量的声明和初始化是在同一行，可以省略掉变量类型的声明
let 变量名:变量类型 = 值;
//也可以写成
let 变量名 = 值；
验证： let age = 18 此时变量age的类型被推断为 number
age = 'jack' 报错，因为变量age 的类型是number
联合类型
概念: 表示值可以为多种类型中的一种
let 变量名:变量类型1 | 变量类型2 = 值；
接收prompt（） 函数的返回值 或者是用户的输入或者是null
let dName:string | null = prompt("请输入用户名")；
console.log('hello' + dName);
函数
函数返回值类型
function sayHi():string{
return 'hi~~~'
}
let resl:string = sayHi()
函数形参类型
function jumpSan(cityName:string):void{
console.log(`跳伞跳 ${cityName} `)
}
ts中 实参 和 形参 的类型必须一样
ts中 实参 和 形参 的数量必须一致
函数可选参数
function 函数名(形参 ?: 类型):返回值类型{
//问号 ？ 就表示参数的实参可传可不传
}
//调用
函数名() //不传递实参
函数名(实参) //传递实参
函数默认值
function 函数名(形参1 : 类型 = 默认值1 ， 形参2 : 类型 = 默认值2):返回值类型{
}
//调用
函数名() //不传递实参 编译后 函数名（默认值1，默认值2）
函数名（实参1） //传一个实参 编译后 函数名（实参1，默认值2）
函数名（实参1，实参2） //传两个实参 编译后 函数名(实参1，实参2)
函数名（undefined,实参2）//只传第二个实参 函数名（默认值1，实参2）
函数剩余参数
function add(a : number , b : number):void{
coaole.log(a+b)
//如果参数的数量不确定
}
funciton add(a:number , b:number , ...c:number[]):void{
let resNum:number = x + y
for(let el of c){
resNum += el
}
console.log(resNum)
}
add(1,2) //3
add(1,2,3,4,5,6) //21
类
类的成员变量，构造函数，成员方法
class City{
cName:string;
cLevel:number;
constructor(name:string , level:number){
this.cName = name;
this.cLevel = level
}
about(){
console.log(`欢迎来到${this.cName},此地危险系数是${this.level}`)
}
}
