安装及初步使用
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文件
点开页面会报错，因为浏览器不支持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
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))
好文推荐
发表评论