TypeScript(TS)安装指南与基础教程学习全攻略(二)

简介: TypeScript(TS)安装指南与基础教程学习全攻略(二)

TypeScript(TS)安装指南与基础教程学习全攻略(一):https://developer.aliyun.com/article/1626107

对象类型-单独使用

格式: 方法有两种写法: 普通函数 和 箭头函数

const 对象名: {
  属性名1:类型1,
  属性名2?:类型2,
  方法名1(形参1: 类型1,形参2: 类型2): 返回值类型,
  方法名2:(形参1: 类型1,形参2: 类型2) => 返回值类型
} = { 属性名1: 值1,属性名2:值2  }
对象类型-类型别名
// 创建类型别名
type Person = {
  name: string,
  age: number
  sayHi(): void
}

// 使用类型别名作为对象的类型:
let person: Person = {
  name: '小花',
  age: 18
  sayHi() {}
}
接口

当一个对象类型被多次使用时,有如下两种方式来来描述对象的类型,以达到复用的目的:

1.类型别名,type

2.接口,interface

interface 接口名  {属性1: 类型1, 属性2: 类型2}
// 这里用 interface 关键字来声明接口
interface IGoodItem  {
  // 接口名称(比如,此处的 IPerson),可以是任意合法的变量名称,推荐以 `I` 开头
   name: string, price: number, func: ()=>string
}

// 声明接口后,直接使用接口名称作为变量的类型
const good1: IGoodItem = {
   name: '手表',
   price: 200,
   func: function() {
       return '看时间'
   }
}
const good2: IGoodItem = {
    name: '手机',
    price: 2000,
    func: function() {
        return '打电话'
    }
}

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

1.相同点:都可以给对象指定类型

2.不同点:

2.1. 接口,只能为对象指定类型。它可以继承。

2.2类型别名,不仅可以为对象指定类型,实际上可以为任意类型指定别名

先有的 interface,后有的 type,推荐使用 type

// 接口的写法-------------
interface IPerson {
  name: string,
  age: number
}
const user1:IPerson = {
  name: 'a',
  age: 20
}

// type的写法-------------
type Person  = {
  name: string,
  age: number
}
const user2:Person = {
  name: 'b',
  age: 20
}
接口继承

如果两个接口之间有相同的属性或方法,可以将公共的属性或方法抽离出来,通过继承来实现复用 语法:

interface 接口2 extends 接口1 {
 属性1: 类型1, // 接口2中特有的类型 
 }

interface a { x: number; y: number }
// 继承 a
// 使用 extends(继承)关键字实现了接口
interface b extends a {
  z: number
}
// 继承后,b 就有了 a 的所有属性和方法(此时,b 同时有 x、y、z 三个属性)
元组

元组是一种特殊的数组。有两点特殊之处

它约定了的元素个数

它约定了特定索引对应的数据类型

function useState(n: number): [number, (number)=>void] {
        const setN = (n1) => {
            n = n1
        }
        return [n, setN]
    }
const [num ,setNum] = useState(10)
字面量类型
let str1 = 'hello TS'
const str2 = 'hello TS' 

str1 是一个变量(let),它的值可以是任意字符串,所以类型为:string

str2 是一个常量(const),它的值不能变化只能是 ‘hello TS’,所以,它的类型为:‘hello TS’


注意:此处的 ‘Hello TS’,就是一个字面量类型,也就是说某个特定的字符串也可以作为 TS 中的类型

type Gender = 'girl' | 'boy'
// 声明一个类型,他的值 是 'girl' 或者是 'boy'
let g1: Gender = 'girl' // 正确
let g2: Gender = 'boy' // 正确
let g3: Gender = 'man' // 错误
枚举

枚举(enum)的功能类似于字面量类型+联合类型组合的功能,来描述一个值,该值只能是 一组命名常量 中的一个。 在没有 type 的时候,大家都是用枚举比较多的,现在比较少了。

enum 枚举名 { 可取值1, 可取值2,.. }

// 使用格式:
枚举名.可取值

一般枚举名称以大写字母开头

枚举中的多个值之间通过 ,(逗号)分隔

定义好枚举后,直接使用枚举名称作为类型注解

枚举也分数值枚举 和 字符串枚举。 数值枚举: 默认情况下,枚举的值是数值。默认为:从 0 开始自增的数值 当然,也可以给枚举中的成员初始化值

enum Direction { Up = 10, Down, Left, Right }
// Down -> 11、Left -> 12、Right -> 13

enum Direction { Up = 2, Down = 3, Left = 8, Right = 16 }

字符串枚举:

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

注意:字符串枚举没有自增长行为,因此,字符串枚举的每个成员必须有初始值

any

any: 任意的。当类型设置为 any 时,就取消了类型的限制。

let obj: any = { x: 0 }

obj.bar = 100
obj()
// obj 可以是任意类型
const n: number = obj
隐式 any

声明变量不提供类型也不提供默认值

定义函数时,参数不给类型

注意:不推荐使用 any!这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)

void

Void类型是ts独有的,可以理解为空值

可以把undefined赋值给void,但不能把null赋值给void

ts的类型any与unknown
: any // 可以赋予任意类型的值
: unknow // 未知类型的值
相同点 不同点
都可以赋予任意类型的值 unknown类型的值不能直接赋值给其他变量
let anyVal: any
anyVal = 5 // number
anyVal = 'str' // string

let unknowVal: unknow
unknowVal = 6
unknowVal = 'str'

let strVal: string
strVal = 'str'
strVal = anyVal
strval = unknowVal // TS2322: Type 'unknown' is not assignable to type 'string'.


目录
相关文章
|
2月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
151 2
|
27天前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
28天前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
30天前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
1月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
28 0
|
2月前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
33 1
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
39 1
typeScript进阶(9)_type类型别名
|
1月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
45 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
44 0