首页 前端知识 TypeScript学习记录Ts基础

TypeScript学习记录Ts基础

2024-04-19 21:04:49 前端知识 前端哥 838 148 我要收藏

安装及初步使用

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))
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5314.html
标签
typescript
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!