h5开发app用什么框架,网站怎么优化 优帮云,做网站投入,动漫做羞羞的网站文章目录 一. 8种内置基础类型.ts二. void、never、any、unknown类型void类型never类型any类型unknown类型总结#xff1a;void和any在项目中是比较常见的#xff0c;never和unknown不常用。 三. 数组和函数类型定义.ts四. 元组与交叉类型使用元组数组一般有同类型的值组成void和any在项目中是比较常见的never和unknown不常用。 三. 数组和函数类型定义.ts四. 元组与交叉类型使用元组数组一般有同类型的值组成但有时候存在多种类型我们多种类型定义称为元组。数组定义同一类型元组定义不同类型 交叉类型把多个类型合并为一个类型称为交叉类型。联合类型表示或的关系交叉类型表示取两个类型的并集例子例子 五. 接口五种场景与使用接口定义属性只读或可选任意属性定义函数类型接口继承接口和Type区别例子 六. 泛型三种定义与使用方式七. 关键知识点 keyof,typeof, in的使用keyoftypeofin例子 八.tsconfig.json配置基础字段编译配置 总结 一. 8种内置基础类型.ts
/* eslint-disable typescript-eslint/no-unused-vars */
// 定义类型: string
const name: string jack// 定义类型: number
const age: number 30// 定义类型: boolean
const isTrue: boolean true// 特殊的几个:---------
// 定义undefined类型
let a: undefined// 定义null类型
const b: null null// 定义object类型
const user: object {}// 或者
const user1: { name: string; age: number } { name: zhangsan, age: 24 }// 定义bigint类型
const big: bigint 100n// 定义symbol符号类型
const sym: symbol Symbol(hepan)export default {}
二. void、never、any、unknown类型
void类型
void表示没有任何类型不能直接赋值。
let a: void;
let b: number a; // 报错给变量赋值为void是没有意义的。 如果一个函数没有返回值此时我们可以定义为void
function fn():void {console.log(今天天气不错)
}a hrefjavascript:void;/anever类型
never类型表示永不存在的值的类型。 (在报错或者死循环时候使用)
// 抛出异常
function error(): never {throw new Error(我是一个Error);
}// 死循环
function loop(): never {while (true) {console.log(这里是死循环)};
}any类型
any类型表示任意类型。
let num:number 1000;
num jack // 报错let num:any 1000;
num jack // 不报错// 调用方法依然不报错
num.setName(jack)虽然any不做任何约束但是非常不推荐这样使用这样会带来隐患。 我们在开发组件、模块、定义函数、调用接口时如果类型很难定义出来、不知道属于什么类型等场景可以适当使用any类型。
unknown类型
unknown与any一样所有类型都可以分配给unknown反之把unknown 赋值给其它类型会报错。
// unknown 可以接收任意类型
let name:string jack
let user:unknown name;// unknown 不可以赋值给其它类型any除外下面会报错
let name:unknown jack
let user:string name;(在报错或者死循环时候使用)
// 抛出异常
function error(): unknown {throw new Error(我是一个Error);
}// 死循环
function loop(): unknown {while (true) {console.log(这里是死循环)};
}总结 能确定类型的尽量定义类型。 无法确定类型的可以使用 any 进行兜底。 当函数没有返回值时可以使用void定义。 any和unknown可以接收任意类型值any可以赋值给任意类型但unknown不可以赋值给任意类型。 void和any在项目中是比较常见的never和unknown不常用。
三. 数组和函数类型定义.ts
// 数组类型的定义
const list1: number[] [1, 2, 3]const list2: Arraynumber [1, 2, 3]const list3: [number, string, boolean] [1, 2, true]const list4: [{ name: string; age: number }] [{ name: jack, age: 30 }]const list5: Array{ name: string; age: number } [{ name: jack, age: 30 }]interface User {name: stringage: number
}const list6: ArrayUser [{ name: jack, age: 30 }]// 函数类型的定义
// :在函数括号后加冒号
// 变量类型定义:在变量后加冒号function add1(a: number, b: number): number {return a b
}function add2(a: number, b: number): void {console.log(a b)
}// 定义报错用unkown
function add3(a: number, b: number): unknown {throw new Error(Error)
}// 箭头函数两种定义
// (括号后面加冒号)
const add4 (a: number, b: number): number {return a b
}// (变量后加冒号)
const add5:(a: number, b: number) number (a: number, b: number) {return a b
}export default {}
四. 元组与交叉类型使用
元组
数组一般有同类型的值组成但有时候存在多种类型我们多种类型定义称为元组。
数组定义同一类型
// 纯数字
let list:number[] [1,2,3]
// 纯字符串
let list:string[] [1,2,3]// 使用Array泛型
let list:Arraynumber [1,2,3]元组定义不同类型
const list: [number, string, boolean] [1, 2, true]// 解构
const user:[number,string] [1,Jack]
const [id,name] user;// 可选类型
const list:[number,number,number?] [1,2,3]
const list:[number,number,number?] [1,2]交叉类型 多用对象定义 https://zhuanlan.zhihu.com/p/627526459 把多个类型合并为一个类型称为交叉类型。
联合类型表示或的关系 a|b, a, b, a b 交叉类型表示取两个类型的并集 取出范围最大的 例子
// JS里面使用且
const count 10;
if(count 0 count 10) console.log(执行代码)
// TS里面也是类似写法我们先看或使用// 1. 或使用let id 1;
let id 1;// 联合类型
let id:number | string 1;
那且如何使用一个变量不可能即是数字又是字符串
// 错误的用法
let id: number string 1; type UserType { id: number, name: string}
type AgeType { age: number}const user:UserType AgeType { id:1, name: jack, age: 30}
例子
// 元组交叉类型.ts// 元组
const list: [number, string, boolean, object] [1, 2, true, {}]// 交叉类型
type AgeType { age: number }
type UserType { id: number; name: string }const user: UserType AgeType { id: 1, name: jack, age: 30 }
const userAge:AgeType {age: 30}const userInfo: UserType {id: 2, name: Tom}export default {}
五. 接口五种场景与使用
在Java语言中接口是一个非常重要的概念是对行为的抽象具体功能由类去负责实现。
在TypeScript中接口是一个非常灵活的概念除了用于抽象以外还可以用于类型的描述。
接口定义
interface Person {name: string;age: number;
}const jack:Person {name: Jack,age:30
}// 少字段会报错
const tom:Person {name: Tom,
}// 多字段也会报错
const tom:Person {name: Tom,age: 30,money: 100
}接口一般首字母大写 属性只读或可选
interface Person {readonly name: string;age?: number;
}// 正确
const tom:Person {name: tom
}// 报错
tom.name jack任意属性
比如说我们不确定这个用户具体有哪些属性怎么去定义类型
interface Person {name: string;age: number;
} const tom:Person {id: 1,name: tom,age: 30,gender: male,edu: 本科
}// 添加任意属性
interface Person {name: string;age: number;[k:string] : any;
} 注意一旦定义了任意属性那么确定的属性和类型必须是它的类型的子集。 定义函数类型
const add (x, y) {return x y
}// 添加类型
const add (x:number, y:number):number {return x y
}// 接口定义函数类型
interface Sum{(x:number,y:number):number
}const add: Sum (x, y) {return x y
}// type定义函数类型
type Sum (x:number,y:number)number;接口继承
interface User {id: number;name: string;
}interface Person extends User {age: number;
}
const Tom:Person {id: 1,name: tom,age: 30
}type Person User { age: number }接口和Type区别
接口通过interface定义type是用来定义类型别名。
接口可以重复定义type不可以。
接口可以继承type不可以继承但是可以使用联合类型和交叉类型来模拟继承。
例子
// 接口.ts
// 1. 定义接口
interface Person {name: stringage: number
}const jack: Person {name: jack,age: 30
}const tom: Person {name: jack,age: 30
}// 2. readonly定义的字段不可修改
// ? 问号字段表示 接口字段可选
interface P {readonly name: stringage?: number
}const lily: P {name: lily
}// readonly定义的字段不可修改 (报错)
// lily.name Tom// 3. 定义任意字段的动态属性接口
// 可接收任意字段
// 注意: 任意字段的接口值,应包含父接口的所有类型
interface T {name: stringage: number// 定义动态属性字段[k: string]: string | number// 或者// [k: string]: any
}
const a: T {name: jack,age: 30,id: 1,gender: male,edu: 本科
}// 4. 函数类型接口定义
interface Sum{(x: number, y: number) : number
}
const add:Sum (x, y) {return x y
}// 或者type Sum1 (x: number, y: number) numberconst add1:Sum1 (x, y) {return x y
}// 5. 接口继承与type类型模拟继承
// 接口可以继承type不可以继承但是可以使用联合类型和交叉类型来模拟继承。interface User{id: number;name: string;
}interface Person extends User{age: number
}const zee: Person {name: zee,age: 30,id: 1
}// 表示并集,取范围最大的
type Person1 User {age : number}const foo: Person1 {name: foo,age: 30,id: 1
}type U1 { id: number; name: string }// 表示或的关系
type Person2 { age: number } | U1
const tim1: Person2 {id: 1,name: tim,age: 30
}export default {}
六. 泛型三种定义与使用方式
七. 关键知识点 keyof,typeof, in的使用
keyof
JS当中获取key的语法Object.keys()
TS当中获取key的类型keyof
interface Person {id: number;name: string;age: number;
}type K1 keyof Person; // id | name | age通过keyof获取接口的key值, 将其中的key值,组成一个新类型K1,他是一个联合类型
可以将一个变量指定为K1, 他的属性只能为 ‘id’ | name | ‘age’,其中之一(字符串)
typeof
实例参考 https://blog.csdn.net/zxl1990_ok/article/details/125474154 对变量使用获取变量类型 对对象使用获取对象类型 对函数使用获取函数类型 对enum使用获取enum类型 对类使用获取类的类型
interface Person {id: number;name: string;age: number;
}cosnt Jack { id: 1, name: jack, age: 30 }type User typeof Jack;
const Tom:User { id: 2, name: tom, age: 30}对Jack变量使用typeof,生成一个新类型User,User的定义就是Person类型, 将User类型定义为Tom的类型
in
in 遍历枚举类型 只能在type类型中使用,不能在interface中使用
type Keys id | name | agetype User {[k in Keys] : any;
}定义Keys类型 ‘id’ | ‘name’ | ‘age’ 定义类型User, [k in Keys] : any; 表示, [k in Keys] : key必需是Keys中的值, ‘id’,‘name’ ,age’其中一个 any: 值类型,可以是任意类型
例子
// keyof 获取键值
interface User{id: numbername: stringage: number
}
type Keys keyof User // keyof 获取键值,生成新类型Keys,赋值给k1
const k1:Keys age// typeof
// 获取对象类型
const user {name: jack, age: 30}
type User1 typeof user; // 推断出user对象的类型
// 赋值给新对象定义
const u1:User1 {name: u1, age: 20}// in
// 使原来的任意类型的key,现在只能在指定范围内选interface User2{[k: string]: any
}
// User2, 类型key为string对象,值为任意值// 使原来的任意类型的key,现在只能在指定范围内选
type User3 {[k in Keys]:any
}
/*
type User3 {id: any;name: any;age: any;
}
*/
const tom:User3 {id: 1,name: jack,age: 30,
}export default {}
八.tsconfig.json配置
TypeScript 使用 tsconfig.json 文件作为其配置文件当一个目录中存在 tsconfig.json 文件则认为该目录为 TypeScript 项目的根目录。
基础字段 files - 设置要编译的文件的名称[‘./src/main.tsx’] include - 设置需要进行编译的文件支持路径模式匹配[‘src’] exclude - 设置无需进行编译的文件支持路径模式匹配[‘node_modules’] compilerOptions - 编译配置选项
编译配置
{include: [src/**/*],exclude: [node_modules,**/*.spec.ts],compilerOptions: {/* 基本选项 */target: es5, // 指定 ECMAScript 目标版本: ES3 (default), ES5, ES6/ES2015, ES2016, ES2017, or ESNEXTmodule: commonjs, // 指定使用模块: commonjs, amd, system, umd or es2015lib: [], // 指定要包含在编译中的库文件allowJs: true, // 允许编译 javascript 文件checkJs: true, // 报告 javascript 文件中的错误jsx: preserve, // 指定 jsx 代码的生成: preserve, react-native, or reactdeclaration: true, // 生成相应的 .d.ts 文件sourceMap: true, // 生成相应的 .map 文件outFile: ./, // 将输出文件合并为一个文件outDir: ./, // 指定输出目录rootDir: ./, // 用来控制输出目录结构 --outDir.removeComments: true, // 删除编译后的所有的注释noEmit: true, // 不生成输出文件importHelpers: true, // 从 tslib 导入辅助工具函数isolatedModules: true, // 将每个文件做为单独的模块 与 ts.transpileModule 类似.// 只编译修改过的文件,这个时候会生成tsconfig.tsbuildinfo,下次编译的时候会进行对比只编译修改过的文件 incremental: true,/* 严格的类型检查选项 */strict: true, // 启用所有严格类型检查选项不允许隐式any类型noImplicitAny: true, // 在表达式和声明上有隐含的 any类型时报错strictNullChecks: true, // 启用严格的 null 检查noImplicitThis: true, // 当 this 表达式值为 any 类型的时候生成一个错误alwaysStrict: true, // 以严格模式检查每个模块并在每个文件里加入 use strict/* 额外的检查 */noUnusedLocals: true, // 有未使用的变量时抛出错误noUnusedParameters: true, // 有未使用的参数时抛出错误noImplicitReturns: true, // 并不是所有函数里的代码都有返回值时抛出错误noFallthroughCasesInSwitch: true, // 报告 switch 语句的 fallthrough 错误。即不允许 switch 的 case 语句贯穿/* 模块解析选项 */moduleResolution: node, // 选择模块解析策略 node (Node.js) or classic (TypeScript pre-1.6)baseUrl: ./, // 用于解析非相对模块名称的基目录paths: {}, // 模块名到基于 baseUrl 的路径映射的列表rootDirs: [], // 根文件夹列表其组合内容表示项目运行时的结构内容typeRoots: [], // 包含类型声明的文件列表types: [], // 需要包含的类型声明文件名列表allowSyntheticDefaultImports: true, // 允许从没有设置默认导出的模块中默认导入。/* Source Map Options */sourceRoot: ./, // 指定调试器应该找到 TypeScript 文件而不是源文件的位置mapRoot: ./, // 指定调试器应该找到映射文件而不是生成文件的位置inlineSourceMap: true, // 生成单个 soucemaps 文件而不是将 sourcemaps 生成不同的文件inlineSources: true, // 将代码与 sourcemaps 生成到一个文件中要求同时设置了 --inlineSourceMap 或 --sourceMap 属性/* 其他选项 */experimentalDecorators: true, // 启用装饰器emitDecoratorMetadata: true , // 为装饰器提供元数据的支持paths: {/*: [src/*]}}
}总结 每一个语法都要手写出来理解没有偏差。 项目当中反复使用。 工作当中举一反三、活学活用。
