10分钟学会TS

背景

TypeScript 是由 Microsoft(微软) 开发的开源编程语言，它是 JavaScript 的一个超集，这意味着任何有效的 JavaScript 代码都是有效的 TypeScript 代码。然而，TypeScript 增加了许多额外的特性，包括类型注解和编译时类型检查，这使得开发者能够编写更清晰、更健壮的代码。

和Javascript 的关系

• TS 是JS 的扩展
• TS 是JS 的超集
• TS 最终会被编译成JS代码，在浏览器中执行（目前没有任何环境支持运行原生的ts）
  • ts官方推荐了ts转成js的编译器，tsconfig.json文件就是配置编译文件

现在已经有反TS的声音出现了

主要区别：

1. 类型系统：

   • JavaScript：是一种弱类型或动态类型语言，变量类型在运行时确定，这可能导致一些错误在运行时才能被发现。
   • TypeScript：通过引入类型系统，成为了一种强类型或静态类型语言。它允许在编写代码时指定变量的类型，从而在编译阶段就能发现类型错误，减少运行时错误。

2. 编译与执行：

   • JavaScript：通常是边解释边执行，代码直接由JavaScript引擎执行。
   • TypeScript：需要先编译成JavaScript代码，然后再由JavaScript引擎执行。这一编译过程可以在开发过程中帮助开发者发现和修正错误。

3. 功能扩展：

   • TypeScript：在JavaScript的基础上增加了许多新特性，如类型注解、接口、枚举、泛型、模块等，这些特性使得TypeScript在大型项目中更加易于维护、扩展和团队协作。

4. 兼容性与生态：

   • JavaScript：拥有广泛的浏览器支持和丰富的生态系统，几乎所有的现代浏览器都支持JavaScript。
   • TypeScript：虽然最终需要编译成JavaScript才能在浏览器中运行，但它可以编译成不同版本的JavaScript（如ES5、ES6等），以兼容不同的运行环境。同时，TypeScript也拥有庞大的社区支持和丰富的第三方库。

优缺点

优点：

1. 类型安全：TypeScript 提供了类型注解和编译时类型检查功能，这有助于在开发过程中捕获潜在的类型错误，减少运行时错误的发生。
2. 更好的代码质量和可维护性：通过强制代码遵循一定的类型规范，TypeScript 促进了更清晰的代码结构和更好的代码组织。这有助于团队成员之间的协作，并提高代码的长期可维护性。
3. 大型项目的理想选择：对于大型项目来说，TypeScript 的类型系统可以显著提高代码质量和开发效率。它允许开发者在编写代码时就能够发现潜在的问题，而不是等到运行时才暴露出来。
4. 更好的自动补全和重构支持：由于 TypeScript 提供了丰富的类型信息，许多现代的开发工具和编辑器（如 Visual Studio Code）能够提供更智能的代码补全和重构支持，从而提高开发效率。
5. 与 JavaScript 无缝兼容：TypeScript 是 JavaScript 的超集，这意味着现有的 JavaScript 代码可以很容易地迁移到 TypeScript 中，而无需进行大量的修改。
6. 丰富的生态系统和社区支持：TypeScript 拥有一个活跃的社区和丰富的生态系统，包括大量的库、框架和工具，这些都可以与 TypeScript 无缝集成，为开发者提供更多的选择和便利。

缺点：

1. 学习曲线：对于习惯了纯 JavaScript 开发的开发者来说，TypeScript 引入的类型系统和语法特性可能会带来一定的学习成本。
2. 编译时间：虽然 TypeScript 的编译速度通常很快，但在大型项目中，编译时间可能会成为一个关注点。不过，随着 TypeScript 编译器的不断优化，这个问题正在逐渐得到改善。
3. 额外的配置：与纯 JavaScript 项目相比，TypeScript 项目可能需要更多的配置工作，包括设置 TypeScript 编译器选项、类型定义文件（.d.ts）等。不过，这些配置工作通常只需要在项目初期进行，并且可以通过社区提供的工具和模板来简化。
4. 与现有 JavaScript 库的集成：虽然 TypeScript 旨在与现有的 JavaScript 代码和库无缝集成，但在某些情况下，可能需要额外的类型定义文件（.d.ts）来确保 TypeScript 能够正确地理解和使用这些库。幸运的是，许多流行的 JavaScript 库和框架都提供了官方的或社区维护的类型定义文件。
5. 性能考虑：虽然 TypeScript 在编译时会进行类型检查，但这并不会影响最终生成的 JavaScript 代码的性能。然而，开发者需要确保在编写 TypeScript 代码时不会引入不必要的性能开销，比如过度使用复杂的类型注解或类型守卫。

没有任何环境支持运行原生的ts,ts官方推荐了ts转成js的编译器，tsconfig.json文件就是配置编译文件

使用场景

TypeScript 特别适用大型项目，这些项目需要更好的代码质量和可维护性。由于 TypeScript 提供了类型检查和编译时反馈，它可以帮助开发者避免许多常见的错误，并在代码库增长时保持代码的质量。此外，TypeScript 还与现有的 JavaScript 代码和库无缝兼容，这使得它很容易集成到现有的项目中。

安装过程

npm install -g typescript

tsc -v

特性

常用操作方式：

1. 类型推断

2. 类型注解

let str:string; 
str=12 

3. 类型断言(人工干预)

⚠️请谨慎使用！

let numArr = [1,2,3];
let result1 = numArr.find(item=>item>2) as number;
result1 * 5;

基础类型和联合类型

