TypeScript初学

文章转载:https://blog.csdn.net/weixin_46185369/article/details/121512287

写的很详细,适合初学者看看。

一、TypeScript是什么?

1.TypeScript简称:TS,是JavaScript的超集。简单来说就是:JS有的TS都有。JS写的代码在T的环境下都能跑。

2.在JS基础之上,为JS添加了类型支持。TypeScript = Type + JavaScript

3.TypeScript是微软开发的开源编程语言,可以在任何运行JavaScript的地方运行

复制代码
// TypeScript  代码有明确的数据类型
let age1: number = 18
// JavaScript  代码没有明确的类型
let age2 = 18

二、为什么要为JS添加类型支持?

JS的缺陷

1.JS的类型系统是弱类型的,没有类型的概念

复制代码
let ar = 11  // 这里是数值
ar = []  // 偷偷的改成了数组类型
arr.toFixed(2) // 这里会报类型错误

没有类型检验,导致了在使用JS进行项目开发时,会经常遇到类型错误的问题。

2.JavaScript属于动态类型的编程语言

边解释边执行,错误只能在运行阶段才能发现

TS属于静态类型都编程语言

1.它要先编译,再执行。不能直接执行,需要编译成js才能执行

2.它会在编译期间做类型检查,从而提前发现错误。配合VSCode等开发工具,TS可以提前到编写代码的同时就发现代码中的类型错误,减少找bug、改bug时间

对比:

  • 使用JS:
  1. 在VSCode里面写代码
  2. 在浏览器中运行代码 --> 运行时,才会发现错误
  • 使用TS
  1. 在VSCode里面写代码 --> 写代码时就会发现错误
  2. 在浏览器中运行代码

三、TypeScript类型

常用基础类型

将ts中的常用基础类型分为两类

  • js已有类型
  1. 原始类型:number/string/boolean/null/undefined/symbol
  2. 对象类型:object(包括,数组、对象、函数等对象)
  • ts新增类型
  1. 联合类型
  2. 自定义类型(类型别名)
  3. 接口
  4. 元组
  5. 字面量类型
  6. 枚举
  7. void
  8. any 等

注意:

1.原始类型在 TS 和 JS 中写法一致

2.对象类型在 TS 中更加细化,每个具体的对象(比如,数组、对象、函数)都有自己的类型语法

原始类型

  • 原始类型:number/string/boolean/null/undefined/symbol

  • 特点:简单,这些类型,完全按照 JS 中类型的名称来书写

    // 数值类型
    let age: number = 18

    // 字符串类型
    let myName: string = '小花'

    // 布尔类型
    let isLoading: boolean = false

    // undefined
    let un: undefined = undefined

    // null
    let timer:null = null

联合类型

联合类型的格式

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

解释:|(竖线)在 TS 中叫做联合类型,即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种

复制代码
let arr: (number | string)[] = [1, 'a', 3, 'b']

应用场景

  1. 定时器id

    // | 联合类型

    // 联合类型1: 变量可以是两种类型之一
    let timer:number|null = null
    timer = 2

    // 联合类型2: 数组元素可以是两种类型之一
    let arr: (number|string|boolean)[] = [1,2,3]

    arr[0] = '1'
    arr[2] = true

数组类型

数组类型的格式

let 变量: 类型[ ] = [值1,...]

let 变量: Array<类型> = [值1,...]

复制代码
// 写法一:
let numbers: number[] = [1, 3, 5] //  numbers必须是数组,每个元素都必须是数字

// 写法二:
let strings: Array<string> = ['a', 'b', 'c'] //  strings必须是数组,每个元素都必须是字符串

拓展示例

如何定义一个数组,它的元素可能是字符串类型,也可能是数值类型。

分析,结合联合类型来使用

复制代码
let arr:(number|string)[] = ['1',1]

类型别名

type 别名 = 类型

复制代码
type s = string //定义

const str1:s = 'abc'
const str2:string = 'abc'

作用

  1. 给类型起别名
  2. 定义了新类型

场景

给复杂类型起别名

复制代码
// type NewType = string | number

// let a: NewType = 1
// let b: NewType = '1'

// let arr: NewType[] = [1, '1']
    
type MyArr = (number | string) []
const arr:MyArr = [1, '1']

函数-单个定义

函数的类型

函数的类型实际上指的是:函数参数和返回值的类型

格式:

//普通函数

function 函数名(形参1:类型=默认值,形参2:类型=默认值):返回值类型 { }

//箭头函数

const 函数名(形参1:类型=默认值,形参2:类型=默认值):返回值类型 => { }

示例

复制代码
// 函数声明
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
  return num1 + num2
}

add(1,'1') // 报错

对象类型-单独使用

格式

const 对象名: {

属性名1:类型1,

属性名2:类型2,

方法名1(形参1: 类型1,形参2: 类型2): 返回值类型,

方法名2:(形参1: 类型1,形参2: 类型2)=>返回值类型

} = { 属性名1: 值1,属性名2:值2 }

可选属性用 ?

const 对象名: {属性名1?:类型1,属性名2:类型2 } = { 属性名2:值2 }

示例

复制代码
const goodItem:{name:string,price:number,func:()=>string} = {
      name:'手机',
      price:2000,
      func:function(){return '打电话'}
}

说明:

  1. 使用 {} 来描述对象结构
  2. 属性采用属性名: 类型的形式,如果是多行,可以省略,
  3. 方法采用方法名(): 返回值类型的形式
  4. 可选使用 ?

对象类型-接口

格式

interface 接口名 {

属性1: 类型1,

属性2: 类型2,

}

示例

复制代码
interface IGoodItem {
    name:string,
    price:number,
    func:()=>string
}

const good1:IGoodItem = {
    name:'手表',
    price:2000,
    func:function(){
       return '看时间'
  }
}

const good2:IGoodItem = {
    name:'手机',
    price:2000,
    func:function(){
        return '打电话'
  }
}

解释:

  1. 使用 interface 关键字来声明接口
  2. 接口名称(比如,此处的 IPerson),可以是任意合法的变量名称,推荐以 I 开头
  3. 声明接口后,直接使用接口名称作为变量的类型

接口和类型的区别

interface(接口)和 type(类型别名)的对比:

  • 相同点:都可以给对象指定类型
  • 不同点:
    • 接口,只能为对象指定类型。它可以继承。
    • 类型别名,不仅可以为对象指定类型,实际上可以为任意类型指定别名

推荐:能使用type就是用type

复制代码
//接口的写法
interface IPerson {
     name:string,
     age:number
}

const user:IPerson = {
     name:'a',
     age:20
}

//type的写法
type Person = {
    name:string,
    age:number
}

const user:Person = {
   name:'a',
   age:20
}

接口继承

继承格式

interface 接口2 extends 接口1 {

属性1:类型1, //接口2中特有的类型

....

}

示例

复制代码
interface Point2D{ x:number; y:number}

//继承Point2D
interface Point3D extends Point2D {
  z:number
}

解释:

  1. 使用 extends(继承)关键字实现了接口 Point3D 继承 Point2D
  2. 继承后,Point3D 就有了 Point2D 的所有属性和方法(此时,Point3D 同时有 x、y、z 三个属性)

泛型

四、VSCode中的编码技巧

  • 如果不知道类型,可以通过鼠标放在变量名称上,利用 VSCode 的提示来查看类型

  • 写代码的时候,多看方法、属性的类型,养成写代码看类型的习惯

相关推荐
文心快码BaiduComate3 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger3 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer9819 分钟前
基于webpack的场景解决
前端·webpack
华科云商xiao徐16 分钟前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手23 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy26 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy33 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵33 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js