TypeScript学习记录Ts基础

安装及初步使用

1.CMD全局安装

npm install -g typescript复制

2.检查是否安装成功

tsc -V 复制

如报错tsc 不是内部或外部命令，也不是可运行的程序或批处理文件[可参考](https://www.cnblogs.com/sanyekui/p/13157918.html)复制

3.在vscode中新建ts文件01_ts.ts

let str:string='zd';//冒号代表给变量指定类型
console.log(str)复制

4.新建页面index.html，引入ts文件

<script src="./01_ts.ts"></script>复制

点开页面会报错，因为浏览器不支持ts语法，所以要转换成js文件
5.ts转js文件
文件夹在终端打开后在终端输入 tsc 01_ts.ts -watch（注意01_ts.ts是文件名）监听这个ts文件变化转换成js，随后会生成一个同名js文件，在页面script中引入同名js文件即可
6.vscode中自动编译ts代码 意思是自动生成js文件
选择文件夹在终端打开并输入tsc --init生成一个json文件
需要在json文件中设置如下图
然后点击终端->运行任务->显示所有任务->监视你文件夹下的tsconfig-json
新建一个.ts文件，就会自动生成js文件夹及其下边自动编译的js文件，html直接就可以在script中引入js文件了

类型注解

类型注解就是给变量、参数等指定类型。
常用类型有:string number boolean null undefined 数组 元祖 枚举 any object

//注意：1.变量指定后不能赋值其他类型数据 
	let n:Number=123 //n只能是数值型
//注意：2.null  undefined可以赋值给其他类型的变量  ，但要关闭tsconfig严格模式
	let n:Number=undefined
	let s:string=null
 
// 数组类型 //
	//数组类型定义方式1
	let arr:number[]=[1,2,3]
	//数组类型定义方式2
	let arr1:Array<string>=['11','22','33']
	console.log(arr,arr1)
	//注意:数组指定类型后，其中也不能包含其他类型数据 let arr:number[]=["123",2,3] 报错
	//想要数组中包含不同数据类型就用到了元祖类型
 
// 元祖类型 ///
	let arr3:[string,number,boolean]=['555',444,false]
	//注意：指定类型个数要和数据对应，要知道数组的个数
	let arr3:[string,number,boolean]=['555',444,false,222] //报错
	let arr3:[string,number,boolean]=['555',444] //报错
	console.log(arr3)
	console.log(arr3[0].split('')) //这时就可以使用对应类型的一些方法了
 
// 枚举类型 ///
//主要用于一些常用且固定个数的值，下标从0开始,里面的数据值也可以叫做元素 
	enum sex{
	    男,
	    女
	}
	console.log(sex.女) //1 输出的是他的下标
	console.log(sex[1]) //女 也可以用下标输出
	//也可以赋值，但不常用这种写法
	enum sex1{
	    nan='男',
	    nv='女'
	}
	console.log(sex1.nan) //男
	console.log(sex1[0]) //报错 这个不能用下标输出
 
 
// any类型 ///
//any就是可以存储任意数据类型
let str:any=123
//还可以用来定义不确定类型不确定个数的数组，区别元祖和数组，但是用对应类型的方法可能出错比如 arr[0].split('')报错
let arr:any[]=[1,'22',true,3.14]
console.log(arr)
 
// void类型 ///
	//主要用来表示函数没有返回值的时候
	function fn():void{
	    console.log('void')
	    return '123'//报错 不能return
	}
	fn()
 
// object类型 ///
	//主要用于函数形参的定义和返回值的定义
	function fn(obj:object):object{
	    return { name:obj.name,age:obj.age}
	}
	console.log(fn({ name:'zs',age:12}))复制

接口

接口简单理解为一种约束

/*************************************接口定义普通变量类型*************************************************/
// 1.定义一个接口
interface My{
    first:string //姓氏
    last:string //名字
    possible?:number //加上？表示可以没有 不加默认是必须有
    readonly id:number //只读 不能修改
}
 
//2.定义一个函数用来 输出姓名
function WriteName(person:My){//给传入的person形参指定了My接口，所以传进来的形参必须符合My的规范比如变量名和类型
		person.id=456 //报错id只读不能修改
    return person.first+'_'+person.last+'**id:'+person.id
}
 
//3.-定义一个对象p1
let p1={
    first:'张',
    last:'三',
    id:123
}
console.log(WriteName(p1)) //张_三**id:123
 
//4.-定义一个对象p2
let p2={
    first:'张',
}
console.log(WriteName(p2)) //报错，因为缺少last，缺接口中任意一个必须项都不行
 
//5.-定义一个对象p3
let p3={
    first1111:'张',
    last:'三'
}
console.log(WriteName(p3)) //报错，因为first1111与接口中不对应
 
/*************************************接口定义函数类型*************************************************/
interface interFun{
	//给函数指定参数返回列表和返回类型的定义
    (str:string,i:string):boolean
}
const IFn:interFun=function(str,i){//该函数需要传两个字符串参数，返回值是布尔型
    return str.search(i)>=0 //查str中是否存在i
}
console.log(IFn('啊啊','阿'))
 
/*************************************接口定义类的类型*************************************************/
 
 复制

类

//定义一个类
class Person { //不存在变量提升，必须先声明后使用
    name:string //这是类里的公共属性
    age:number
    
    //constructor 方法是类的构造方法
		//1.是一个默认方法，通过new命令创建该对象实例时，自动调用该方法
		//2.this是实例对象
		//3.一个类必须得有constructor方法，如果没有显示定义，会默认添加一个constructor
    constructor(name:string, age:number) { 
        this.name = name;
        this.age = age;
    }
		//类的方法，都在类的prototype上
    say() { 
        return '我叫' + this.name + '今年' + this.age + '岁'
    }
}
//实例化对象
let p2 = new Person('李四', 12);
console.log(p2.say())复制

类与接口的合用

class Person {
    name:string
    age:number
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
}
interface personJieKou{
    name:string
    age:number
}
function WritePerson(person:personJieKou){//代替了上边的say方法
    return `类与接口合用：我${person.name}今年${person.age}岁`
}
let Jperson={
    name:'赵武',
    age:100
}
console.log(WritePerson(Jperson))复制