TypeScript+Vue3.0X集成开发

 

TypeScript 中文手册 - TypeScript 中文手册 (bootcss.com)

 技术选型：

TypeScript及TypeScript在vue3.0项目中的基本使用_vue3 typescript_Jeasu_0908的博客-CSDN博客

一、 TypeScript是什么

TypeScript 是一种由微软开发的自由开源的编程语言，主要提供了类型系统和对 ES6的支持。它是JavaScript的一个超集，扩展了JavaScript的 语法，因此现有的 JavaScript 代码可与TypeScript 一起工作无需任何修改。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript可以运行在任何浏览器上。 TypeScript 是 Angular2、vue3的开发语言
 

三、 为什么要用TypeScript

（一）类型检查，语法提示

在TS中允许你为变量指定类型。当你给已定义类型的变量赋值的时候，值的类型不对，便会有错误提示

（二）约束类型，减少不必要的代码逻辑

（三）代码重构

Typescript 支持类型最大的好处是可读性。 类型可以给开发者更多的信息，是最有价值的文档。类型很好的体现了代码即文档这一思想。

四、 TypeScript开发的使用建议

是否使用ts来开发项目？或者说ts有必要吗？----- 根据开发场景，怎么方便怎么来

开发条件：

大型项目，代码量较多
进行封装，组件化开发的时候（有一定开发基础）
开发团队中至少一半的成员对ts要有基本的了解，至少有一个成员对ts相关知识点很熟悉
影响：

对前端来说，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等可能不是很熟悉的知识点，有一定的学习成本。
 

ty的作用：

1. 基本类型的介绍与适用场景

2. 交叉和联合类型

3. 类型检查机制：推断、断言、保护和守卫

4. 全局类型、类型引入、类型重写、类型合并（interface 和 type 的区别）

1  TpoeScript包安装   引入

安装

npm install -g typescript

验证是否安装成功 ：tsc -v（查看typescript的版本）

2.TypeScript安装和运行_typescript怎么运行_艾迪蛋·的博客-CSDN博客

2 关键字 类型

TypeScript及TypeScript在vue3.0项目中的基本使用_vue3 typescript_Jeasu_0908的博客-CSDN博客

基础类型:

字符串类型 string

布尔类型 boolean

数字类型 number

任意值类型 any

枚举类型 enum

数组类型 array

联合类型  一个变量定义可能的多种类型

元组类型 Tuple

Void类型

Null 和Undefined

Never 类型

Object 类型

（二） 类型断言

类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。

//类型断言有两种形式。 其一是“尖括号”语法：
let someValue: any = "this is a string";  
let strLength: number = (someValue).length;

另一个为 as 语法：
let someValue: any = "this is a string";  
let strLength: number = (someValue as string).length;

（三） 类型别名 type

TypeScript及TypeScript在vue3.0项目中的基本使用_vue3 typescript_Jeasu_0908的博客-CSDN博客

（四） 对象类型（

（五） 函数类型

函数类型的定义有两点：参数类型、返回值类型

（六） 接口 Interfaces

（七）泛型 Generics

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
写法是 <变量类型>

（八）Class类

数组类型  「类型 + 方括号」表示法

let arr: number[] = [1,2,3];

数组泛型

类型推论

类数组（不是数组类型）

any 数组任意类型

类型断言 as

重载

 

typeScript 学习总结（基础篇）_DiuDiu_yang的博客-CSDN博客

原始数据类型（Primitive data types）

原始数据类型：布尔值（boolean）/数值（number）/字符串（string）/null/undefined/ES6中的Symbol类型
定义类型语法：

let varName: type = [对应类型的赋值]； //也可单独赋值   

布尔值（使用boolean定义类型）

let createByNewBoolean: boolean = new Boolean(1);

 PS：使用构造函数Boolean创造的对象不是布尔值而是一个Boolean对象。 注意ts:167:5-error

let createByNewBoolean: Boolean = new Boolean(1);

数值类型（number）

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

编译结果：

var decLiteral = 6;
var hexLiteral = 0xf00d;
// ES6 中的二进制表示法
var binaryLiteral = 10;
// ES6 中的八进制表示法
var octalLiteral = 484;
var notANumber = NaN;
var infinityNumber = Infinity;

 

4  type 与  interface 的区别

TypeScript之interface与type_田小田、的博客-CSDN博客

interface - 接口-

用interface来描述对象数据的类型（常用于给对象的属性和方法添加类型约束）

type 注解对象类型

在TS中对于对象数据的类型注解，除了使用interface之外还可以使用类型别名来进行注解，作用相似

interface 与 type 对比

相同点

1. 都能描述对象类型
2. 都能实现继承，interface使用extends, type配合交叉类型

不同点

1. type除了能描述对象还可以用来自定义其他类型
2. 同名的interface会合并（属性取并集，不能出现类型冲突）
3. 同名 type 会报错

注解对象类型的场景下非常相似，推荐大家使用type, type 更加灵活

5  vue3.0+ts

1 在项目中安装

yarn  add tpyescript --dev

在全局安装：

npm i -g ts-node

 

2 新建 tsconfig.json文件   ts编译的根目录

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "noLib": false,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "strictFunctionTypes": false,
    "jsx": "preserve",
    "baseUrl": ".",
    "allowJs": true,
    "sourceMap": false,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "experimentalDecorators": true,
    "lib": ["dom", "esnext"],
    "noImplicitAny": false,
    "skipLibCheck": true,
    "removeComments": true,
    "types": ["webpack-env", "unplugin-vue-define-options"],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "mock/**/*",
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts",
    "types/**/*.ts"
  ],
  "exclude": ["node_modules", "dist", "**/*.js", "**/*.md", "src/**/*.md"]
}

 3  新建index.ts  

运行 

ts-node index.ts,