本文详细介绍了TypeScript的基础知识，包括它的作用、编译运行过程，以及TypeScript的基础语法，如模块、函数、变量、类型系统等。讲解了Any类型、Undefined、Never类型、变量声明、类型断言、接口、类和面向对象的概念。此外，还提到了TypeScript的错误解决方案和模块系统，帮助开发者更好地理解和使用TypeScript进行大型项目开发。
TS基础介绍
介绍
- 微软开发
- 开源编程语言
- 遵循es6,es5规范，Ts扩展JS,是超集js
- 更像后端语言，用于开发大型企业项目
- vue,react集成TS
作用
设计目的是解决了JS痛点：
6. 弱类型没有命名空间，导致很难模块化
7. 不适合开发大型程序
8. 提供一些语法糖，方便实践面向对象的编程（类，接口，枚举，泛型，方法重载）
编译运行
- npm install -g typescript
- 手动：tsc *.js
- 自动：配合vscode watch监听具有tsconfig.json
tsc -- init tsconfig.json里面修改输出路劲
TypeScript基础语法
TypeScript程序由以下部分组成：
- 模块
- 函数
- 变量
- 语句和表达式
- 注释
tsc常用编译参数
| 参数 | 参数说明 |
|---|---|
| –help | 显示帮助信息 |
| –module | 载入扩展模块 |
| –target | 设置ECMA版本 |
| –declaration | 额外生成一个.d.ts扩展名的文件（会生成两个文件.d.ts和.js） |
| –removeComments | 删除文件的注释 |
| –out | 编译多个文件并合并到一个输出文件 |
| –sourcemap | 生成一个sourcemap(.map)文件。sourcemap是一个存储源代码和编译代码对应闻之映射的信息文件。 |
| –module nolmplicitAny | 在表达式和声明上有隐含的any类型时报错 |
| –watch | 在监视模式下运行编译器。会监视输出文件，在他们改变时重新编译。 |
| ##TypeScript保留关键字 | |
 |
