文章转载:https://blog.csdn.net/weixin_46185369/article/details/121512287
写的很详细,适合初学者看看。
一、TypeScript是什么?
1.TypeScript简称:TS,是JavaScript的超集。简单来说就是:JS有的TS都有。JS写的代码在T的环境下都能跑。
// TypeScript 代码有明确的数据类型
let age1: number = 18
// JavaScript 代码没有明确的类型
let age2 = 18
二、为什么要为JS添加类型支持?
JS的缺陷
1.JS的类型系统是弱类型的,没有类型的概念
let ar = 11 // 这里是数值
ar = [] // 偷偷的改成了数组类型
arr.toFixed(2) // 这里会报类型错误
没有类型检验,导致了在使用JS进行项目开发时,会经常遇到类型错误的问题。
2.JavaScript属于动态类型的编程语言
1.它要先编译,再执行。不能直接执行,需要编译成js才能执行
2.它会在编译期间做类型检查,从而提前发现错误。配合VSCode等开发工具,TS可以提前到编写代码的同时就发现代码中的类型错误,减少找bug、改bug时间
对比:
- 使用JS:
- 使用TS
三、TypeScript类型
常用基础类型
- js已有类型
注意:
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
联合类型
联合类型的格式
解释:|
(竖线)在 TS 中叫做联合类型,即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种
let arr: (number | string)[] = [1, 'a', 3, 'b']
应用场景
// | 联合类型
// 联合类型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 numbers: number[] = [1, 3, 5] // numbers必须是数组,每个元素都必须是数字
// 写法二:
let strings: Array<string> = ['a', 'b', 'c'] // strings必须是数组,每个元素都必须是字符串
拓展示例
如何定义一个数组,它的元素可能是字符串类型,也可能是数值类型。
let arr:(number|string)[] = ['1',1]
类型别名
type s = string //定义
const str1:s = 'abc'
const str2:string = 'abc'
场景
// 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:类型=默认值):返回值类型 { }
//箭头函数
// 函数声明
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 '打电话'}
}
说明:
对象类型-接口
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 '打电话'
}
}
解释:
接口和类型的区别
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
}
接口继承
属性1:类型1, //接口2中特有的类型
….
}
interface Point2D{ x:number; y:number}
//继承Point2D
interface Point3D extends Point2D {
z:number
}
解释:
泛型
四、VSCode中的编码技巧
原文地址:https://blog.csdn.net/weixin_52512511/article/details/132076225
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_28300.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!