JavaScript 与 TypeScript 对比。为什么要学习 TypeScript？什么是 TypeScript？TypeScript 基础 什么是任意数据类型？对象数据类型 数组数据类型 什么是联合？什么是元组 结论

2025-06-07

JavaScript 与 TypeScript。我们为什么要学习 TypeScript？

什么是 TypeScript？

基本打字稿

什么是任何数据类型？

对象数据类型

数组数据类型

什么是union？

什么是tupple

结论

什么是 TypeScript？

大家好，我是加拿大温哥华的一名学生，学习的是 Web 开发。本文我将向大家介绍“如何使用 TypeScript 的基本数据类型”以及“为什么要学习 TypeScript ”。

JavaScript 是最流行的编程语言之一。
因为它的语法不像其他语言那样严格。换句话说，JavaScript 是一种更自由的语言，但如果你的项目中有大量代码，这种自由的风格可能会变得很麻烦。

请看一下此代码。

// Can you guess the return value?
const pikachu = (a, b) => {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

你能猜出这段代码的返回值吗？
我猜不出来。因为 pikachu 函数可以接受所有类型的变量，比如字符串、数字等等。

// Arguments is number.
const pikachu = (a, b) => {
  return a + b;
}
const result = pikachu(2021, 9);
console.log(result); // 2030
Enter fullscreen mode Exit fullscreen mode 
// Arguments is string.
const pikachu = (a, b) => {
  return a + b;
}
const result = pikachu("2021", "9");
console.log(result); // 20219
Enter fullscreen mode Exit fullscreen mode

JavaScript 是一种动态类型的语言。这有利于更轻松地编写代码。但是，开发人员必须更加关注函数中需要哪些参数，以及函数返回什么值。随着代码阅读量的增加，你就会意识到这会带来很大的压力。

另一方面，请查看此代码。

// Can you guess the return value?
const pikachu = (a: number, b: number): number => {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

这是 TypeScript 代码。TypeScript 具有静态类型。看到这段代码，我们大概就能猜出 pikachu 函数的返回值是number。
这对于理解代码非常有用，因为很多公司都有大量的代码，而且非常复杂。
因此，我们应该使用更易读的方法，因为阅读和理解别人写的代码需要花费大量时间。

基本打字稿

TypeScript 有一些原始数据类型，如字符串、数字、布尔值、null、undefined 等。

这是简单数据类型的代码。

// string, number and boolean.
const caterpie01: number = 2021;    // OK
const caterpie02: number = false;   // NG

const Metapod01: string = "sleepy"; // OK
const Metapod02: string = true;     // NG

const Wartortle01: boolean = true;  // OK
const Wartortle02: boolean = 1111;  // NG
Enter fullscreen mode Exit fullscreen mode

我们得到这样的编译错误。

typescript.ts:10:7 - error TS2322: Type 'boolean' is not assignable to type 'number'.

10 const caterpie02: number = false;   // NG
         ~~~~~~~~~~

typescript.ts:13:7 - error TS2322: Type 'boolean' is not assignable to type 'string'.

13 const Metapod02: string = true;     // NG
         ~~~~~~~~~

typescript.ts:16:7 - error TS2322: Type 'number' is not assignable to type 'boolean'.

16 const Wartortle02: boolean = 1111;  // NG
         ~~~~~~~~~~~
Enter fullscreen mode Exit fullscreen mode

接下来，请思考一下 null 和 undefined 的数据类型。

// null and undefined.
const Butterfree: null = null;
const ButterfreeNull: string = Butterfree;
console.log(ButterfreeNull) // null

const Kakuna: undefined = undefined;
const KakunaNull: string = Kakuna;
console.log(KakunaNull) //undefined
Enter fullscreen mode Exit fullscreen mode

这段代码在我的环境中运行正常。我们可以将 null 和 undefined 赋给字符串值。
在本例中，我没有设置严格模式。一旦我将严格模式设置为 true，这段代码就会像这样运行。

typescript.ts:21:7 - error TS2322: Type 'null' is not assignable to type 'string'.

21 const ButterfreeNull: string = Butterfree;
         ~~~~~~~~~~~~~~

typescript.ts:25:7 - error TS2322: Type 'undefined' is not assignable to type 'string'.

25 const KakunaNull: string = Kakuna;
Enter fullscreen mode Exit fullscreen mode

太棒了！我们可以捕获类型错误了。

您可以在tsconfig.json中设置严格模式，也可以使用tsc命令参数（例如
--strict ）。如果您不确定如何设置 TypeScript 环境，请查看此网站。

什么是任何数据类型？

TypeScript 支持任意数据类型。它允许所有数据类型运行而不会出现类型错误。这就像原生 JavaScript 一样。
请查看此示例代码。

// any data type
let pidgey: any = 1991;
console.log(typeof pidgey) // number

pidgey = "bird";
console.log(typeof pidgey) // string

pidgey = false;
console.log(typeof pidgey) // boolean

pidgey = null;
console.log(typeof pidgey) // object

pidgey = undefined;
console.log(typeof pidgey) // undefined
Enter fullscreen mode Exit fullscreen mode

pidgey 变量可以接收所有数据类型！

这是神奇的数据类型。🙀
如果我们使用任何数据类型，我们根本不需要使用 TypeScript。我们只需使用 JavaScript 编写代码即可。

如果您未定义数据类型，TypeScript 可以猜测数据类型。
我们可以用下面的代码替换上面的示例代码。

// typescript can guess data types.
const caterpie01: number = 2021;     // number
const caterpie001 = 2021;            // number   - typescript guess


const Metapod01: string = "sleepy";  // string
const Metapod001 = "sleepy";         // string   - typescript guess

const Wartortle01: boolean = true;   // boolean
const Wartortle001 = true;           // boolean  - typescript guess
Enter fullscreen mode Exit fullscreen mode

这样更易读，也更简洁。当然，我们不能为这个变量赋值其他数据类型。

let caterpie001 = 2021;            // number
caterpie001 = "text";              // type error
Enter fullscreen mode Exit fullscreen mode

另一方面，如果我们没有在函数中定义参数的数据类型，TypeScript 会将其判断为any。请检查此代码。

const pikachu = (a, b): number => {
  return a + b;
}
pikachu(2021, 9);
Enter fullscreen mode Exit fullscreen mode

我得到了这样的错误。（我的环境是严格模式为真。如果关闭严格模式，则可以成功编译并且不会看到类型错误）

typescript.ts:57:18 - error TS7006: Parameter 'a' implicitly has an 'any' type.

57 const pikachu = (a, b): number => {
                    ~

typescript.ts:57:21 - error TS7006: Parameter 'b' implicitly has an 'any' type.

57 const pikachu = (a, b): number => {
Enter fullscreen mode Exit fullscreen mode

因为 TypeScript 无法猜测接收的值。
所以 TypeScript 定义了所有数据类型。在 TypeScript 中使用函数时，我们必须像这样定义参数的数据类型。

const pikachu = (a: number, b: number): number => {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

或者

// Do not define the return value's data type.
const pikachu = (a: number, b: number) => {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

如果你用 TypeScript 创建函数，你必须定义具体的数据类型。我建议除非特殊情况，否则不要使用任何数据类型。例如，将代码从 JavaScript 迁移到 TypeScript。

对象数据类型

TypeScript 可以使用接口来定义对象数据类型。
首先，看一下这段代码。

// define object data type with interface.
interface PokemonObj {
  name: string,
  age: number,
  skill: string
}
// assign data type to object.
const pokemon: PokemonObj = {
  name: "pikachu",
  age: 6,
  skill: "Electric Shock!"
}
Enter fullscreen mode Exit fullscreen mode

我们可以使用接口语法来创建对象数据类型。然后，将其赋值给对象。
如果我们更改对象的数据类型，就会出现类似这样的类型错误。

// define object data type with interface.
interface PokemonObj{
  name: string,
  age: number,
  skill: string
}
// assign data type to object.
const pokemon: PokemonObj = {
  name: "pikachu",
  age: "change age",       // change 
  skill: "Electric Shock!"
}
Enter fullscreen mode Exit fullscreen mode

这是类型错误消息。

typescript.ts:75:3 - error TS2322: Type 'string' is not assignable to type 'number'.

75   age: "change age",
     ~~~

  typescript.ts:69:3
    69   age: number,
         ~~~
    The expected type comes from property 'age' which is declared here on type 'PokemonObj'
Enter fullscreen mode Exit fullscreen mode

我们得到了类型错误。使用接口来定义对象的数据类型很有用。当然，我们可以像下面的代码一样直接定义数据类型。

// assign data type directly to object.
const pokemon: {name: string, age: number, skill: string} = {
  name: "pikachu",
  age: 6,
  skill: "Electric Shock!"
}
Enter fullscreen mode Exit fullscreen mode

数组数据类型

具有数据类型的数组是这样的。

// define array data type
const pokemon: string[] = ["pikachu", "Raichu", "Charizard"];
Enter fullscreen mode Exit fullscreen mode

如果我们改变数据类型，就会出现类型错误。

// change array data type
const pokemon: string[] = ["pikachu", "Raichu", false];
Enter fullscreen mode Exit fullscreen mode

这是类型错误消息。

typescript.ts:80:49 - error TS2322: Type 'boolean' is not assignable to type 'string'.

80 const pokemon: string[] = ["pikachu", "Raichu", false];
Enter fullscreen mode Exit fullscreen mode

这非常有用且强大，因为我们不必关心每个数组元素的数据类型。顺便说一句，我想向你展示另一种表达方式。这和上面的代码一样。它看起来像这样。

// defined array with another way.
const pokemon: Array<string> = ["pikachu", "Raichu", "Charizard"];
Enter fullscreen mode Exit fullscreen mode

下一个数据类型是泛型数据类型。这是通用数据类型。定义泛型数据类型后，我们就可以定义它了。示例代码如下。

// defined array with generics data type.
type Pokemon<T> = T[];
// After defined generics type, we can define specific data type.
const pokemon: Pokemon<string> = ["pikachu", "Raichu", "Charizard"];

// Above code is the same as this.
const pokemon: string[] = ["pikachu", "Raichu", "Charizard"];
Enter fullscreen mode Exit fullscreen mode

我们可以使用泛型数据类型定义一些数据类型。
这个示例虽然不太好，但很容易理解如何使用泛型数据类型。示例如下。

// defined array with generics data type.
type Pokemon<T> = T[];
// After defined generics type, we can define specific data type.
const pokemon01: Pokemon<string> = ["pikachu", "Raichu", "Charizard"];
const pokemon02: Pokemon<number> = [6, 14, 16];
const pokemon03: Pokemon<boolean> = [true, true, false];
Enter fullscreen mode Exit fullscreen mode

什么是union？

如果您想使用联合数据类型，您可以定义多个数据类型。请查看此示例代码。

let pokemon: (string | number) = "pikachu";  // OK
pokemon = 6;
Enter fullscreen mode Exit fullscreen mode

这段代码运行正常，因为 pokemon 变量可以接受字符串或数字数据类型。但这种情况是错误的。

let pokemon: (string | number) = "pikachu";
pokemon = 6;
pokemon = false;      // NG
Enter fullscreen mode Exit fullscreen mode

因为 pokemon 变量不支持布尔数据类型，所以会引发编译错误。如果我们想创建一个包含多种数据类型的数组，当然可以使用联合数据类型。这是示例代码。

// define data type with array and union
let pokemon: (string | number)[] = ["pikachu", "Raichu", 6, 14];
Enter fullscreen mode Exit fullscreen mode

这段代码是正确的。
但是如果我们添加其他数据类型，就会出现如下类型错误。

// define data type with array and union
let pokemon: (string | number)[] = ["pikachu", "Raichu", 6, 14, false];
Enter fullscreen mode Exit fullscreen mode

这是类型错误消息。

typescript.ts:105:65 - error TS2322: Type 'boolean' is not assignable to type 'string | number'.

105 let pokemon: (string | number)[] = ["pikachu", "Raichu", 6, 14, false];
Enter fullscreen mode Exit fullscreen mode

如果要向数组添加多种数据类型，可以使用联合数据类型。

什么是tupple

Tupple 是一种非常严格的数据类型。
首先，你可以查看这段代码。

let pokemon: [string, number] = ["pikachu", 6];
Enter fullscreen mode Exit fullscreen mode

这段代码运行良好。此元组数据类型仅允许两个元素：字符串和数字。
下面我将展示一些错误的情况。


typescript.ts:109:36 - error TS2322: Type 'number' is not assignable to type 'string'.

109 let pokemon02: [string, number] = [6, "pikachu"];      // NG
                                       ~

typescript.ts:109:39 - error TS2322: Type 'string' is not assignable to type 'number'.

109 let pokemon02: [string, number] = [6, "pikachu"];      // NG
                                          ~~~~~~~~~

typescript.ts:110:47 - error TS2322: Type 'string' is not assignable to type 'number'.

110 let pokemon03: [string, number] = ["pikachu", "text"]; // NG
                                                  ~~~~~~

typescript.ts:111:5 - error TS2322: Type '[string, number, number]' is not assignable to type '[string, number]'.
  Source has 3 element(s) but target allows only 2.

111 let pokemon04: [string, number] = ["pikachu", 6, 14];  // NG
Enter fullscreen mode Exit fullscreen mode

元组是一种非常严格的数据类型。但很容易理解这个数组的用途。这意味着该数组只包含两个元素。首先，字符串类型的值。其次，数字类型的值。

结论

在本文中，我介绍了 TypeScript 的基本数据类型。
如果您学习了 TypeScript，不仅可以查看由 TypeScript 创建的 npm 包，还可以编写可读且易于维护的代码。
如果您在公司工作，您知道公司里有很多代码。因此，您必须阅读大量代码并理解它们。TypeScript 可以帮助我们理解代码！

本文只是 TypeScript 的基础知识。
我计划撰写更多有关 TypeScript 数据类型或使用 TypeScript 进行 React 开发的文章。
如果您对本文感兴趣，请给我留言！

感谢您花时间阅读本文。

文章来源：https://dev.to/hiro9108/javascript-vs-typescript-why-we-should-learn-typescript-4d5o
Devto 翻译
PREV
如何使用 React Js 构建独特的 Web 应用程序？
NEXT
重要的 JavaScript 面试问答