typescript和javascript

1、TypeScript简介

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集。这意味着 TypeScript 代码最终会编译成纯 JavaScript 代码，可以在任何浏览器或 JavaScript 引擎上运行。TypeScript 添加了静态类型系统以及对 ES6+ 语法的支持，但它并不包括任何运行时库或环境，因此它无法独立运行，必须编译成 JavaScript 代码才能执行。

TypeScript 的主要目标是解决 JavaScript 在开发大型应用程序时可能出现的代码结构混乱的问题。通过添加静态类型，TypeScript 可以在编译阶段捕获许多常见的错误，从而帮助开发者编写更加健壮和可维护的代码。此外，TypeScript 也提供了更好的代码组织和重构工具，使得开发者能够更轻松地管理大型代码库。

2、数据类型

1） 基础类型

TypeScript 支持 JavaScript 的所有基础类型，并增加了几个额外的类型：

• number
• string
• boolean
• symbol
• null
• undefined
• void（表示没有任何类型返回值的函数），空 或 undefined ，严格模式下不能将 null 赋值给 void 类型

let a:void = undefined
//严格模式下，该⾏会有警告：不能将类型“null”分配给类型“void”
let b:void = null

void 常⽤于限制函数返回值

// ⽆警告
function demo1():void{
}
// ⽆警告
function demo2():void{
return
}
// ⽆警告
function demo3():void{
return undefined
}
// 有警告：不能将类型“number”分配给类型“void”
function demo4():void{
return 666
}

• never（表示永远不会返回结果的值的类型 ,任何值都不是，简⾔之就是不能有值， undefined 、 null 、 '' 、 0 都不⾏

①⼏乎不⽤ never 去直接限制变量，因为没有意义，例如：

/* 指定a的类型为never，那就意味着a以后不能存任何的数据了 */
let a: never
// 以下对a的所有赋值都会有警告
a = 1
a = true
a = undefined
a = null

②never ⼀般是 TypeScript 主动推断出来的，例如：

// 指定a的类型为string
let a: string
// 给a设置⼀个值
a = 'hello'
if(typeof a === 'string'){
    a.toUpperCase()
}else{
    console.log(a) // TypeScript会推断出此处的a是never，因为没有任何⼀个值符合此处的
逻辑
}

③never 也可⽤于限制函数的返回值

// 限制demo函数不需要有任何返回值，任何值都不⾏，像undeifned、null都不⾏
function demo():never{
    throw new Error('程序异常退出')
}

• any（任意类型）任意类型，⼀旦将变量类型限制为 any ，那就意味着放弃了对该变量的类型检查，可以赋值给任意类型的变量
• unknown（未知类型，更安全地处理不确定类型的值），适⽤于：开始不知道数据的具体类型，后期才能确定数据的类型

// 设置a的类型为unknown
let a: unknown
//以下对a的赋值，均正常
a = 100
a = false
a = '你好'
// 设置x的数据类型为string
let x: string
x = a //警告：不能将类型“unknown”分配给类型“string”

//若就是想把 a 赋值给 x ，可以⽤以下三种写法：
// 设置a的类型为unknown
let a: unknown
a = 'hello'
//第⼀种⽅式：加类型判断
if(typeof a === 'string'){
x = a
}
//第⼆种⽅式：加断⾔
x = a as string
//第三种⽅式：加断⾔
x = <string>a

//any 后点任何的东⻄都不会报错，⽽ unknown 正好与之相反。
let str1: string = 'hello'
str1.toUpperCase() //⽆警告
let str2: any = 'hello'
str2.toUpperCase() //⽆警告
let str3: unknown = 'hello';
str3.toUpperCase() //警告：“str3”的类型为“未知”
// 使⽤断⾔强制指定str3的类型为string
(str3 as string).toUpperCase() //⽆警告

2） 数组类型

你可以使用 [] 来声明数组类型：

let numbers: number[]; // 数字数组  
let strings: string[]; // 字符串数组

3） 元组类型

元组类型允许你表示一个已知元素数量和类型的数组：

let tuple: [string, number]; // 一个包含字符串和数字的元组  
tuple = ['hello', 42];

4） 枚举类型

枚举类型是一种特殊的类型，它允许你为数值分配有意义的名称：

enum Color {  
  Red,  
  Green,  
  Blue  
}  
let favoriteColor: Color = Color.Green;

5） 对象类型

你可以使用对象字面量来声明对象类型：

let person: { name: string; age: number; };  
person = { name: 'Alice', age: 30 };

或者使用接口（interface）来定义更复杂的对象类型：

interface Person {  
  name: string;  
  age: number;  
}  
let person: Person;  
person = { name: 'Bob', age: 25 };

6） 函数类型

你可以为函数参数和返回值指定类型：

function greet(name: string): string {  
  return `Hello, ${name}!`;  
}

7） 类型别名

你可以使用 type 关键字来定义类型别名：

type Name = string; 
let userName: Name = 'JohnDoe';

8）联合类型和交叉类型

联合类型表示一个值可以是几种类型之一：

let value: string | number;  
value = 'hello'; // 可以是字符串  
value = 42; // 也可以是数字

交叉类型是将多个类型合并为一个类型：

type Combined = { a: number } & { b: string };  
let combined: Combined = { a: 1, b: 'test' };

9）字面量类型

字面量类型允许你将变量限制为特定的值：

let age: 25 | 30 | 35;  
age = 25; // 正确  
age = 30; // 正确  
age = 20; // 错误，因为 20 不是允许的值之一

