Types de base Typescript et comparaison avec Javascript-js tutoriel-php.cn

Types de données TypeScript et comparaison avec JavaScript

Types de base Typescript et comparaison avec Javascript

Recommandations d'apprentissage gratuites : tutoriel vidéo javascript

Répertoire d'articles

Types de données TypeScript et comparaison avec JavaScript
Introduction
1. Types de données et types de données de base
- 1. Type de données
- 2.
- 4. Exemples
2. Littéraux et variables
1. Littéraux
- 3. Instance
- 4. Littéraux de modèle
- 3. Types de données JavaScript
Résumé

Introduction

Cet article brièvement présente les types de données de TypeScript et les types de données de JavaScript. Quels sont les types de données de base ? Quel est le rapport avec les types de données ? Répertorie un tableau de comparaison comparant les types de données TypeScript et les types de données JavaScript.

Conseils : ce qui suit est le texte de cet article, les cas suivants sont à titre de référence

1. types de données

1. Type de données

Le type de données est en fait une structure de données intégrée à un langage de programmation, et divers langages de programmation ont leurs propres Les structures de données intégrées ont chacune leurs propres caractéristiques. Ils sont utilisés pour construire d'autres structures de données.

2. Les types de données de base

Les types de base (valeurs de base, types de données de base) sont des données qui ne sont ni des objets ni des méthodes (mais JavaScript a des types de base d'objets encapsulés, et les objets ont également des méthodes. Par exemple, l'objet encapsulé Number du type de données de base number est un objet encapsulé qui vous permet de traiter des valeurs numériques). Dans la plupart des cas, les types de base représentent directement l’implémentation du langage le plus bas. Les valeurs de tous les types primitifs sont immuables. Mais ce qu'il faut noter, c'est la différence entre le type de base lui-même et une variable affectée à un type de base. Les variables se voient attribuer une nouvelle valeur et la valeur d'origine ne peut pas être modifiée comme les tableaux, les objets et les fonctions.

3. La relation entre les deux

La relation entre eux est que le type de données est un sur-ensemble du type de données de base.

4. Exemples

Les valeurs des types de données de base JavaScript sont immuables :

// 使用字符串方法不会改变一个字符串var bar = "bar" //值"bar"是string类型，是js中基础数据类型console.log(bar);// bazbar.toUpperCase();console.log(bar);// baz//值"bar"本身不会改变，赋值行为可以给变量bar赋予一个新值基本类型的值"BAR"，而不是改变它。bar = bar.toUpperCase();console.log(bar);// BAR// 数组也是一种数据类型，但是使用数组方法可以改变一个数组，因此不是基本数据类型var foo = [];console.log(foo);               // []foo.push("plugh");console.log(foo);               // ["plugh"]

Copier après la connexion

2. Les littéraux et les variables

1 Les littéraux

Les littéraux sont composés d'expressions grammaticales Une constante définie ; ou, une constante définie par une expression verbale composée de certains mots. En JavaScript, vous pouvez utiliser différents littéraux. Ces littéraux sont des valeurs fixes données littéralement dans le script, et non des variables. (Annotation : les littéraux sont des constantes, leurs valeurs sont fixes et ne peuvent pas être modifiées pendant l'exécution du script du programme.)

Variable (Variable)

Dans les applications, utilisez des variables comme noms symboliques pour les valeurs. Le nom d’une variable est également appelé identifiant et doit suivre certaines règles. Un identifiant JavaScript doit commencer par une lettre, un trait de soulignement (_) ou un signe dollar ($) ; les caractères suivants peuvent également être des chiffres (0-9). Le langage JavaScript étant sensible à la casse, les lettres peuvent être des lettres majuscules de « A » à « Z » et des lettres minuscules de « a » à « z »

Exemple

Exemple de variable d'affectation de littéral JavaScript :

//变量var anyname//var num是变量 = 1是number类型的字面量var num = 1/**
*	javascrip中各种数据类型的字面量赋值
*///1.数组字面量(Array literals)var animal = ["dog","cat","mouse"]//2.布尔字面量 (Boolean literals)var isTrue = truevar isTrue = false//3.整数 (Integers)var num =0 //117 and -345 (十进制, 基数为10)var num = 015 //0001 and -0o77 (八进制, 基数为8)var num = 0x1123 //0x00111 and -0xF1A7 (十六进制, 基数为16或"hex")var num = 0b11 //0b0011 and -0b11 (二进制, 基数为2)//4.浮点数字面量 (Floating-point literals)var pi = 3.14var decimals = -.2345789 // -0.23456789var decimals = -3.12e+12  // -3.12*1012var decimals = .1e-23    // 0.1*10-23=10-24=1e-24//5.对象字面量 (Object literals)function say(name){
	console.log("Hello",name)}var obj = {name:"World!",hello:say}obj.hello(obj.name) // Hello World//6.字符串字面量 (String literals)var foo = "foo"var bar = 'bar'var multiline = "one line \
				another line "

Copier après la connexion

4 Littéraux de modèle (littéraux de modèle)

In. ES2015/ES6, des littéraux de modèle sont également fournis. Les chaînes de modèle fournissent du sucre syntaxique pour vous aider à construire des chaînes. Ceci est très similaire à la fonctionnalité d'interpolation de chaînes de Perl, Python, Shell et d'autres langages. De plus, vous pouvez ajouter une balise avant de transmettre la chaîne de modèle pour personnaliser le processus d'analyse de la chaîne de modèle. Cela peut être utilisé pour empêcher les attaques par injection ou pour établir une abstraction avancée des données basée sur une chaîne. Voici des exemples :

