TypeScriptデータ型とJavaScriptとの比較

記事のディレクトリ

TypeScriptデータ型とJavaScriptとの比較
前書き
1つは、データ型と基本データ型です。
第二に、リテラルと変数
3つ、JavaScriptデータ型
4、TypeScriptデータ型
5、TypeScriptとJavaScriptのデータ型の比較
総括する

前書き

この記事では、TypeScriptのデータ型とJavaScriptのデータ型を簡単に紹介します。基本的なデータ型は何ですか。データ型との関係は？TypeScriptのデータ型とJavaScriptのデータ型を比較するための比較表を一覧表示します。

ヒント：以下はこの記事の内容です。以下のケースは参照用です。

1つは、データ型と基本データ型です。

1.データ型

データ型は、実際にはプログラミング言語の組み込みデータ構造です。さまざまなプログラミング言語には、それぞれ独自の特性を持つ独自の組み込みデータ構造があります。これらは、他のデータ構造を構築するために使用されます。

2.基本的なデータ型

基本型（基本値、基本データ型）は、オブジェクトでもメソッドでもないデータの一種です（ただし、JavaScriptには、オブジェクトであると同時にメソッドでもあるパッケージ化オブジェクトの基本型があります。たとえば、パッケージ化オブジェクト基本データ型番号の番号がカプセル化されています。数値オブジェクトを処理できます）。ほとんどの場合、基本型は最低レベルの言語実装を直接表します。すべての基本タイプの値は不変です。ただし、基本型自体と基本型に割り当てられた変数の違いに注意してください。変数には新しい値が割り当てられ、配列、オブジェクト、関数のように元の値を変更することはできません。

3.2つの関係

それらの間の関係は、データ型が基本データ型のスーパーセットであるということです。

4.例

JavaScriptの基本データ型の値は不変です。次に例を示します。


// 使用字符串方法不会改变一个字符串
var bar = "bar" //值"bar"是string类型，是js中基础数据类型
console.log(bar);// baz
bar.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"]

第二に、リテラルと変数

1.リテラル

リテラルは、文法式によって定義される定数、または特定の単語で構成される単語式によって定義される定数です。JavaScriptでは、さまざまなリテラルを使用できます。これらのリテラルは、変数ではなく、スクリプトで文字通りに指定された固定値です。（注釈：リテラル値は定数であり、その値は固定されており、プログラムスクリプトの実行中に変更することはできません。）

2.変数（変数）

アプリケーションでは、変数を値の記号名として使用します。変数の名前は識別子とも呼ばれ、特定の規則に従う必要があります。JavaScript識別子は、文字、アンダースコア（_）、またはドル記号（$）で始まる必要があります。後続の文字は、数字（0〜9）にすることもできます。JavaScript言語では大文字と小文字が区別されるため、文字は「A」から「Z」までの大文字と「a」から「z」までの小文字にすることができます。

3.例

JavaScriptリテラル割り当て変数の例：


//变量
var anyname
//var num是变量 = 1是number类型的字面量
var num = 1

/**
*	javascrip中各种数据类型的字面量赋值
*/

//1.数组字面量(Array literals)
var animal = ["dog","cat","mouse"]

//2.布尔字面量 (Boolean literals)
var isTrue = true
var 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.14
var decimals = -.2345789 // -0.23456789
var decimals = -3.12e+12  // -3.12*1012
var 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 "

4.テンプレートリテラル

ES2015 / ES6では、テンプレートリテラルも提供されます。テンプレート文字列は、文字列の作成に役立つ構文糖衣構文を提供します。これは、Perl、Python、Shell、およびその他の言語の文字列補間の機能と非常によく似ています。さらに、テンプレート文字列の前にタグを追加して、テンプレート文字列の解析プロセスをカスタマイズできます。これを使用して、インジェクション攻撃を防止したり、文字列ベースの高度なデータ抽象化を構築したりできます。
次に例を示します。


// String interpolation 字符串插值 使用 `xxx ${插值变量}`
var name = "World"
var str = `Hello ${
      
      name}`
console.log(str)

// Multiline strings
`In JavaScript this is
 not legal.`

3つ、JavaScriptデータ型

JavaScriptは、弱い型の言語または動的言語です。これは、変数の型を事前に宣言する必要がないことを意味します。型は、プログラムの実行中に自動的に決定されます。これは、同じ変数を使用してさまざまなタイプのデータを格納できることも意味します。まず、JavaScriptのデータ型を紹介しましょう。

最新のECMAScript標準では、次の8つのデータ型が定義されています。

1. 7つの基本的なデータ型：