语法
- 空白和换行
TS会忽略程序中出现的空格、制表符和换行符（用来缩进代码）。 - TypeScript区分大小写字符
- 分号可选
写在同一行一定要使用分号来分隔，否则会报错（每行指令都是一段语句）。 - 注释
单行注释//；多行注释/* */
TypeScript和面向对象
TS是一种面向对象的编程语言。
面向对象主要有两个概念：对象和类。
- 对象：对象是类的一个实例，有状态和行为。
- 类：类是一个模板，描述一系列对象的行为和状态。
- 方法：方法是类的操作的实现步骤。
基础类型
| 数据类型 | 关键字 | 描述 |
|---|---|---|
| 任意类型 | any | 声明为any的变量可以赋予任意类型的值。 |
| 数字类型 | number | 双精度64位浮点值。可以表示整数和分数，进制数。 |
| 字符串类型 | string | ‘和“表示字符串类型。`定义多行文本和内嵌表达式。 |
| 布尔类型 | boolean | true和false |
| 数组类型 | 无 | 声明变量是数组。number[]或Array<number> |
| 元组 | 无 | 用来表示已知元素的数量和类型的数组。各元素类型不必相同，对应位置类型需相同。 |
| 枚举 | enum | 枚举类型用于定义数值集合。enum Color {Red, Green, Blue};let c: Color = Color.Blue;console.log(c); // 输出 2？？ |
| void | void | 用于标识方法返回值的类型，表示该方法没有返回值 。 |
| null | null | 空值 |
| undefined | undefined | 未定义的值 |
| never | never | never是其他类型（包括null和undefined）的子类型，代表从不会出现的值。 |
Any类型
任意值是TS针对编程时类型不明确的变量使用的数据类型，常用于以下情况：
- 变量的值会动态改变，如用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查。
- 改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查。？？
let x: any = 4;
x.ifItExists(); // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed(); // 正确
- 定义存储各种类型数据的数组。
let arr: any[]=[1,false,'']
undefined
null和undefined是其他类型（包括void）的子类型，可以赋值给其他类型，赋值后的类型会编程null和undefined.而TS中启用严格的空校验（–strictNuilChecks）特性，就可以使得null和undefined只能被赋值给或本身对应的类型。启用 --strictNullChecks；let x: number | null | undefined;联合类型
never类型
never是其他类型 （包括null和undefined）的子类型，代表从不会出现的值。never类型的变量只能被never类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（无线循环）。
let x: never;
let y: number;
// 运行错误，数字类型不能转为 never 类型
x = 123;
// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();
// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();
// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
throw new Error(message);
}
// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
while (true) {}
}
TypeScript变量声明
变量是一种使用方便的占位符，用于引用计算机地址。可以把变量看作存储数据的容器。
TS变量命名规则：
- 变量名可以包含数字和字母。
- 除了下划线 _和美元$符号外，不能包含其他特殊字符，包括空格。
- 不能以数字开头。
//声明变量的类型及初始值：
var uname:string = "Runoob";
//声明变量的类型，无初始值，变量值 会设置为undefined
var uname:string;
//声明变量并赋初始值，不设类型，可以是任意类型：
var uname = "Runoob";
//声明变量不设类型和初始值，可以是任意类型，默认初始值为undefined
var uname;
注意：变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。
TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误。
类型断言
它之所以不被称为类型转换，是因为转换通常意味着某种运行时的支持。但类型断言纯粹是一个编译时语法，它也是一种为编译器提供关于如何分析代码的方法。
###类型推断
当类型没有给出时，TS编译器利用类型推断来推断类型。（类型一旦被推断，后面再次赋值其他类型时，会编译错误）
如果由于缺乏声明而不能推断出类型，则类型被默认动态any类型。
变量作用域
- 全局作用域
- 类作用域：这个变量也可以叫做字段.类变量声明在类中，类方法之外。可以通过类的对象来访问变量。类变量也可以是静态的，可以直接通过类名访问。
- 局部作用域
var global_num = 12 // 全局变量
class Numbers {
num_val = 13; // 实例变量
static sval = 10; // 静态变量
storeNum():void {
var local_num = 14; // 局部变量
}
}
console.log("全局变量为: "+global_num)
console.log(Numbers.sval) // 静态变量
var obj = new Numbers();
console.log("实例变量: "+obj.num_val)
TypeScript运算符
TypeScript条件语句
TypeScript循环
同JS类似
TypeScript函数
可选参数、默认参数和剩余参数
- 可选参数
在TS函数中，若定义了参数，就必须传入这些参数，除非将参数设置为可选，可选参数使用？标识。function buildName(firstName: string, lastName?: string)
可选参数必须跟在必须参数后。若都是可选参数就不做要求。 - 默认参数
可以设置参数的默认值，这样在调用函数的时候，若不传入该参数的值，则使用默认参数function discount(price:number,rate:number = 0.50)。
编译后的js将在内部if (rate === void 0) { rate = 0.50; }判断rate的取值。 - 剩余参数
当不确定要向函数传入多少个参数，剩余参数允许将一个不确定数量的参数作为一个数组传入。
函数的最后一个命名参数以…为前缀，它将成为一个由剩余参数组成的数组。
####函数重载
重载是方法名字相同，参数不同，返回类型可相同也可不同。每个重载的方法（或者构造函数）的参数类型列表独一无二。 - 参数类型不同：
function disp(string):void;
function disp(number):void; - 参数数量不同
function disp(n1:number):void;
function disp(x:number,y:number):void; - 参数类型顺序不同
function disp(n1:number,s1:string):void;
function disp(s:string,n:number):void;
如果参数类型不同，则参数类型应设置为any；参数数量不同，将不同的参数设置为可选。
同JS类似
类型别名 type alias
类型别名为一个类型创建一个新的名字。有些时候类型别名和接口很相似。类型别名可以是原始类型，联合类型，元组类型还有一些必须手写的类型。
- 声明语法不通
- 类型别名可以声明一些接口无法声明的其他类型
interface A {
x: number;
y: string;
(x: number, y: string):void;
}
type A = {
x: number;
y: number;
}
type B = (x: number, y:string) => void;
// 声明已有类型
type A=number;
// 字面量类型
type B='foo';
// 元组类型
type C=[number,string];
// 联合类型
type D=number | boolean;
// 交叉类型
type E=A&D;
TypeScript接口
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。
TS接口定义
interface interface_name {
}
需要注意：接口不能转换为JS，它只是TS的一部分。
接口继承
接口继承，即可以通过其他接口来扩展自己。TS允许继承多个接口。继承关键字extends。
- 单接口继承
Child_interface_name extends super_interface_name - 多接口继承
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name
继承的各个接口使用，逗号分隔。
TypeScript类
TS是面向对象的JS。类描述了所创建的对象共同的属性和方法。TS支持面向对象的所有特性，如类、接口等。
类定义方式
class class_name {
// 类作用域
}
定义类的关键字class,后面紧跟类名，类可以包含以下几个模块：
- 字段：字段是类里面声明的变量。
- 构造函数：类实例化时调用，可以为类的对象分配内存。
- 方法：对象要执行的操作。
类的继承
TS支持继承类，关键字extends,子类除了不能继承父类的私有成员（方法和属性）和构造函数，其他都可以继承。TS一次只能继承一个类，不支持继承多个类，但TS支持多重继承（a继承b,b继承c）。
语法
class child_class_name extends parent_class_name
继承类的方法重写
类继承后。子类可以对父类的方法重新定义，即方法重写。其中super关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。
static关键字
用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。
####访问控制修饰符
TS中，可以使用它来保护对类、变量、方法和构造方法的访问。
- public(默认):公有，可以在任何地方被访问。
- protected:可以被其自身以及其子类和父类访问。
- private：私有，只能被其定义所在的类访问。
类和接口
类可以实现接口，使用关键字implements,并将interset字段作为类的属性使用。
TypeScript对象
TypeScript类型模板
TS中的对象必须是特定类型的实例。
var sites = {
site1: "Runoob",
site2: "Google",
sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
console.log("hello " + sites.site1);
};
sites.sayHello();
TypeScript命名空间
目的：解决重名问题。
命名空间定义了标识符的可见范围，一个标识符可以在多个名字空间中定义，它在不同名字空间中含义互不相干。（在一个新的名字空间中定义任何标识符，它们不会和任何已有标识符发生冲突，因为已有的定义都处于其他名字空间中。）
语法格式：namespace
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}
以上定义了一个命名空间SomeNameSpaceName，若需要在 外部可以调用SomeNameSpaceName中的类和接口，则需要在类和接口添加export关键字。
要在另一个命名空间调用的语法格式：
SomeNameSpaceName.SomeClassName;
如果一个命名空间在一个单独的TypeScript文件中，则应使用三斜杠///引用它，语法：
/// <reference path = "SomeFileName.ts" />
嵌套命名空间
可以将命名空间定义在另一个命名空间里。成员的访问使用.来实现。
namespace namespace_name1 {
export namespace namespace_name2 {
export class class_name { }
}
}
TypeScript模块
模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。
模块导出export:
// 文件名 : SomeInterface.ts
export interface SomeInterface {
// 代码部分
}
模块在另一个文件中使用import来导入：
`import someInterfaceRef = require(“./SomeInterface”);
#TypeScript声明文件
TS作为JS的超集，在开发时免不了使用其他第三方的JS库。虽然可以直接引用库的类和方法，但无法使用TS诸如类型检查等特性功能。为解决这问题，需要将这些库里面的函数和方法体去掉后只保留导出类型声明，而产生了一个描述JS库和模块信息的声明文件。通过引用这个声明文件，就可以借用TS的各种特性来使用库文件了。
声明文件以.d.ts为后缀，语法格式：
declare module Module_Name {
}
// Ts中引入声明文件
/// <reference path = " runoob.d.ts" />
声明文件不包含实现，他只是类型声明 ，把声明文件加入到TS中。
TS错误解决方案
ts使用[]获取对象属性报错：
复杂类型使用一些自带属性报错：
- 设置类型为
any - 设置
tsconfig.json文件属性"suppressImplicitAnyIndexErrors": true
todoList
笔记：
- 模态框多个组件调用，显示状态放在vueX
- 类文件的方法在各个组件中调用，类实例i放在vuex中
- 复杂点：edit编辑
将过度transData和editID编辑id放在state中，
mutations中添加方法showEditMemo
// state和待更改的数据
showEditMemo(state:any, editMemo: any) {
state.transData = editMemo;
}
// 点击按钮触发
doEdit(id: number) {
// 展示模态框
this.$store.state.isShow = true;
this.$store.state.editId = id;
let item = this.memoList.find(
item1:any => item1.id === id
);
// edit编辑同步更改，因为浅拷贝，所以
item = JSON.parse(JSON.stringify(item));
this.$store.commit("showEditMemo", item);
}
扫一扫
798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