// String interpolation 字符串插值 使用 `xxx ${插值变量}`var name = "World"var str = `Hello ${name}`console.log(str)// Multiline strings`In JavaScript this is
 not legal.`

Copier après la connexion

3. Types de données JavaScript

JavaScript est un langage faiblement typé ou dynamique. Cela signifie que vous n'avez pas besoin de déclarer le type de la variable à l'avance, le type sera déterminé automatiquement lors de l'exécution du programme. Cela signifie également que vous pouvez utiliser la même variable pour stocker différents types de données : commençons par présenter les types de données de JavaScript.

La dernière norme ECMAScript définit 8 types de données :

1.七种基本数据类型:

1.Boolean(布尔值):有2个值分别是(true 和 false).
2.null:一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的，因此 null 与 Null、NULL或变体完全不同。
3.undefined:和 null 一样是一个特殊的关键字，undefined 表示变量未赋值时的属性。
4.Number(数字)，整数或浮点数，例如：42 或者3.14159。
5.BigInt(任意精度的整数) ( 在 ES2020 中新添加的类型)，可以安全地存储和操作大整数，甚至可以超过数字的安全整数限制。
6.String(字符串)，字符串是一串表示文本值的字符序列，例如：“Howdy” 。
7.Symbol(在 ES6/ES2015 中新添加的类型).。一种实例是唯一且不可改变的数据类型。

2.引用类型:

1.对象(Object)、数组(Array)、函数(Function)，数组，函数是对象的一种

虽然这些数据类型相对来说比较少，但是通过他们你可以在程序中开发有用的功能。对象（Objects）和函数（functions）是这门语言的另外两个基本元素。你可以把对象当作存放值的一个命名容器，然后将函数当作你的程序能够执行的步骤。

四、TypeScript的数据类型

TypeScript几乎支持所有的JavaScript的数据类型，也有特定的数据类型比如枚举，Any,Void,Never等。也就是说TypeScript的数据类型是JavaScript的一个超集。TypeScript通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

1.除了JavaScript七种基本数据类型，还有以下:

1.enum(枚举):是对JavaScript标准数据类型的一个补充像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。默认情况下，从0开始为元素编号。

例子:

//枚举enum Color {Red, Green, Blue}let c: Color = Color.Green;console.log(c) // 1//你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从 1开始编号：enum Color {Red = 1, Green, Blue}let c: Color = Color.Green;console.log(c) // 2//枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：enum Color {Red = 1, Green, Blue}let colorName: string = Color[2];console.log(colorName);  // 显示'Green'因为上面代码里它的值是2

Copier après la connexion

2.any:有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 any类型来标记这些变量。

例子:

//anylet notSure: any = 4;notSure = "maybe a string instead";notSure = false; // okay, definitely a boolean

Copier après la connexion

在对现有代码进行改写的时候，any类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。你可能认为 Object有相似的作用，就像它在其它语言中那样。但是 Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法：

例子:

let notSure: any = 4;notSure.ifItExists(); // okay, ifItExists might exist at runtimenotSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)let prettySure: Object = 4;prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.//当你只知道一部分数据的类型时，any类型也是有用的。 比如，你有一个数组，它包含了不同的类型的数据：：let list: any[] = [1, true, "free"];list[1] = 100;值是2

Copier après la connexion

3.void:某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void

例子:

function warnUser(): void {
    console.log("This is my warning message");}//声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：let unusable: void = undefined;

Copier après la connexion

4.never:never类型表示的是那些永不存在的值的类型。例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never类型，当它们被永不为真的类型保护所约束时。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使 any也不可以赋值给never。

例子:

//下面是一些返回never类型的函数：// 返回never的函数必须存在无法达到的终点function error(message: string): never {
    throw new Error(message);}// 推断的返回值类型为neverfunction fail() {
    return error("Something failed");}// 返回never的函数必须存在无法达到的终点function infiniteLoop(): never {
    while (true) {
    }}

Copier après la connexion

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

例子:

// Declare a tuple typelet x: [string, number];// Initialize itx = ['hello', 10]; // OK// Initialize it incorrectlyx = [10, 'hello']; // Error//当访问一个已知索引的元素，会得到正确的类型：console.log(x[0].substr(1)); // OKconsole.log(x[1].substr(1)); // Error, 'number' does not have 'substr'//当访问一个越界的元素，会使用联合类型替代：x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toStringx[6] = true; // Error, 布尔不是(string | number)类型

Copier après la connexion

五、TypeScript与JavaScript数据类型对照比

数据类型	JavaScript	TypeScript	是否基础类型
null	✅	✅	✅
bigint	✅	✅	✅
string	✅	✅	✅
symbol	✅	✅	✅
boolean	✅	✅	✅
number	✅	✅	✅
undefined	✅	✅	✅
Object	✅	✅	❌
Array	✅	✅	❌ (js不是) ✅ (ts是)
tuple(元组[])	❌	✅	✅
enum	❌	✅	✅
any	❌	✅	✅
void	❌	✅	✅
never	❌	✅	✅

Résumé

Les exemples ci-dessus présentent les types de données JavaScript et TypeScript, et quels sont les types de données de base présentent brièvement les variables et les littéraux ; , les nouveaux littéraux de modèles de fonctionnalités ES6/ES2015 ; enfin, il existe un tableau de comparaison résumant les types de données JavaScript et TypeScript.