TypeScript学习笔记

1.基础类型

布尔,数字,字符串,数组,元组Tuple,枚举,任意值,空值,null和undefined

1.1 元组Tuple

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为string和number类型的元组。

javascript 复制代码
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK

1.2 枚举

javascript 复制代码
enum Color {Red, Green, Blue};
let c: Color = Color.Green;

1.3数组

javascript 复制代码
let list: number[] = [1, 2, 3];

第二种方式是使用数组泛型,Array<元素类型>:

javascript 复制代码
let list: Array<number> = [1, 2, 3];

1.4 布尔

javascript 复制代码
let isDone: boolean = false;

1.5 数字

javascript 复制代码
let decLiteral: number = 6;

1.6 字符串

javascript 复制代码
let name: string = "bob";
name = "smith";

2.解构赋值

2.1解构数组

javascript 复制代码
let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]

2.2 对象解构

javascript 复制代码
let o = {
    a: "foo",
    b: 12,
    c: "bar"
}
let {a, b} = o;

3 接口

javascript 复制代码
interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

类型检查器不会去检查属性的顺序,只要相应的属性存在并且类型也是对的就可以。

3.1 可选属性

带有可选属性的接口与普通的接口定义差不多,只是在可选属性名字定义的后面加一个?符号。

可选属性的好处之一是可以对可能存在的属性进行预定义,好处之二是可以捕获引用了不存在的属性时的错误。

3.2 只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用readonly来指定只读属性:

javascript 复制代码
interface Point {
    readonly x: number;
    readonly y: number;
}

3.3 reladonly 和const的区别

做为变量使用的话用const,若做为属性则使用readonly。

3.4 函数类型

为了使用接口表示函数类型,我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

javascript 复制代码
interface SearchFunc {
  (source: string, subString: string): boolean;
}

这样定义后,我们可以像使用其它接口一样使用这个函数类型的接口。

javascript 复制代码
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  if (result == -1) {
    return false;
  }
  else {
    return true;
  }
}

3.5 接口扩展 extends

javascript 复制代码
interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

4 类

下面看一个使用类的例子:

javascript 复制代码
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");
相关推荐
qq_284274053 小时前
机械设计基础·滚动轴承全解(类型·代号·选型·寿命)+轮系与蜗杆蜗轮传动
笔记·学习·自动化·制造
ACP广源盛139246256738 小时前
硬件选型笔记:国产 PCIe Gen2.1 交换芯片 IX6024@ACP,工控与存量设备国产化改造方案评估
笔记·硬件架构·硬件工程·pcie·国产芯片
2603_965148118 小时前
社区与学习资源:从入门到精通的API选品学习路径
数据库·人工智能·python·学习·数据挖掘
濮水大叔9 小时前
NestJS Dynamic Providers 与 Cabloy/Vona Provider Scene:同接口多实现的两种装配哲学
typescript·node.js·nestjs
文人sec9 小时前
SQL基础入门笔记 | 从零基础到掌握核心查询语句
数据库·笔记·sql
摇滚侠10 小时前
《计算机是如何工作的:人人都能懂的计算机软硬件工作原理》第 9 章 机器码与汇编语言 阅读笔记 9
java·开发语言·笔记
kaixin_啊啊10 小时前
【用于更准确 G×E 基因组预测的大规模作物数据集与基于深度学习的多模态融合框架】论文学习
人工智能·深度学习·学习
xier_ran10 小时前
【infra之路】AI 编译器学习笔记(六):重拾 C++——lambda 与 MLIR 中的回调
c++·笔记·学习
志尊宝10 小时前
Vue3 零基础每日笔记(078):首屏加载速度优化汇总——清单化方案
笔记
别动我齐刘海12 小时前
Linux 系统调试学习2
linux·运维·c++·人工智能·学习·机器学习·机器人