【金秋打卡】第6天 Web前端架构师2022版-原创手记-慕课网

课程名称：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
}