let v1:string = '123';
let v2:number = 10;
let v3:boolean = true;
let nu:null = null;
let un:undefined = undefined;
let v4:string|undefined = '123';   
let v5:1|2|3 = 3;

复杂数据类型

数组、元组、枚举

数组

元组

let t1:[number,string,number?] = [1,'ss',3]

枚举

• 数字枚举
• 字符串枚举
• 手动赋值枚举
• 异构枚举
• 枚举成员类型和计算值
• 枚举成员的反向映射

数字枚举

enum Direction {  
    Up,  
    Down,  
    Left,  
    Right  
}  
  
console.log(Direction.Up); 
console.log(Direction.Down); 
console.log(Direction.Left); 
console.log(Direction.Right); 

字符串枚举

enum Message {  
    Success = "恭喜你，操作成功！",  
    Fail = "很遗憾，操作失败。"  
}  
  
console.log(Message.Success); 
console.log(Message.Fail); 

手动赋值

enum Color {  
    Red = 1,  
    Green = 2,  
    Blue = 4  
}  
  
console.log(Color.Red); 
console.log(Color.Green); 
console.log(Color.Blue); 

异构枚举

虽然TypeScript允许枚举成员的值是数字或字符串的混合，但不建议这样做，因为这会带来一些复杂性和限制。比如，你不能在一个异构枚举上进行反向映射（即，你不能从枚举的值得到枚举的成员名）。

枚举成员类型和计算值

枚举成员可以有一个类型注解，并且枚举成员的值可以是一个计算值。但是，计算值必须是一个常量表达式。

enum FileAccess {  
    
    None,  
    Read    = 1 << 1,  
    Write   = 1 << 2,  
    ReadWrite  = Read | Write,  
    
    G = "123".length  
}  
  
console.log(FileAccess.Read); 
console.log(FileAccess.ReadWrite); 
console.log(FileAccess.G); 

枚举成员的反向映射

TypeScript还会为枚举成员生成反向映射，即从枚举值到枚举名的映射。这意味着你可以通过枚举值来访问枚举成员的名字。

enum Direction {  
    Up = "UP",  
    Down = "DOWN",  
    Left = "LEFT",  
    Right = "RIGHT"  
}  
  
function printDirection(dir: string) {  
    if (dir in Direction) {  
        console.log(`The direction is ${Direction[dir]}`);  
    } else {  
        console.log("Unknown direction");  
    }  
}  
  
printDirection("UP"); 
printDirection("RIGHT"); 
printDirection("FORWARD"); 

函数

函数没有返回值的时候，默认返回undefined，此时可以使用void

fucntion sort():void{
    console.log('xxx')
}


function add(a:number,b:number, c?:boolean, ...rest:number[]):number{
    console.log(a,b,c,rest);
    return a+b
}
const f = add(2,3,true,9999,5555)

接口

对象的定义

enum Color { 
    red,
    green,
    pink
}
interface userInfo{
    name:string,  
    age:number, 
    sex:string,
    student:boolean,
    school: null,
    address:string | undefined,  
    color:Color
}
function getUseInfo():userInfo{
    return {
        name:"jun",
        age:53,
        sex:"男",
        student:false,
        school:null,
        address:undefined,
        color:1
    }
}

泛型

名称可以是T 也可以是其他字母，所有T的地方填充一致的类型

function myFn(a:T,b:T):T[]{
    return [a,b]
}
myFn<number>(1,2);
myFn<string>('a','b');

面试题

微软开发的开源编程语言，是JS 的超集，旨在解决JavaScript在开发大型应用时面临的可维护性和可扩展性问题。JS 是弱语言类型，TS 添加了类型检查，可以在JS 编译时就检查出错误，相对于JS有更强的可读性和维护性。但目前原生环境不支持TS，所以TS需要通过编译器编译成浏览器可以识别的JS，但是现在TS的社区和生态都非常丰富了，可以做到和JS无缝衔接，提高了开发效率和代码质量

关键词：JS 超集、类型检查、编译时检查、提高代码质量、可读性、易于集成、原生不支持、需编译成JS，

和JS可以共存，允许逐步进行JS迁移，代码质量变高， 可读性和可维护性提高，提供更好的性能，编译期间就可以检查出错误，生态社区强大完整，IDE支持，提供了丰富的工具和编辑器集成

• 什么是TypeScript中的接口（Interface）？

在TypeScript中，接口用来定义对象，即对象应该具有哪些属性和方法。接口可以被类或其他接口实现（满足），从而确保对象的一致性。

• TypeScript中的基本类型有哪些？

字符串，数字，布尔，undefined,null, 数组，元组，枚举，any，void，never

• TypeScript中的泛型（Generics）是什么？

泛型是ts提供的一种强大的工具， 允许你在定义函数、接口、类的时候不预先指定具体的类型，而在使用的时候再指定具体的类型。这样做的好处是提高了代码的复用性和灵活性。

• TypeScript如何与JavaScript互操作？

TS 会通过TS编译器，生成浏览器和nodejs环境可以运行的js代码。

你可以通过命令行使用 TypeScript 编译器，也可以通过集成开发环境（IDE）或代码编辑器中的插件来使用它。大多数现代 IDE 和编辑器都提供了对 TypeScript 的内置支持，它们通常会在你编写代码时实时显示编译错误和警告，从而提供即时反馈。

• TypeScript中的装饰器（Decorators)

装饰器是实验性特性，并且需要 TypeScript 配置文件的 "experimentalDecorators": true 选项来启用。