1.ブール値（ブール値）：2つの値（trueとfalse）があります
。2。Null：null値を示す特別なキーワード。JavaScriptでは大文字と小文字が区別されるため、nullはnull、NULL、またはバリアントとは完全に異なります。
3. Undefined：nullのような特別なキーワードです。undefinedは、変数が割り当てられていない場合のプロパティを表します。
4.数値、整数、または浮動小数点数。例：42または3.14159。
5. BigInt（任意精度整数）（ES2020で追加された新しいタイプ）は、大きな整数を安全に格納および操作でき、数値の安全な整数制限を超えることもできます。
6.文字列（文字列）。文字列は、テキスト値を表す文字のシーケンスです。例：「Howdy」。
7.シンボル（ES6 / ES2015で追加された新しいタイプ）。インスタンスは、一意で変更できないデータ型です。

2.参照タイプ：

1.オブジェクト（オブジェクト）、配列（配列）、関数（関数）、配列、関数は一種のオブジェクトです

これらのデータ型は比較的少数ですが、それらを介してプログラムで有用な関数を開発できます。オブジェクトと関数は、この言語の他の2つの基本要素です。オブジェクトは値を格納するための名前付けコンテナーと考えることができ、関数はプログラムが実行できるステップと考えることができます。

4、TypeScriptデータ型

TypeScriptはほぼすべてのJavaScriptデータ型をサポートし、列挙、Any、Void、Neverなどの特定のデータ型もあります。言い換えれば、TypeScriptのデータ型はJavaScriptのスーパーセットです。TypeScriptは、静的な型定義をJavaScriptに追加することによって構築されます。TypeScriptは、TypeScriptコンパイラまたはBabelによってJavaScriptコードに変換されます。これらは、任意のブラウザおよび任意のオペレーティングシステムで実行できます。

1. JavaScriptの7つの基本的なデータ型に加えて、次のものがあります。

1.列挙型（列挙型）：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

2.any：プログラミング段階で型が明確でない変数の型を指定したい場合があります。これらの値は、ユーザー入力やサードパーティのコードライブラリなどの動的コンテンツから取得される場合があります。この場合、タイプチェッカーにこれらの値をチェックさせたくはありませんが、コンパイル段階で直接チェックに合格させます。次に、任意の型を使用してこれらの変数をマークできます。

例：

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

any型は、既存のコードを書き換えるときに非常に便利です。オプションで、コンパイル時に型チェックを含めたり削除したりできます。他の言語と同じように、Objectにも同様の効果があると思うかもしれません。ただし、Object型の変数では、任意の値を割り当てることしかできません-ただし、これらのメソッドがある場合でも、任意のメソッドを呼び出すことはできません：

例：


let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.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

3.ボイド：ボイドタイプは、ある程度、他のタイプの反対に似ています。つまり、タイプがありません。関数が値を返さない場合、通常、その戻り値の型は無効です。

例：


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

4.never：Never typeは、存在しない値のタイプを表します。たとえば、never型は、関数式または矢印関数式の戻り値型であり、常に例外をスローするか、値をまったく返しません。変数は、trueでない場合、never型の場合もあります。保護によって制限されています。
neverタイプは、任意のタイプのサブタイプであり、任意のタイプに割り当てることができます。ただし、neverタイプは、neverのサブタイプであるか、neverタイプに割り当てることができます（never自体を除く）。いずれも決してに割り当てることはできません。

例：


//下面是一些返回never类型的函数：
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    
    
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    
    
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    
    
    while (true) {
    
    
    }
}

5.タプル：タプルタイプを使用すると、要素の数とタイプがわかっている配列を表すことができ、各要素のタイプは同じである必要はありません。たとえば、値が文字列と数値であるタプルのペアを定義できます。

例：


// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

//当访问一个已知索引的元素，会得到正确的类型：
console.log(x[0].substr(1)); // OK
console.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' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型

5、TypeScriptとJavaScriptのデータ型の比較

データの種類	JavaScript	TypeScript	ベーシックタイプ
ヌル	✅	✅	✅
bigint	✅	✅	✅
ストリング	✅	✅	✅
シンボル	✅	✅	✅
ブール値	✅	✅	✅
数	✅	✅	✅
未定義	✅	✅	✅
オブジェクト	✅	✅	❌
アレイ	✅	✅	❌（jsはそうではありません）✅（tsは）
タプル（タプル[]）	❌	✅	✅
列挙型	❌	✅	✅
どれか	❌	✅	✅
ボイド	❌	✅	✅
決して	❌	✅	✅

総括する

上記の例では、JavaScriptとTypeScriptのデータ型、および基本的なデータ型を紹介しています。変数とリテラル、ES6 / ES2015の新機能テンプレートリテラルを簡単に紹介しています。最後に、JavaScriptとTypeScriptのデータ型をまとめた比較表があります。

Typescriptの基本的なタイプとJavascriptとの比較