关于TypeScript

发表于 | 分类于
本文字数： 2.7k | 阅读时长 ≈ 5 分钟

TypeScript 作为 JavaScript 的超集
被 VSCode 很好的支持，有了更全面的智能提示。
还解决了一些 JavaScript 为了"灵活"付出的一些代价导致的问题
就是很大程度上帮助避免遇到 TypeError

相关连接

TypeScript
深入理解 TypeScript
TypeScript 解决了什么痛点？

一些说明

TS 算是 JS 的一个扩展，适用于中大型项目。
目的是增加代码的可读性以及可维护性，方法是增加了类型注解，大厂用了都说好。

以及下文是一些笔记，绝大多数是TypeScript和深入理解 TypeScript这两个连接里的内容的搬运。

注解类型

基础类型
TypeScript 类型系统

语法 → : TypeAnnotation

1
const demo: number = 123;

类型有很多，包括三种原始类型、数组类型、接口类型、特殊类型等在内的很多类型

原始类型

支持的有 string / number / boolean 。

1
2
3
4
5
let num: number;
let str: string;
let bool: boolean;
num = 123;
num = "123"; // Error

特殊类型

  1. any
    设置为 any 的变量 TS 会把类型关闭，在类型系统里，any 兼容包括其本身在内的所有类型。因此所有的类型都能赋值给它。

    1
    2
    3
    4
    5
    6
    let demo: any;
    demo = "123"; // OK
    demo = 123; // OK
    let num: numer;
    demo = num; // OK
    num = demo; // OK 这里可以看到any类型的值可以赋给任何的类型的变量。

  2. null & undefined

    TypeScript 里，undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null。

    与被标注了 any 类型的变量一样， null 或者 undefined 能被赋值给任意类型的变量。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let foo: undefined;
    foo = undefined; // OK
    foo = 1; // Error. Type '1' is not assignable to type 'undefined'
    let bar: null;
    bar = null; // OK
    bar = "1"; // Error. Type '"1"' is not assignable to type 'null'
    let num: number;
    let str: string;
    num = null;
    str = undefined;

  3. void
    void 用来表示一个函数没有返回值。

    1
    2
    3
    function log(msg: string): void {
      console.log(msg);
    }

数组类型

好像 C 就是这么定义数组的(也有可能不是，太久了没用 C 了记不太清了。

1
2
3
4
5
6
7
8
9
const strArr: string[]
// 或者使用泛型
// const strArr: Array<string>
strArr = ['foo', 'bar']
strArr[1] // bar
strArr.length // 2
strArr[0] = 1 // Error
strArr = 1 // Error
strArr = [1, 'bar'] // Error

元组类型

和 python 的元组不一样。

1
2
3
4
5
let nameNumber: [string, number];
nameNumber = ["Jenny", 221345]; // OK
nameNumber = ["Jenny", "221345"]; // Error. Type 'string' is not assignable to type 'number'
nameNumber = ["Jenny", 221345, "demo"]; // Error. Type '[string, number, string]' is not assignable to type '[string, number]'.
const [name, number] = nameNumber;

接口类型

是很多个类型声明的组合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface Student {
  name: string;
  id: number;
}
let student: Student;
student = {
  name: "Jone",
  id: 11
};
student = {
  name: "Jone"
}; // Property 'id' is missing in type '{ name: string; }' but required in type 'Student'
student = {
  name: "Jone",
  id: "11" // Type 'string' is not assignable to type 'number'
};

接口是多个类型声明的组合，同样的也可以选择内联类型注解来进行分开声明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let student: {
  name: string;
  id: number;
};
student = {
  name: "Jone",
  id: 11
};
student = {
  name: "Jone"
}; // Property 'id' is missing in type '{ name: string; }' but required in type 'Student'
student = {
  name: "Jone",
  id: "11" // Type 'string' is not assignable to type 'number'
};
student = {
  name: "Jone"
}; // Property 'id' is missing in type '{ name: string; }' but required in type '{ name: string; id: number; }'

泛型

泛型

0%