TypeScript 데이터 유형 및 JavaScript와 비교

기사 디렉토리

TypeScript 데이터 유형 및 JavaScript와 비교
소개
하나, 데이터 유형 및 기본 데이터 유형
둘째, 리터럴과 변수
세 가지, JavaScript 데이터 유형
네, TypeScript 데이터 유형
Five, TypeScript 및 JavaScript 데이터 유형 비교
요약하자면

소개

이 기사에서는 TypeScript의 데이터 유형과 JavaScript의 데이터 유형을 간략하게 소개합니다. 기본 데이터 유형은 무엇입니까? 데이터 유형과의 관계? TypeScript의 데이터 유형과 JavaScript의 데이터 유형을 비교하기위한 비교 테이블을 나열합니다.

팁 : 다음은이 기사의 내용이며 다음 사례는 참고 용입니다.

하나, 데이터 유형 및 기본 데이터 유형

1. 데이터 유형

데이터 유형은 실제로 프로그래밍 언어의 기본 제공 데이터 구조입니다. 다양한 프로그래밍 언어에는 각각 고유 한 특성을 가진 자체 기본 제공 데이터 구조가 있습니다. 다른 데이터 구조를 구축하는 데 사용됩니다.

2. 기본 데이터 유형

기본 유형 (기본 값, 기본 데이터 유형)은 객체도 메소드도 아닌 데이터의 일종입니다 (그러나 JavaScript에는 객체이자 메소드 인 기본 유형의 패키징 객체가 있습니다. 예를 들어, 패키징 객체) 기본 데이터 유형 번호의 번호는 캡슐화되어 있습니다. 숫자 값 개체를 다룰 수 있습니다. 대부분의 경우 기본 유형은 가장 낮은 수준의 언어 구현을 직접 나타냅니다. 모든 기본 유형의 값은 변경할 수 없습니다. 그러나 기본 유형 자체와 기본 유형에 할당 된 변수의 차이점에 유의해야합니다. 변수에는 새 값이 할당되며 원래 값은 배열, 객체 및 함수처럼 변경할 수 없습니다.

3. 둘 사이의 관계

이들 간의 관계는 데이터 유형이 기본 데이터 유형의 상위 집합이라는 것입니다.

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. 예

자바 스크립트 리터럴 할당 변수의 예 :


//变量
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.`

세 가지, JavaScript 데이터 유형

JavaScript는 약한 형식 또는 동적 언어입니다. 즉, 변수의 유형을 미리 선언 할 필요가 없으며 프로그램이 실행되는 동안 유형이 자동으로 결정됩니다. 이것은 또한 동일한 변수를 사용하여 다른 유형의 데이터를 저장할 수 있음을 의미합니다. 먼저 JavaScript의 데이터 유형을 소개하겠습니다.

최신 ECMAScript 표준은 8 가지 데이터 유형을 정의합니다.

1. 7 가지 기본 데이터 유형 :

1. Boolean (Boolean 값) : 두 가지 값 (true 및 false)이 있습니다 ..
2. Null : null 값을 나타내는 특수 키워드. JavaScript는 대소 문자를 구분하므로 null은 null, NULL 또는 변형과 완전히 다릅니다.
3. Undefined : null과 같은 특수 키워드이며, undefined는 변수가 할당되지 않은 경우 속성을 나타냅니다.
4. 숫자, 정수 또는 부동 소수점 숫자 (예 : 42 또는 3.14159).
5. BigInt (임의 정밀도 정수) (ES2020에 추가 된 새로운 유형)는 큰 정수를 안전하게 저장하고 조작 할 수 있으며 숫자의 안전한 정수 제한을 초과 할 수도 있습니다.
6. 문자열 (문자열), 문자열은 텍스트 값을 나타내는 일련의 문자입니다 (예 : "Howdy").
7. Symbol (ES6 / ES2015에 추가 된 새로운 유형). 인스턴스는 고유하고 변경할 수없는 데이터 유형입니다.

2. 참조 유형 :

1. 객체 (Object), 배열 (Array), 함수 (Function), 배열, 함수는 일종의 객체입니다.

이러한 데이터 유형은 비교적 적지 만이를 통해 프로그램에서 유용한 기능을 개발할 수 있습니다. 객체와 함수는이 언어의 다른 두 가지 기본 요소입니다. 객체를 값을 저장하기위한 이름 지정 컨테이너로 생각하고 함수를 프로그램이 실행할 수있는 단계로 생각할 수 있습니다.

네, TypeScript 데이터 유형

TypeScript는 거의 모든 JavaScript 데이터 유형을 지원하며 열거, Any, Void, Never 등과 같은 특정 데이터 유형도 있습니다. 즉, TypeScript의 데이터 유형은 JavaScript의 상위 집합입니다. TypeScript는 JavaScript에 정적 유형 정의를 추가하여 빌드됩니다. TypeScript는 모든 브라우저 및 운영 체제에서 실행할 수있는 TypeScript 컴파일러 또는 Babel에 의해 JavaScript 코드로 변환됩니다.

1. JavaScript의 7 가지 기본 데이터 유형 외에 다음이 있습니다.

1. enum (enumeration ) : 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 유형을 사용하여 이러한 변수를 표시 할 수 있습니다.

예:

//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. 보이드 : 어느 정도 보이드 타입은 any 타입과 반대되는 형태로 타입이 없음을 의미합니다. 함수가 값을 반환하지 않으면 일반적으로 반환 값 유형이 void 인 것을 볼 수 있습니다.

예:


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的函数必须存在无法达到的终点
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)类型

Five, TypeScript 및 JavaScript 데이터 유형 비교

데이터 유형	자바 스크립트	TypeScript	기본 유형
없는	✅	✅	✅
Bigint	✅	✅	✅
끈	✅	✅	✅
상징	✅	✅	✅
부울	✅	✅	✅
번호	✅	✅	✅
찾으시는 주소가 없습니다	✅	✅	✅
목적	✅	✅	❌
정렬	✅	✅	❌ (js는 아닙니다) ✅ (ts is)
튜플 (tuple [])	❌	✅	✅
열거 형	❌	✅	✅
어떤	❌	✅	✅
빈	❌	✅	✅
못	❌	✅	✅

요약하자면

위의 예에서는 JavaScript 및 TypeScript의 데이터 유형과 기본 데이터 유형이 무엇인지 소개합니다. 변수 및 리터럴, ES6 / ES2015 새 기능 템플릿 리터럴을 간략하게 소개합니다. 마지막으로 JavaScript 및 TypeScript 데이터 유형을 요약 한 비교 테이블이 있습니다.

Typescript 기본 유형 및 Javascript와의 비교