10） 泛型

泛型允许你在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型参数：

function identity<T>(arg: T): T {  
  return arg;  
}  
  
let output = identity<string>('myString'); // 类型参数是 string  
let numOutput = identity<number>(42); // 类型参数是 number

3、属性修饰符

readonly 只读属性 属性⽆法修改

public 公开的 可以在类、⼦类和对象中修改

protected 受保护的 可以在类、⼦类中修改

private 私有的 可以在类中修改

4、javascript支持的数据类型

•    Number：用于表示数字，包括整数和浮点数。JavaScript 中所有的数字都是以 64 位浮点数形式存储的，即使它们表现为整数。

let num = 42;  
let floatNum = 3.14;

• String：用于表示文本或字符序列。字符串是 Unicode 字符序列，可以用单引号或双引号表示。

let str = "Hello, World!"; 
let anotherStr = 'This is a string';

• Boolean：逻辑数据类型，有两个值：true 和 false。

let isTrue = true;  
let isFalse = false;

• Null：有一个值 null，表示一个空值或者“无”的值。null 是 Object 类型的特殊值，表示一个空对象引用。

let nothing = null;

• Undefined：当一个变量被声明了，但没有赋值时，它的值就是 undefined。undefined 是一个类型，只有一个值，即 undefined。

let undeclared;  
console.log(undeclared); // 输出 undefined

• Object：JavaScript 中的对象是一种复杂的数据类型，用于存储多个值作为属性。数组、函数等也都是对象。

let obj = {  
  name: "John",  
  age: 30  
};  
  
let arr = [1, 2, 3]; // 数组也是对象的一种  
  
function myFunction() {} // 函数也是对象

• Symbol（ES6 引入）：表示唯一的、不可变的数据类型，通常用作对象的属性键。

let sym = Symbol('mySymbol');

• BigInt（ES10 引入）：可以表示任意大的整数。当数值过 Number.MAX_SAFE_INTEGER 或小于 Number.MIN_SAFE_INTEGER 时，可以使用 BigInt。

let bigIntNum = BigInt("9007199254740991");

需要注意的是，虽然数组和函数在技术上也是对象，但它们在 JavaScript 中有特殊的用途和语法，通常被单独分类讨论。

当你使用 typeof 运算符时，它可以帮助你确定一个变量的类型。例如：

console.log(typeof 42); // 输出 "number" 
console.log(typeof "hello"); // 输出 "string"  
console.log(typeof true); // 输出 "boolean"  
console.log(typeof null); // 输出 "object" （这是一个历史上的错误，null 实际上是 null 类型）  
console.log(typeof undefined); // 输出 "undefined"  
console.log(typeof {}); // 输出 "object"  
console.log(typeof []); // 输出 "object"  
console.log(typeof Symbol('sym')); // 输出 "symbol"  
console.log(typeof BigInt("12345678901234567890")); // 输出 "bigint"

5、var、let、const的比较

let、var 和 const 都是 JavaScript 中用于声明变量的关键字，但它们之间存在一些重要的差异。这些差异主要体现在作用域、重复声明、变量提升（hoisting）以及变量的可变性（mutability）等方面。

var

var 是 JavaScript 中最早用于声明变量的关键字。

• 作用域：var 声明的是函数作用域变量，而不是块级作用域变量。这意味着在函数内部声明的 var 变量在整个函数内部都是可见的，包括在嵌套块或条件语句中。
• 变量提升：var 声明的变量会发生变量提升，即变量声明会被移动到其所在作用域的最顶部。但是，变量的赋值不会提升。
• 重复声明：在同一个作用域内，可以使用 var 多次声明同一个变量，而不会报错，但这样做通常是不推荐的。

let

let 是 ES6（ECMAScript 2015）中引入的变量声明方式。

• 作用域：let 声明的是块级作用域变量，只在声明它的代码块（如 {} 内部）内有效。
• 变量提升：let 声明的变量虽然也会发生提升，但不会初始化，访问一个声明了但未赋值的 let 变量会抛出 ReferenceError。
• 重复声明：在同一个作用域或块内，不能使用 let 重复声明同一个变量。

const

const 也是 ES6 中引入的，用于声明常量。

• 作用域：const 的作用域与 let 相同，都是块级作用域。
• 不可变性：const 声明的变量不能被重新赋值，即它们指向的内存地址不能改变。但是，如果 const 变量是一个对象或数组，那么对象或数组的内容是可以被修改的，因为 const 只是保证变量名指向的内存地址不变，不保证内存地址中的内容不变。
• 重复声明：和 let 一样，const 也禁止在同一个作用域或块内重复声明同一个变量。

示例

// 使用 var  
function varExample() {  
    if (true) {  
        var x = 10;  
    }  
    console.log(x); // 输出 10，因为 x 在函数作用域内  
}  
  
// 使用 let  
function letExample() {  
    if (true) {  
        let y = 20;  
    }  
    console.log(y); // 抛出 ReferenceError，因为 y 在 if 块作用域外不可见  
}  
  
// 使用 const  
function constExample() {  
    const z = 30;  
    z = 40; // 抛出 TypeError，因为 z 是常量，不能被重新赋值  
}  
  
// 尝试重复声明  
function redeclarationExample() {  
    let a = 1;  
    let a = 2; // 抛出 SyntaxError，因为 a 已经被声明过了  
  
    const b = 3;  
    const b = 4; // 同样会抛出 SyntaxError  
}