> 웹 프론트엔드 > JS 튜토리얼 > Typescript 기본 유형 및 Javascript와의 비교

Typescript 기본 유형 및 Javascript와의 비교

coldplay.xixi
풀어 주다: 2021-02-12 09:26:28
앞으로
3403명이 탐색했습니다.

TypeScript 데이터 유형 및 JavaScript

Typescript 기본 유형 및 Javascript와의 비교

무료 학습 권장 사항: javascript 비디오 튜토리얼

Article 디렉토리

  • TypeScript 데이터 유형 및 비교 JavaScript 비교
  • 소개
  • 1. 데이터 유형과 기본 데이터 유형
  • 2. 기본 데이터 유형
    • 4. 리터럴과 변수
    • 1. 리터럴
    • 2. 변수
    3. 인스턴스
  • 4. 템플릿 리터럴
    • 3. JavaScript 데이터 유형
    • 4. TypeScript 데이터 유형
    • 5.
    • 요약
  • 소개
  • 이 글에서는 TypeScript의 데이터 유형과 JavaScript의 데이터 유형에 대해 간략하게 소개합니다. 데이터 유형과 어떤 관련이 있습니까? TypeScript 데이터 유형과 JavaScript 데이터 유형을 비교하는 비교표를 나열합니다.

팁: 다음은 이 글의 내용이며, 아래의 경우는 참고용입니다

1 데이터 유형 및 기본 데이터 유형


1 데이터 유형

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

2. 기본 데이터 유형

기본 유형(기본값, 기본 데이터 유형)은 객체도 메소드도 아닌 데이터입니다(단, JavaScript에는 객체를 감싸는 기본 유형이 있고 객체에도 메소드가 있습니다. 예를 들어, 기본 데이터 유형인 number의 래퍼 개체인 Number는 숫자 값을 처리할 수 있는 캡슐화된 개체입니다. 대부분의 경우 기본 유형은 가장 낮은 수준의 언어 구현을 직접 나타냅니다. 모든 기본 유형의 값은 변경할 수 없습니다. 하지만 주목해야 할 점은 기본 타입 자체와 기본 타입에 할당된 변수의 차이이다. 변수에는 새로운 값이 할당되며 배열, 객체, 함수처럼 원래 값을 변경할 수 없습니다.

3. 둘 사이의 관계

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

4. 예시

JavaScript 기본 데이터 유형의 값은 변경할 수 없습니다. 다음은 예시입니다.

// 使用字符串方法不会改变一个字符串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"]
로그인 후 복사

2. 리터럴 및 변수

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 = 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 "
로그인 후 복사

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.七种基本数据类型:

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
로그인 후 복사

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

例子:

//anylet 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 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
로그인 후 복사

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

例子:

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

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) {
    }}
로그인 후 복사

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)类型
로그인 후 복사

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

✅✅Object✅❌Array✅❌ (js는 아님) ✅ (ts는)tuple(tuple[]) ✅✅enum✅✅any✅✅ void✅✅ never✅✅관련 무료 학습 권장 사항: (동영상)
데이터형 JavaScript TypeScript 기본형인가요
null
bigint
string
symbol
boolean ㅋㅋㅋ
Summary 위의 예에서는 JavaScript와 TypeScript의 데이터 유형을 소개합니다. 기본 데이터 유형은 무엇입니까? 변수 및 리터럴에 대한 간략한 소개, ES6/ES2015 새로운 기능 템플릿 리터럴, 마지막으로 JavaScript 및 TypeScript 데이터 유형을 요약한 비교표가 있습니다.
javascript

위 내용은 Typescript 기본 유형 및 Javascript와의 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