一.TypeScript和JavaScript的不同点
一.TypeScript的介绍
JavaScript 的超集,用于解决大型项目的代码复杂性
强类型,支持静态和动态类型
可以在编译期间发现并纠正错误
不允许改变变量的数据类型
二.JavaScript的介绍
一种脚本语言,用于创建动态网页
动态弱类型语言
只能在运行时发现错误
变量可以被赋予不同类型的值
二.TypeScript的使用
1.ts运行(自定义)
安装编译器:npm i -g typescript
编译语言选择:tsc greeter.ts
在 npm create vite 选择ts
安装
npm i
@vue/eslint-config-typescript
@vue/tsconfig
typescript
vue-tsc-D
<script lang="ts" setup>
ts的文件后缀名是 .ts
三.类型
值类型
// 数值类型
let age: number = 18
// 字符串类型
let myName: string = '小花'
// 布尔类型
let isLoading: boolean = false
// undefined
let un: undefined = undefined
// null
let timer:null = null
// symbol
let uniKey:symbol = Symbol()
any 任意类型(少用,不建议用)
var num:any = 15;
num = "abc";
数组
const list:Array<string>=["abc"]
const arr:number[] = [123]
const tuple:[string,number] = ["abc",123]
// 写法1:
let 变量: 类型[] = [值1,...]:
let numbers: number[] = [1, 3, 5]
// numbers必须是数组,每个元素都必须是数字
// 写法2:
let 变量: Array<类型> = [值1,...]
let strings: Array<string> = ['a', 'b', 'c']
// strings必须是数组,每个元素都必须是字符串
函数
function add (x:string,y:string):string{ return x+y}
const add = (x:number,y:number):number=>x+y
// 普通函数
function 函数名(形参1: 类型=默认值, 形参2:类型=默认值,...): 返回值类型 { }
// 声明式实际写法:
function add(num1: number, num2: number): number {
return num1 + num2
}
// 箭头函数
const 函数名(形参1: 类型=默认值, 形参2:类型=默认值, ...):返回值类型 => { }
const add2 = (a: number =100, b: number = 100): number =>{
return a + b
}
// 注意: 箭头函数的返回值类型要写在参数小括号的后面
add(1,'1') // 报错
接口类型
interface Person {
name:string,
age:string | number,
readonly id:number
job?: string
}
基础语法 | 或者 readonly只读 ?可选
interface Student extends Person{
major:string
}
内置类型
日期 var d:Date = new Date()
正则 var reg:RegExp = /\d10/
对象 var obj :object = {}
HTMLbody var body:HTMLElement = document.body
节点列表 var list:NodeList = document.querySelectorAll("div")
鼠标事件类型
document.addEventListener(“click”,(e:MouseEvent)=>{
conolse.log(e.target)
})