课程名称:Web前端架构师2022版
课程章节: 第8周 前端基础技术回顾和巡礼
主讲老师:张轩
课程内容:
今天学习的内容包括:
2-1 Typescript 基础知识
2-2 接口:Interface
课程收获:
npm install -g typescript
Javascript 数据类型
- 原始数据类型
- Object
那么什么是原始数据类型呢?MDN 的文档写的很清楚,除 Object 以外的所有类型都是不可变的(值本身无法被改变)。我们称这些类型的值为“原始值”。
let isDone: boolean = false
let age: number = 10
let binaryNumber: number = 0b1111
// string
let firstName: string = 'viking'
let message: string = `Hello, ${firstName}, age is ${age}`
// undefined null
let u: undefined = undefined
let n: null = null
// 注意 undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量,可以赋值给 number 类型的变量:
let num: number = undefined
// any
let notSure: any = 4
notSure = 'maybe it is a string'
notSure = 'boolean'
notSure.myName
notSure.getName()
Array 和 Tuple
说完原始数据类型,来说Object 类型,第一个要接触的就是数组,应该是我们前端开发工程师最熟悉的一种数据结构,它有多种定义方法,这里我们先简介最简单的一种。好,来到代码:
//最简单的方法是使用「类型 + 方括号」来表示数组:
let arrOfNumbers: number[] = [1, 2, 3, 4]
//数组的项中不允许出现其他的类型:
//数组的一些方法的参数也会根据数组在定义时约定的类型进行限制:
arrOfNumbers.push(3)
arrOfNumbers.push('abc')
函数
接下来说一说函数,函数是构成程序的重要组成部分
那么函数主要是由两部分构成的,一个是输入,一般是通过不同参数的传参来实现,第二个是输出,就是函数的返回结果。
来到我们的第一个例子,约定输入,约定输出
function add(x: number, y: number): number {
return x + y
}
let result = add(2, 3)
// 多余或者少于这个参数是不可以的,会出现错误。
// 那么我们怎样实现可选参数呢?加一个问好就可以了
function add(x: number, y: number, z?: number): number {
if (typeof z === 'number') {
return x + y + z
} else {
return x + y
}
}
interface 和 class
interface
interface 可以帮我们非常方便的定义对象的类型,那这个概念就称之为 interface 接口,typescript 中的interface 非常的灵活,听到新概念大家先不要觉得它难以理解,我们来讲它的第一个主要功能:就是对对象的形状 shape 进行描述,这也是最容易理解的,interface 本身就像一种抽象的契约或者图纸,它非常
灵活,可以描述编程语言的各种类型,总体来说是非常有意思的一个概念,
interface Person {
name: string;
age: number;
}
// 接着定义了一个变量 viking,它的类型是 Person。这样,我们就约束了 viking 的形状必须和接口 Person 一致。
let viking: Person ={
name: 'viking',
age: 20
}
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