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


目录
相关文章
|
25天前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
78 2
|
25天前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
41 4
|
2天前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
8 0
|
25天前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
25 1
|
2月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
2月前
|
资源调度 JavaScript 前端开发
TypeScript实战教程(一):表单上传与后端处理
本文是TypeScript实战教程的第一部分,介绍了使用TypeScript进行表单上传和后端处理的完整流程,包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据,并提供了详细的代码示例和运行测试方法。
TypeScript实战教程(一):表单上传与后端处理
|
25天前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
35 1
typeScript进阶(9)_type类型别名
|
25天前
|
JavaScript
typeScript基础(2)_any任意值类型和类型推论
本文介绍了TypeScript中的`any`任意值类型,它可以赋值为其他任何类型。同时,文章还解释了TypeScript中的类型推论机制,即在没有明确指定类型时,TypeScript如何根据变量的初始赋值来推断其类型。如果变量初始化时未指定类型,将被推断为`any`类型,从而允许赋予任何类型的值。
49 4
|
25天前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
32 1
|
25天前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
38 0