Heim > Web-Frontend > js-Tutorial > Hauptteil

Typescript-Grundtypen und Vergleich mit Javascript

coldplay.xixi
Freigeben: 2021-02-12 09:26:28
nach vorne
3347 Leute haben es durchsucht

TypeScript-Datentypen und Vergleich mit JavaScript

Typescript-Grundtypen und Vergleich mit Javascript

Kostenlose Lernempfehlungen: Javascript-Video-Tutorial

Artikelverzeichnis

  • TypeScript-Datentypen und Vergleich mit JavaScript-Vergleich
  • Einführung
  • 1. Datentypen und Basisdatentypen
  • 3. Die Beziehung zwischen den beiden
    • 1. Literale
    • 2. Variable
    3. Instanzen
  • 4. Vorlagenliterale
    • 3. JavaScript-Datentypen
    • 4. TypeScript-Datentypen
    • 5. Vergleich von TypeScript- und JavaScript-Datentypen
    • Zusammenfassung
  • Einführung
  • In diesem Artikel werden die Datentypen von TypeScript und die Datentypen von JavaScript kurz vorgestellt. Was sind die grundlegenden Datentypen? Wie hängt es mit Datentypen zusammen? Listet eine Vergleichstabelle auf, in der TypeScript-Datentypen und JavaScript-Datentypen verglichen werden.

Tipps: Das Folgende ist der Text dieses Artikels, und die folgenden Fälle dienen als Referenz

1. Datentypen und grundlegende Datentypen


Ein Datentyp ist eigentlich eine Die integrierten Datenstrukturen verschiedener Programmiersprachen haben ihre eigenen integrierten Datenstrukturen, jede mit ihren eigenen Eigenschaften. Sie werden zum Aufbau anderer Datenstrukturen verwendet. 2. Grundlegende Datentypen Das Wrapper-Objekt Number des Basisdatentyps Number ist ein gekapseltes Objekt, das die Verarbeitung numerischer Werte ermöglicht. In den meisten Fällen repräsentieren Basistypen direkt die Sprachimplementierung der untersten Ebene. Die Werte aller primitiven Typen sind unveränderlich. Zu beachten ist jedoch der Unterschied zwischen dem Basistyp selbst und einer einem Basistyp zugewiesenen Variablen. Variablen wird ein neuer Wert zugewiesen und der ursprüngliche Wert kann nicht wie Arrays, Objekte und Funktionen geändert werden.

3. Die Beziehung zwischen den beiden

Die Beziehung zwischen ihnen besteht darin, dass der Datentyp eine Obermenge des Basisdatentyps ist.

4. Beispiele

Die Werte von JavaScript-Basisdatentypen sind unveränderlich. Das Folgende sind Beispiele:

// 使用字符串方法不会改变一个字符串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"]
Nach dem Login kopieren

2. Literale und Variablen

1. Literale

Literale sind Konstanten, die durch grammatikalische Ausdrücke definiert werden, oder Konstanten, die durch verbale Ausdrücke definiert werden, die aus bestimmten Wörtern bestehen. In JavaScript können Sie verschiedene Literale verwenden. Bei diesen Literalen handelt es sich um feste Werte, die im Skript wörtlich angegeben werden, nicht um Variablen. (Anmerkung: Ein Literal ist eine Konstante, deren Wert fest ist und nicht geändert werden kann, während das Programmskript ausgeführt wird.)

2. Variable

In Anwendungen werden Variablen als Symbole für Wertenamen verwendet. Der Name einer Variablen wird auch als Bezeichner bezeichnet und muss bestimmten Regeln folgen. Ein JavaScript-Bezeichner muss mit einem Buchstaben, einem Unterstrich (_) oder einem Dollarzeichen ($) beginnen; nachfolgende Zeichen können auch Zahlen (0-9) sein. Da in der JavaScript-Sprache die Groß- und Kleinschreibung beachtet wird, können Buchstaben Großbuchstaben von „A“ bis „Z“ und Kleinbuchstaben von „a“ bis „z“ sein.

//变量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 "
Nach dem Login kopieren

4. Vorlagenliterale

In ES2015/ES6 wird auch ein Vorlagenliteral bereitgestellt, und die Vorlagenzeichenfolge bietet einige syntaktische Informationen, die Ihnen beim Erstellen einer Zeichenfolge helfen. Dies ist der String-Interpolationsfunktion in Perl, Python, Shell und anderen Sprachen sehr ähnlich. Darüber hinaus können Sie vor der Übergabe der Vorlagenzeichenfolge ein Tag hinzufügen, um den Parsing-Prozess der Vorlagenzeichenfolge anzupassen. Dies kann verwendet werden, um Injektionsangriffe zu verhindern oder eine erweiterte stringbasierte Datenabstraktion einzurichten.

Das Folgende sind Beispiele:

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

3. JavaScript-Datentypen

JavaScript ist eine schwach typisierte oder dynamische Sprache. Das bedeutet, dass Sie den Typ der Variablen nicht im Voraus deklarieren müssen, der Typ wird automatisch während der Ausführung des Programms bestimmt. Das bedeutet auch, dass Sie dieselbe Variable zum Speichern verschiedener Datentypen verwenden können: Lassen Sie uns zunächst die Datentypen von JavaScript vorstellen.

Der neueste ECMAScript-Standard definiert 8 Datentypen:

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
Nach dem Login kopieren

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

例子:

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

在对现有代码进行改写的时候,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
Nach dem Login kopieren

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

例子:

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

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) {
    }}
Nach dem Login kopieren

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)类型
Nach dem Login kopieren

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

?? von JavaScript und TypeScript und was sind die grundlegenden Datentypen; Eine kurze Einführung in Variablen und Literale sowie neue Feature-Vorlagenliterale in ES6/ES2015. Schließlich gibt es eine Vergleichstabelle mit einer Zusammenfassung der JavaScript- und TypeScript-Datentypen. Javascript
Datentyp JavaScript TypeScript Ist es ein Basistyp
null
bigint
string
Symbol
boolean
Nummer
undefiniert
Objekt
Array ❌ (js ist nicht) ✅ (ts. ist)
tu ple(tuple[])
enum
any
Leere
Verwandte kostenlose Lernempfehlungen: (Video)

Das obige ist der detaillierte Inhalt vonTypescript-Grundtypen und Vergleich mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!