TypeScript的基础知识

一.TypeScript和JavaScript的不同点

一.TypeScript的介绍

1. JavaScript 的超集，用于解决大型项目的代码复杂性

2. 强类型，支持静态和动态类型

3. 可以在编译期间发现并纠正错误

4. 不允许改变变量的数据类型

二.JavaScript的介绍

1. 一种脚本语言，用于创建动态网页

2. 动态弱类型语言

3. 只能在运行时发现错误

4. 变量可以被赋予不同类型的值

二.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

三.类型

1. 值类型

// 数值类型
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";

2. 数组

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必须是数组，每个元素都必须是字符串 

3. 函数

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') // 报错 

4. 接口类型

interface Person {
   name:string,
    age:string | number,
    readonly id:number
    job?: string
}

基础语法      | 或者       readonly只读       ？可选


interface Student extends Person{
    major:string
}

5. 内置类型

日期     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)
})