引言:ts先编译再执行,在编写代码时即可显示错误。而js在运行时才显示错误。ts不能直接执行,需要先编译成js,也就是下面安装里所介绍的~
一、安装及运行
①npm i -g typescript安包,tsc -v查看ts版本
②新建01.ts文件
③在01.ts文件内正常写代码,终端命令tsc 01.ts生成01.js文件(因为浏览器及Node只认识js代码)
④终端命令node 01.js运行代码
简化代码运行--->npm i -g ts-node安包,写完ts代码,终端ts-node 01.ts运行js代码(内部转换直接运行,不会生成01.js文件)
二、基础类型
1.类型注解(给变量添加类型约束,即变量只能赋予当前类型的值,否则报错)
let num:number=10
let str:string="12"
let content:null=null
let sy:symbol=Symbol()
//等等...
2.数组类型
(1)基本语法(2种语法,推荐第一种)
let arr1:(number)[]=[1,2,3] //arr1为内部值皆为数值型的数组
let arr2:Array<string>=["1","2"] //arr2为内部值皆为字符串型的数组
(2)联合类型
let arr:(number|string)[]=["1",2]//内部值可为字符串或数值型的数组
区别于:
let arr:number|string[]=["1"] //arr可以是数值型,也可以是内部值为字符串的数组
(3)类型别名(多个变量使用同一联合类型且类型较为复杂时使用)
type arrName=(number|string)[]
let arr1:arrName=[1,"2"]
let arr2:arrName=[1,"2"]
3.函数类型(即约束函数形参及返回值类型)
(1)函数声明
function fn(num1:number,num2:number):number{
return num1+num2
}
fn(1,2)
(2)函数表达式
//way①
const fn1=(num1:number,num2:number):number=>{
return num1+num2
}
//way②
const fn2:(num1:number,num2:number)=>number=(num1,num2)=>{//同时指定形参和返回值类型,只适用于函数表达式
return num1+num2
}
(3)函数没有返回值时,返回值类型void(ts新增)
使用情况:①函数没有return ②函数有return但没有return 内容 ③函数return undefined
function fn3(num1:number):void{
console.log("11");
}
(4)函数可选参数--'?'
function fn4(num1:number,num2?:number){//num2为可选参数,可传可不传
console.log(num1);
}
fn4(1)
注:函数可选参数与参数默认值不要一起使用,优先使用默认值
4.对象类型
(1)基本语法
let obj1:{
name:string
age:number
fn:()=>void
fn2(num1:number):void
}={
name:"2",
age:3,
fn(){},
fn2(num1){console.log(num1);
}
}
obj1.fn2(333)
(2)对象的可选属性
let obj1:{
name:string
age?:number
fn:()=>void
fn2(num1:number):void
}={
name:"2",
fn(){},
fn2(num1){console.log(num1);
}
}
(3)对象类型的复用(2种方式)
// ①利用interface关键字声明接口
interface objName1{
name:string,
fn:()=>void
}
let obj2:objName1={
name:"2",
fn(){},
}
let obj3:objName1={
name:"3",
fn(){},
}
// ②type类型别名
type objName2={
age:string,
fn:()=>void
}
let obj4:objName2={
age:"2",
fn(){},
}
let obj5:objName2={
age:"3",
fn(){},
}
*interface与type的区别:interface只能给对象指定类型,type可以给【任意类型】指定类型别名
(4)接口继承--抽离公共的属性和方法,实现复用
type objName2 = {
age: string,
fn: () => void
}
interface objName3 extends objName2 {
haha: string
}
let Obj: objName3 = {
age: "2",
haha: "2",
fn() { }
}
5.元组类型--一种特殊类型的数组
约定了元素的个数,同时指定每个索引对应项的数据类型
let Arr:[number,string]=[1,"2"]