这是我参与「第四届青训营」笔记创作活动的的第9天。

一、本堂课重点内容：

主要学习Ts的基本语法

数据类型
Interface 接口
泛型
类型别名/类型断言
···

二、详细知识点介绍：

什么是TypeScript?

TypeScript是JavaScript的超集，包含兼容所有JS特性，支持共存，同时支持渐进式引入与升级

基本语法

基本数据类型

Number
String
Boolean
Undefined
Null
BigInt（ES6）
Symbol（ES6）

// 声明数据类型方式 
let num : number = 18; 
//类型别名 : 常用于类型比较长的情况意思是两种类型都可以
type double = string | number; 
let str : double = 'nihao';

对象类型

//interface接口属性 只能为对象指定类型。它可以继承。
interface Obj {
    // 只读属性： 约束属性不可在对象初始化外赋值
    readonly age : number,
    name: string,
    //只能定义值为 man 或者 wj
    sex: 'man' | 'wj',
    // 可选属性：定义该属性可以不存在
    hobby?: string,
    // 任意属性：约束所有对象属性都必须是该属性的子类型
    [key:string] : any,
    //当类型设置为any时，就取消了类型限制，一般不推荐
}

const bytedancer:Obj = {
    name : 'Lin',
    age : 18,
    sex : 'wj',
}

Interface接口

用于对「对象的形状（Shape）」进行描述
用 implements 的方法来抽象类的属性和方法
定义函数类型
Duck Typing（鸭子类型）：是动态编程语言的一种对象推断策略，它更关心对象如何被使用而不是对象本身

函数类型

//1.提前接口声明
interface method{
    //传入x，y，以及返回值都必须是number
    (x:number,y:number) : number
}
const mult : method = (x,y) => x * y
//2.声明式实际写法:
function add(x:number,y:number) : number {
    return x + y;
}
//3.箭头函数
const mults : (x:number,y:number) => number =(x,y) => x+y

数组类型

//数组
// 类型+[] 表示全部
type Arr1 = number[];
// 泛型表示
type Arr2 = Array<String | number | Record<string,number>>
//元组表示
type Arr3 = [string,number,number]
//接口表示
interface Arr4{
    [key:number] : any; 
}

let arr : Arr2 = [1,'ds',{asd:121}]

类型推论、联合类型、类型断言

// 类型推论：在没有明确指定类型的时候推测出一个类型
let str = 'str';
// 联合类型：可以指定多种类型（但只能访问联合类型所有类型里共有的属性或方法）
let numberOrString : number | string
// 类型断言：告诉浏览器明确类型
// 这里我们可以用 as 关键字，
function getLength(input: string | number): number { 
    const str = input as string 
    if (str.length) { 
        return str.length 
     } else { 
         const number = input as number return number.toString().length 
     } 
 }

枚举（Enums）

枚举默认从0开始赋值，举里的项会自动递增(+1)，若手动赋值，则会接着手动赋值的枚举项递增
如果某个属性赋值，其他属性也要赋值，否则报错
js的赋值语句返回被赋的值
定义枚举时加const则为常量枚举，常量枚举可提升性能

enum Direction {
  Up,
  Down,
  Left,
  Right,
}
console.log(Direction.Up)

// 还有一个神奇的点是这个枚举还做了反向映射
console.log(Direction[0])

// 字符串枚举
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}
const value = 'UP'
if (value === Direction.Up) {
  console.log('go up!')
}

泛型约束

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法 TypeScript

function echoWithArr<T>(arg: T): T {
  console.log(arg.length)
  return arg
}

// 上例中，泛型 T 不一定包含属性 length，我们可以给他传入任意类型，\
//当然有些不包括 length 属性，那样就会报错

interface IWithLength {
  length: number;
}
//泛型约束 通过 extends 关键字来设置约束条件,而不是想传入啥就传入啥
function echoWithLength<T extends IWithLength>(arg: T): T {
  console.log(arg.length)
  return arg
}

echoWithLength('str')
const result3 = echoWithLength({length: 10})
const result4 = echoWithLength([1, 2, 3])

类型别名

就是给类型起一个别名，让它可以更方便的被重用。

let sum: (x: number, y: number) => number
const result = sum(1,2)
type PlusType = (x: number, y: number) => number
let sum2: PlusType

// 支持联合类型
type StrOrNumber = string | number
let result2: StrOrNumber = '123'
result2 = 123

字面量

常量作为类型写在冒号后面，此时冒号前面的变量只能赋值为该常量；

const str:'name' = 'name'//只能等于name 否则报错
const number：1 =1

交叉类型

字面量可以用 | 设置多个，形成固定的赋值范围

// 字符串字面量
type Directions = 'Up' | 'Down' | 'Left' | 'Right'
let toWhere: Directions = 'Up'//只能为其中的四个值

三、课后个人总结：

Ts语法更偏向于后端一点，学起来有的吃力，特别是接口的用法，需要在项目中去巩固。

TypeScript 入门 | 青训营笔记