个人的网站备案多少钱,网站编辑工作,网站建设通讯设备中企动力,柳市网站优化文章目录 一、ts初始化1. 初始化.json文件一2. 启动方式2.1 直接运行.ts文件2.2 转换运行 二、类型1. 参数类型1.1 常规参数1.2 symbol1.3 数组\[]1.4 元组\[]1.5 用字面量定义数据类型 2. Object3. 枚举类型\[Enum]3.1 数字枚举3.2 字符串枚举 三、 类型别名1. 数组别名使用2.… 文章目录 一、ts初始化1. 初始化.json文件一2. 启动方式2.1 直接运行.ts文件2.2 转换运行 二、类型1. 参数类型1.1 常规参数1.2 symbol1.3 数组\[]1.4 元组\[]1.5 用字面量定义数据类型 2. Object3. 枚举类型\[Enum]3.1 数字枚举3.2 字符串枚举 三、 类型别名1. 数组别名使用2. 对象别名使用3. 接口别名使用4. 对象接口别名共同点5. 对象接口别名区别5.1 扩展性5.2 联合类型和交叉类型5.3 声明合并5.4 复杂类型 6. 对象接口别名的选择 四、Function1. 常规写法2. 箭头函数 五、Interface1. 继承 一、ts初始化
1. 初始化.json文件一 命令行输入: tsc --init生成tsconfig.json。 [初始化node的.json文件是: npm init -y]
2. 启动方式
2.1 直接运行.ts文件
下载依赖: npm i -g ts-node。//-g 是全局安装运行: ts-node file.ts
2.2 转换运行 把.ts文件转换成.js文件: tsc test.ts 转换后会生成.js文件test.js。然后直接node test.js按照运行.js文件的方式运行就可以
二、类型
1. 参数类型
1.1 常规参数 参数后可加type,因为ts是强类型。 如果不加type则会由系统自动判断但是不建议。 //string
let str: string str;//int
let num: number 111;//null
let nu: null null;//undefind
let und: undefined undefined;//any: you can use whenever you don’t want a particular value to cause typechecking errors.
let an: any 100; //boolean
let boo:boolean true;//unknown: 在不知道这个参数是什么类型的时候可以先写unknown后期再回头看
let unk: unknown 123;1.2 symbol
//symbol: 唯一的标识符可用作Object的key。
let sy: symbol Symbol(key1)
let obj {[sy]: value,key1: value1
}
console.log(obj[sy]); //value
console.log(obj.key1); //value1, 取的是手写的key1
console.log(Object.keys(obj)); //[key1] 取的是手写的,.keys()获取不到Symbol()
console.log(Object.getOwnPropertySymbols(obj)); //[ Symbol(key1) ]1.3 数组[]
//数组,两种写法type[] or Arraytype| is or
let arr: number[] [1,2,3];
let arr1: Arraynumber [1,2,3];
let arr2: (string | number)[] [1, 1]; //可同时包括string或者number类型
let arr3: string | number[] str; //可以是单string或者number数组1.4 元组[] 用于表示固定大小和已知类型的数组。元组与普通数组的主要区别在于每个元素的类型和数量是固定的。 //元组通过指定元素类型的顺序来定义允许每个元素具有不同的类型
let point: [number, number] [10, 20]; // 有两个数值类型的元素
let mixed: [string, number, boolean] [Alice, 30, true]; // 不同类型的元素
1.5 用字面量定义数据类型 可用于任意类型定义string, number, boolean, function… //number
type StatusCode 200 | 404 | 500;let code: StatusCode;code 200; // 合法
// code 404; // 合法
// code 300; // 不合法TypeScript 报错//function
function setDirection(direction: up | down | left | right) {// 函数实现
}setDirection(up); // 合法
// setDirection(forward); // 不合法TypeScript 报错2. Object 声明参数类型前加’?参数转为可选参数。age?: number //写法一
let obj: { name: string, age: number, fun(): void } {name: name1,age: 30,fun() {return 2;}
}/*** 类型声明在定义时fun(): void 表示这个函数不应该返回任何值。理想情况下函数应该只执行一些操作而不是返回一个值。* 由于我在实现中返回了 2这会导致类型检查不一致。虽然 TypeScript 允许你在运行时返回值但在类型系统中这与 void 类型不符。但可以使用*/
console.log(obj.fun()); //2//写法二 - 类型中间可用;隔开
let obj: { name: string; age: number; fun(): void } {...}//写法三 - 类型可以横排写也可以竖排写竖排写的话类型中间可不加, or ;
let obj: { name: stringage: number fun(): void
} {...}3. 枚举类型[Enum] 枚举Enum是一种特殊的类型用于定义一组命名的常量枚举可以分为两种类型数字枚举Numeric Enum和 字符串枚举String Enum。 3.1 数字枚举
数字枚举是默认的枚举类型。它的成员会被赋予数字值从 0 开始后续成员的值会自动递增。
enum Direction {Up, // 0Down, // 1Left, // 2Right // 3
}console.log(Direction.Up); // 输出: 0也可以为枚举成员指定初始值后续成员会自动递增。
enum Direction {Up 2, // 2Down, // 3Left 300, // 300Right // 301
}console.log(Direction.Right); // 输出: 3013.2 字符串枚举
字符串枚举要求每个成员都必须具有字符串值。这种枚举类型不支持自动递增必须为每个成员显式地指定字符串值。
enum Response {Success SUCCESS,NotFound NOT_FOUND,Error ERROR,
}let response: Response Response.Success;
console.log(response); // 输出: SUCCESS三、 类型别名 如果同一种类型重复被使用可以去进行统一添加别名 1. 数组别名使用
let arr: (string | number)[] [1, two, 3, four];
let arr2: (string | number)[] [1, two, 3, four];type StrOrNumArr (string | number)[]; //给常用的组合类型统一用一个别名归总
let arr3: StrOrNumArr [1, two, 3, four];2. 对象别名使用
let obj: { name: string; age: number; fun(): void } {...}
let obj2: { name: string; age: number; fun(): void } {...}//声明user类,fun()设置为可选参数
type UserType { name: string, age: number, fun?(): void };
//参数可以直接调用就不需要重复去写了
let obj3: UserType {name: name1,age: 30
}3. 接口别名使用
interface User {name: string,age: number
}//使用接口别名
let obj: User {name: name1,age: 30
}4. 对象接口别名共同点
type 和 interface 都可以用来定义对象的类型
5. 对象接口别名区别
5.1 扩展性
interface 可以通过 extends 进行扩展。type 可以通过交叉类型进行扩展。
// interface 扩展
interface User {name: string;age: number;
}interface Admin extends User {role: string;
}// type 扩展
type UserType {name: string;age: number;
};type AdminType UserType {role: string;
};5.2 联合类型和交叉类型
type可以定义联合类型和交叉类型interface不可以
// type 联合类型使用 | 运算符表示表示一个值可以是多个类型中的任何一个。
type StringOrNumber string | number;// type 交叉类型使用 运算符表示表示一个类型同时满足多个类型的结构。 写法等同于直接定义{ name: string, age: number }
type NameAndAge { name: string } { age: number };5.3 声明合并
interface 支持声明合并即可以多次声明同一个接口TypeScript 会将它们合并。type 不支持声明合并。
// interface 声明合并
interface User {name: string;
}interface User {age: number;
}const user: User {name: Alice,age: 30
};5.4 复杂类型
type 可以使用映射类型、条件类型等高级类型特性。interface 不支持这些高级类型特性。
6. 对象接口别名的选择
如果需要声明合并、扩展接口或定义类的形状使用 interface。如果需要定义联合类型、交叉类型或使用高级类型特性使用 type。
四、Function 用于定义可执行的代码块可以接受参数并返回值。可以使用 function 关键字声明一个函数或者使用箭头函数语法。 1. 常规写法
//fun(数字类型参数1数字类型参数2): 返回一个数字类型的结果。在引用的时候两个参数必须都传
function fun(start: number, end: number): number{return start end
}//接收参数后加?则参数则为可选参数写法也适用于object参数
function fun1(start: number, end?: number): number{return start end
}fun(3, 5) //如果没有返回值则void
function fun2(start: number, end: number): void{console.log(start end)
}2. 箭头函数 除了写法不一样判断规则同上 let fun (start: number, end: number): number {return start end
}.五、Interface 用于定义对象的结构和类型约束可以描述对象的属性和方法但不包含实现。接口可以用于类型检查确保对象符合预定义的结构。不能被直接调用它们只是用来描述对象的结构通常用于类型注解和接口实现。 1. 继承
interface User {name: string;age: number;
}interface Admin extends User {role: string;
}let obj: Admin {name: name1,age: 30,role: Manager
}
