本文介绍: 函数类型实际上指的是:函数参数返回值类型格式://普通函数function 函数名(形参1:类型=默认值形参2:类型=默认值):返回值类型 { }//箭头函数const 函数名(形参1:类型=默认值形参2:类型=默认值):返回值类型 => { }示例// 函数声明// 箭头函数add(1,’1′) // 报错

文章转载: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时间

对比:

  1. 在VSCode里面代码
  2. 浏览器运行代码 –> 运行时,才会发现错误
  1. 在VSCode里面写代码 –> 写代码时就会发现错误
  2. 浏览器中运行代码

三、TypeScript类型

常用基础类型

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

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

注意:

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

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

原始类型

// 数值类型
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<类型&gt; = [值1,…]

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

// 写法二:
let strings: Array<string&gt; = ['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中的编码技巧

 

原文地址:https://blog.csdn.net/weixin_52512511/article/details/132076225

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_28300.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注