当前位置: 首页>前端>正文

ts项目引入jquery ts引入js

引言: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"]

https://www.xamrdz.com/web/2kp1933114.html

相关文章: