一、js开发中的问题
·使用了不存在的变量、函数或成员,不会报错,往往导致查错困难
·把一个不确定的类型当作一个确定的类型处理
·不小心使用了null或者undefined的成员,报错
二、js本身的语言缺点
·js本身的语言特性,决定了他无法适应大型的复杂项目
·弱类型语言:某个变量可以随时更换类型
·js语言要等到运行的时候才知道错误,因为js语言属于是解释型语言
·以上种种原因就导致前端开发大部分时间都在排错
三、TypeScript(简称ts)
ts是js的超集,是一个可选的,静态的类型系统
-类型系统
对代码中所有的标识符(变量,函数,参数,返回值)进行类型检查
-可选的
对于新增加的类型检查方法是可选的,编译时就会显示一些js无法显示的报错
-静态的
无论是浏览器环境还是node环境,无法直接识别ts代码
>babel:es6 ->es5
>tsc :ts->js
类型检查的时间在编译时,而非运行时
四、在node环境中搭建TS开发环境
一、ts默认的情况下做出的假设
1.假设当前执行环境是dom,可以使用浏览器的属性,包括windows、document
2.没有使用模块化,自动视为全局变量
3.编译的目标代码是ES3
二、有两种方式可以更改以上假设
1.使用tsc命令行时,加上选项参数
2.使用ts配置文件,改变编译选项
三、创建配置文件进行配置
有两种方式,一种是直接在文件资源管理器中创建tsconfig.json一种是直接在命令行中输入tsc --init
有几个属性可以选择
常见的有“compilerOptions”编译选项
格式如下:
{
"compilerOptions":{
"target":"es2016",//配置编译目标代码的版本标准,这里使用最高标准es7
"module":"commonjs",//配置编译目标使用的,模块化标准
"lib":[es2016]//配置库,使其在node环境中使用
"outDir":"./dist"//将编译的文件存储在dist目录中,和vue,react一样
},
//"include":["./src"]//默认在src文件夹中寻找ts文件编译,否则会将整个工程的ts全部编译
"files":["./src/index.ts"]//执行这行代码,则只会编译这个文件以及他的依赖文件
}
一旦使用了配置文件就不能在tsc后面跟上文件名,否则会忽略配置文件,导致使用默认假设。
需要额外安装@types/node,@types是一个官方的类型库,其中包含了很多对js代码的的类型描述
五、使用第三方库来简化编译
上面提到编译的文件存储到了dist目录中,那么要进行运行就显得比较繁琐,node ./dist/index.js
ts-node:将ts代码在内存中完成编译,然后放在dist目录中,同时完成运行
nodemon:命令行为:nodemon --exec ts-node src/index.ts,可以实时监控文件的变化并运行
可以将命令行写成脚本,放入package.json中
可以将命令行修改成nodemon -e ts --exec ts-node src/index.ts表示要监测的文件扩展名为ts,否则一旦代码有一点改动就会监测到并从新执行
还可以更改成nodemon --watch src -e ts --exec ts-node src/index.ts这样就只会监控src目录中的ts文件
六、基本的类型检查
一、基本的类型约束
TS是一个可选的静态的类型系统
在进行类型约束时,只需要在变量、函数的参数、函数的返回值位置加上:类型即可
ts在很多场景中可以完成类型推导
any:表示任意类型,对该类型,ts不进行类型检查
小tips:在命名函数时,函数有严格的类型检查,所以类型不能混淆,另外可以对函数重新命名,只需点击函数名然后按F2即可重命名,会自动修改其他用到该函数的地方。
小技巧:如何区分是数字字符串还是数字:如果按照数字的方式朗读就为数字,否则为字符串
常见于电话号码
二、源代码和编译结果差异
编译结果中没有类型约束信息,所以说TS是静态的类型系统,一旦编译完成就与TS无关了
三、基本类型
数字:number
字符串:string
布尔:boolean
数组:number[]或者Array<number>
对象:object(用的较少,因为无法约束到对象里面的属性)
null和undefined其他所有类型的子类型,它们可以赋值给其他类型
例如:
let num1:number=undefined
let a:string=null
//都是合理的写法
可以在配置文件中加上"strictNullChecks":true
使用更加严格的空类型检查,从此null和undefined只能赋值给自身。
四、其他类型
联合类型:多种类型任选其一
let name:string|undefined;
if(typeof(name)==="string"){
//类型保护
name.//直接显示name作为字符串的可选方法
}
配合类型保护进行判断
类型保护:当对某个变量进行类型判断之后,在判断的语句块中便可以确定它的确切类型,typeof可以触发。
void类型:通常用于约束函数的返回值,表示该函数没有任何返回
never类型:表示函数永远不会结束,没有返回值
function throwError(msg:string):never{
throw newError(msg);
}
字面量类型:使用一个值进行约束
//类似于设定强制取值范围
let gender="男"|"女";
gender=1//false
let user:{
name:string,
age:number
}
user={
name:"34"
age:"33"
}//使用一个对象对其进行约束,对象内类型必须一样
元祖类型:一个固定长度的数组,并且数组中的每一项的类型确定
let tu:[string,number]
tu["3",4];
any类型:可以绕过检查,因为any类型的数值可以赋给任意类型
五、类型别名
type Gender="男" |"女“
type User={
name:string,
age:number,
gender:Gender
}
let u:User
u={
name:"sndia",
age:12,
gender:"男”
}
function getUser(g:Gender):User[]{
return []
}
类型别名的好处就是防止我们重复去书写一些类型的代码
六、函数的相关约束
函数重载:在函数实现之前,对函数调用的多种情况进行声明。
function combine(a:number,b:number):number;
function combine(a:string,b:string):string;
function combine(a:number|string,b:number|string):number|string{
if(typeof a==='number'&&typeof b==='number'){
return a * b;
}
if(typeof a==='string'&&typeof b==='string'){
return a + b;
}
throw new Error('a和b 必须是同种类型');
}
const n= combine(3,5)
可选参数:可以在某些参数后面添加问号,表示某个参数是可选的;需要注意的是默认参数一定是可选参数,并且可选参数必须在参数列表的末尾
function sum(a:number,b:number,c?:number){
}
sum(3,4)
七、拓展类型-枚举
>扩展类型:类型别名,枚举,接口,类
枚举通常用于约束某个变量的取值范围
字面量和联合类型配合也可以达到同样目的,但是会产生一些问题
>字面量类型的问题
会导致在类型约束地方产生重复代码。可以使用类型别名来解决
逻辑名称和真实的值产生了混淆,导致当修改真实的值时,产生了大量的修改工作
- 字面量类型不会进入到编译结果。
枚举
定义枚举
enum 枚举名{
枚举字段1 = 值1,
枚举字段2 = 值2,
...
}
枚举会出现在编译结果中,编译结果中表现为对象。
enum Level {
level1,
level2,
level3
}
let l: Level = Level.level1;
l = Level.level2;
console.log(l);
function getUsers(lev:Level){
}
枚举的规则:
- 枚举的字段值可以是字符串或数字
- 数字枚举的值会自动自增
- 被数字枚举约束的变量,可以直接赋值为数字
- 数字枚举的编译结果 和 字符串枚举有差异
最佳实践:
- 尽量不要在一个枚举中既出现字符串字段,又出现数字字段
- 使用枚举时,尽量使用枚举字段的名称,而不使用真实的值
扩展知识:位枚举(枚举的位运算)
针对的数字枚举
位运算:两个数字换算成二进制后进行的运算
enum Permission {
Read = 1, // 0001
Write = 2, // 0010
Create = 4, // 0100
Delete = 8 // 1000
}
//1. 如何组合权限
//使用或运算
//0001
//或
//0010
//0011
let p: Permission = Permission.Read | Permission.Write;
//2. 如何判断是否拥有某个权限
//0011
//且
//0010
//0010
function hasPermission(target: Permission, per: Permission) {
return (target & per) === per;
}
//判断变量p是否拥有可读权限
//3. 如何删除某个权限
//0011
//异或
//0010
//0001
p = p ^ Permission.Write;
console.log(hasPermission(p, Permission.Write));
八、模块化
TS中如何书写模块化语句
TS中,导入和导出模块,统一使用ES6的模块化标准
编译结果中的模块化
TS中的模块化在编译结果中:
- 如果编译结果的模块化标准是ES6: 没有区别
- 如果编译结果的模块化标准是commonjs:导出的声明会变成exports的属性,默认的导出会变成exports的default属性;
如何在TS中书写commonjs模块化代码
导出:export = xxx
导入:import xxx = require("xxx")
模块解析
模块解析:应该从什么位置寻找模块
TS中,有两种模块解析策略
- classic:经典
- node:node解析策略(唯一的变化,是将js替换为ts)
- 相对路径
require("./xxx")
- 非相对模块
require("xxx")
九、接口和类型兼容性
扩展类型-接口
接口:inteface
扩展类型:类型别名、枚举、接口、类
TypeScript的接口:用于约束类、对象、函数的契约(标准)
契约(标准)的形式:
- API文档,弱标准
- 代码约束,强标准
和类型别名一样,接口,不出现在编译结果中
- 接口约束对象
- 接口约束函数 接口可以继承
可以通过接口之间的继承,实现多种接口的组合
使用类型别名可以实现类似的组合效果,需要通过&
,它叫做交叉类型
它们的区别:
- 子接口不能覆盖父接口的成员
- 交叉类型会把相同成员的类型进行交叉
readonly
只读修饰符,修饰的目标是只读
只读修饰符不在编译结果中
类型兼容性
B->A,如果能完成赋值,则B和A类型兼容
鸭子辨型法(子结构辨型法):目标类型需要某一些特征,赋值的类型只要能满足该特征即可
- 基本类型:完全匹配
- 对象类型:鸭子辨型法
类型断言
当直接使用对象字面量赋值的时候,会进行更加严格的判断
- 函数类型
一切无比自然
参数:传递给目标函数的参数可以少,但不可以多
返回值:要求返回必须返回;不要求返回,随意;
十、TS中的类
TS中的类
面向对象思想
基础部分,学习类的时候,仅讨论新增的语法部分。
属性
使用属性列表来描述类中的属性
属性的初始化检查
strictPropertyInitialization:true
属性的初始化位置:
- 构造函数中
- 属性默认值
属性可以修饰为可选的
属性可以修饰为只读的
使用访问修饰符
访问修饰符可以控制类中的某个成员的访问权限
- public:默认的访问修饰符,公开的,所有的代码均可访问
- private:私有的,只有在类中可以访问
- protected:暂时不讲
Symble
属性简写
如果某个属性,通过构造函数的参数传递,并且不做任何处理的赋值给该属性。可以进行简写
访问器
作用:用于控制属性的读取和赋值
class User {
readonly id: number //不能改变
gender: "男" | "女" = "男"
pid?: string
private _publishNumber: number = 3; //每天一共可以发布多少篇文章
private _curNumber: number = 0; //当前可以发布的文章数量
constructor(public name: string, private _age: number) {
this.id = Math.random();
}
set age(value: number) {
if (value < 0) {
this._age = 0;
}
else if (value > 200) {
this._age = 200;
}
else {
this._age = value;
}
}
get age() {
return Math.floor(this._age);
}
publish(title: string) {
if (this._curNumber < this._publishNumber) {
console.log("发布一篇文章:" + title);
this._curNumber++;
}
else {
console.log("你今日发布的文章数量已达到上限");
}
}
}
const u = new User("aa", 22);
//c#
u.age = 1.5;
console.log(u.age);
u.publish("文章1")
u.publish("文章2")
u.publish("文章3")
u.publish("文章4")
u.publish("文章5")
u.publish("文章6")
十一、泛型
泛型
有时,书写某个函数时,会丢失一些类型信息(多个位置的类型应该保持一致或有关联的信息)
泛型:是指附属于函数、类、接口、类型别名之上的类型
泛型相当于是一个类型变量,在定义时,无法预先知道具体的类型,可以用该变量来代替,只有到调用时,才能确定它的类型
很多时候,TS会智能的根据传递的参数,推导出泛型的具体类型
如果无法完成推导,并且又没有传递具体的类型,默认为空对象
泛型可以设置默认值
在函数中使用泛型
在函数名之后写上<泛型名称>
如何在类型别名、接口、类中使用泛型
直接在名称后写上<泛型名称>
泛型约束
泛型约束,用于现实泛型的取值
export class ArrayHelper<T> {
constructor(private arr: T[]) { }
take(n: number): T[] {
if (n >= this.arr.length) {
return this.arr;
}
const newArr: T[] = [];
for (let i = 0; i < n; i++) {
newArr.push(this.arr[i]);
}
return newArr;
}
shuffle() {
for (let i = 0; i < this.arr.length; i++) {
const targetIndex = this.getRandom(0, this.arr.length);
const temp = this.arr[i];
this.arr[i] = this.arr[targetIndex];
this.arr[targetIndex] = temp;
}
}
private getRandom(min: number, max: number) {
const dec = max - min;
return Math.floor(Math.random() * dec + max);
}
}
// interface hasNameProperty {
// name: string
// }
// /**
// * 将某个对象的name属性的每个单词的首字母大小,然后将该对象返回
// */
// function nameToUpperCase<T extends hasNameProperty>(obj: T): T {
// obj.name = obj.name
// .split(" ")
// .map(s => s[0].toUpperCase() + s.substr(1))
// .join(" ");
// return obj;
// }
// const o = {
// name:"kevin yuan",
// age:22,
// gender:"男"
// }
// const newO = nameToUpperCase(o);
// console.log(newO.name); //Kevin Yuan
//将两个数组进行混合
//[1,3,4] + ["a","b","c"] = [1, "a", 3, "b", 4, "c"]
function mixinArray<T, K>(arr1: T[], arr2: K[]): (T | K)[] {
if (arr1.length != arr2.length) {
throw new Error("两个数组长度不等");
}
let result: (T | K)[] = [];
for (let i = 0; i < arr1.length; i++) {
result.push(arr1[i]);
result.push(arr2[i]);
}
return result;
}
const result = mixinArray([1, 3, 4], ["a", "b", "c"]);
result.forEach(r => console.log(r));
一个小demo
开发一个字典类(Dictionary),字典中会保存键值对的数据
键值对数据的特点:
- 键(key)可以是任何类型,但不允许重复
- 值(value)可以是任何类型
- 每个键对应一个值
- 所有的键类型相同,所有的值类型相同
字典类中对键值对数据的操作:
- 按照键,删除对应的键值对
- 循环每一个键值对
- 得到当前键值对的数量
- 判断某个键是否存在
- 重新设置某个键对应的值,如果不存在,则添加
export type CallBack<T, U> = (key: T, val: U) => void
export class Dictionary<K, V> {
private keys: K[] = [];
private vals: V[] = [];
get size(){
return this.keys.length;
}
set(key: K, val: V) {
const i = this.keys.indexOf(key)
if (i < 0) {
this.keys.push(key);
this.vals.push(val);
}
else {
this.vals[i] = val;
}
}
forEach(callback: CallBack<K, V>) {
this.keys.forEach((k, i) => {
const v = this.vals[i];
callback(k, v);
})
}
has(key: K) {
return this.keys.includes(key);
}
delete(key: K) {
const i = this.keys.indexOf(key);
if (i === -1) {
return;
}
this.keys.splice(i, 1);
this.vals.splice(i, 1);
}
}
以上是typescript的一些浅薄认识,感谢您的阅读