TypeScript
2021-12-20 15:56:09 22 举报
登录查看完整内容
typescript的学习笔记和记录,免费克隆,给个赞吧~
作者其他创作
大纲/内容
https://nodejs.org/en/
Node.js
https://www.typescriptlang.org/download
npm install typescript --save-dev
cmd => 输入tsc验证是否安装成功
tsc
tsc helloworld.ts
typescript
开发环境
let decLiteral: number = 6;
数字
Number
let name: string = \"bob\";
字符串
String
let isDone: boolean = false;
布尔值
Boolean
数组
Array
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
元组
Tuple
enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。
枚举
Enum
let notSure: any = 4;
let d; // 隐式的any
*
Any
let e:unkown = '1'
未知类型
Unkown
let unusable: void = undefined;
null/undefined
Void
默认情况下null和undefined是所有类型的子类型
指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自
let n: null = null;
let u: undefined = undefined;
Null/Undefined
never类型表示的是那些永不存在的值的类型
never类型是任何类型的子类型，也可以赋值给任何类型
// 返回never的函数必须存在无法达到的终点function error(message: string): never { throw new Error(message);}
never
Never
object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
declare function create(o: object | null): void;
对象
Object
类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。
通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。
let someValue: any = \"this is a string\";let strLength: number = (<string>someValue).length;
let someValue: any = \"this is a string\";let strLength: number = (someValue as string).length;
类型断言
基础类型
通过 | 进行分割
let a: string | number
联合类型
联合类型
交叉类型
类型保护与区分类型
可以为null的类型
类型别名
字符串字面量类型
数字字面量类型
枚举成员类型
可辨识联合
多态的 this类型
索引类型
映射类型
高级类型
类型
https://www.typescriptlang.org/tsconfig
指定需要编译的TS文件 | * 任意文件 ** 任意目录
\"include\": [ \"./src/**/*\
include
定义需要排除在外的目录
默认值: [\"node_modules\
\"exclude\": [ \"./src/hello/**/*\" ]
exclude
定义继承配置文件
\"extends\": \"./config/base\"
extends
\"files\": [ \"hello.ts\" ]
files
https://www.typescriptlang.org/docs/handbook/compiler-options.html
编译器的选项
允许编译javascript文件
false
allowJs
允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查
module === \"system\" 或设置了 --esModuleInterop 且 module 不为 es2015 / esnext
allowSyntheticDefaultImports
不报告执行不到的代码错误
allowUnreachableCode
不报告未使用的标签错误
allowUnusedLabels
以严格模式解析并为每个源文件生成 \"use strict\"语句
alwaysStrict
https://www.tslang.cn/docs/handbook/module-resolution.html#base-url
解析非相对模块名的基准目录
无
baseUrl
输入文件的字符集
utf8
charset
在 .js文件中报告错误。与 --allowJs配合使用
checkJs
启用允许将 TypeScript 项目与项目引用一起使用的约束。
composite
生成对应的.d.ts文件
declaration
指定生成的声明文件的输出目录
declarationDir
为d.ts文件创建源映射
declarationMap
构建后输出编译诊断信息
diagnostics
disableReferencedProjectLoad
disableSizeLimit
disableSolutionSearching
在引用复合项目时禁用首选源文件而不是声明文件。
disableSourceOfProjectReferenceRedirect
下层迭代
downlevelIteration
在输出文件的开头发出UTF-8字节顺序标记(BOM)
emitBOM
仅输出 d.ts 文件，而不输出 JavaScript 文件
emitDeclarationOnly
为源文件中的修饰声明发出设计类型元数据
emitDecoratorMetadata
发出额外的 JavaScript 以简化对导入 CommonJS 模块的支持
esModuleInterop
在类型检查时区分未定义和不存在
boolean
exactOptionalPropertyTypes
启用对 TC39 第 2 阶段草稿装饰器的实验性支持。
experimentalDecorators
打印编译期间读取的文件，包括包含该文件的原因
explainFiles
生成后输出更详细的编译器性能信息。
extendedDiagnostics
确保进口时大小写正确
forceConsistentCasingInFileNames
发出编译器运行以进行调试的 v8 CPU 配置文件
profile.cpuprof
generateCpuProfile
允许每个项目从 tslib 导入一次帮助程序函数，而不是在每个文件中包含它们
importHelpers
为仅用于类型的导入指定发出/检查行为
remove或preserve或error
importsNotUsedAsValues
保存 .tsbuildinfo 文件以允许对项目进行增量编译。
incremental
在发出的 JavaScript 中包含源映射文件。
inlineSourceMap
在发出的 JavaScript 内的源映射中包含源代码
inlineSources
确保每个文件都可以安全地转译，而无需依赖其他导入
isolatedModules
指定生成的JSX代码
jsx
指定面向 React JSX 发出时使用的 JSX 工厂函数，例如 'React.createElement' 或 'h'
React.createElement
jsxFactory
指定用于面向 React JSX 发出的片段的 JSX 片段引用，例如 'React.Fragment' 或 'Fragment'
jsxFragmentFactory
指定在使用 时用于导入 JSX 工厂函数的模块说明符。jsx: react-jsx*
react
jsxImportSource
使 keyof 仅返回字符串，而不是字符串、数字或符号。旧版选项
keyofStringsOnly
指定一组描述目标运行时环境的捆绑库声明文件
list
lib
编译后打印发出的文件的名称
listEmittedFiles
打印编译期间读取的所有文件
listFiles
指定调试器应将地图文件而不是生成的位置放在该位置的位置
mapRoot
0
number
maxNodeModuleJsDepth
指定生成的模块代码
module
指定 TypeScript 如何从给定模块说明符查找文件
classic or node
moduleResolution
设置用于发出文件的换行符
系统默认值
crlf or lf
newLine
不生成编译文件
noEmit
禁用生成自定义帮助程序函数，如在编译的输出中。__extends
noEmitHelpers
如果报告了任何类型检查错误，则不编译文件
noEmitOnError
禁用错误消息中的截断类型
noErrorTruncation
为 switch 语句中的故障切换案例启用错误报告
noFallthroughCasesInSwitch
为具有隐含类型的表达式和声明启用错误报告
noImplicitAny
确保使用重写修饰符标记派生类中的重写成员
noImplicitOverride
为未在函数中显式返回的代码路径启用错误报告
noImplicitReturns
不允许不明确类型的this
noImplicitThis
禁止在发出的 JavaScript 文件中添加\"使用严格\"指令
noImplicitUseStrict
禁用包含任何库文件，包括默认的 lib.d.ts
noLib
对使用索引类型声明的键强制使用索引访问器
noPropertyAccessFromIndexSignature
noResolve
禁用对函数类型中的泛型签名的严格检查
noStrictGenericChecks
使用索引访问时添加undefined到一个类型
noUncheckedIndexedAccess
在未读取局部变量时启用错误报告
noUnusedLocals
noUnusedParameters
n/a
out
为所有发出的文件指定输出文件夹
outDir
指定一个将所有输出捆绑到一个 JavaScript 文件中的文件。如果declaration为 true，则还指定捆绑所有 .d.ts 输出的文件
outFile
指定一组将导入重新映射到其他查找位置的条目
paths
指定要包含的语言服务插件的列表
plugins
禁用擦除 const enum 生成的代码中的声明
preserveConstEnums
禁用解析指向其真实路径的符号链接。这与节点中的相同标志相关
preserveSymlinks
在 JavaScript 输出中保留未使用的导入值，否则这些值将被删除
preserveValueImports
禁止在监视模式下擦除主机
preserveWatchOutput
在 TypeScript 的输出中启用颜色和格式，使编译器错误更易于阅读
true
pretty
指定createElementreact为调用的对象。这仅适用于面向 JSX 发出的情况
React
reactNamespace
移除注释
removeComments
启用导入 .json 文件
resolveJsonModule
指定源文件中的根文件夹
根据输入文件列表计算
rootDir
在解析模块时，允许将多个文件夹视为一个文件夹
根据输入文件列表计算
rootDirs
跳过类型检查 TypeScript 附带的 .d.ts 文件
skipDefaultLibCheck
跳过类型检查所有 .d.ts 文件
skipLibCheck
为发出的 JavaScript 文件创建源映射文件
sourceMap
指定调试器的根路径以查找引用源代码
sourceRoot
启用所有严格的类型检查选项
strict
strictBindCallApply
分配函数时，请检查以确保参数和返回值与子类型兼容
strictFunctionTypes
strictNullChecks
检查已声明但未在构造函数中设置的类属性
strictPropertyInitialization
在JSDoc注释中禁用具有@internal的声明
stripInternal
suppressExcessPropertyErrors
禁止显示noImplicit在为缺少索引签名的对象编制索引时出现任何错误
suppressImplicitAnyIndexErrors
为发出的 JavaScript 设置 JavaScript 语言版本，并包含兼容的库声明
ES3
target
记录期间使用的路径 moduleResolution 过程.
traceResolution
指定 .tsbuildinfo 增量编译文件的文件夹
.tsbuildinfo
tsBuildInfoFile
指定多个文件夹，其作用类似于 ./node_modules/@types
typeRoots
指定要包含的类型包名称，而不在源文件中引用
types
发出符合 ECMAScript 标准的类字段
useDefineForClassFields
默认缺省值是unknow而不是any
useUnknownInCatchVariables
compilerOptions
tsconfig.json
编译选项
https://webpack.js.org/concepts/
官网文档
E:.└─src └─index.ts
创建项目
npm init -y
初始化
npm i -D webpack webpack-cli typescript ts-loader
安装依赖
const path = require('path')module.exports = { // 环境 mode: \"development\
配置webpack.config.js
{ \"compilerOptions\": { \"module\": \"ES6\
配置tsconfig.json
{ \"name\": \"part3\
配置package.json
npm run build
编译验证
npm i -D html-webpack-plugin webpack-dev-server
新增npm包
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>TS learn</title></head><body> <div id=\"box1\"> <h1>测试页面</h1> </div></body></html>
添加模板文件(src/index.html)
const HTMLWebpackPlugin = require('html-webpack-plugin')module.exports = { // 配置webpack插件 plugins: [ new HTMLWebpackPlugin({ // 自定义title // title: \"TS学习\
修改webpack.config.js
\"scripts\": { \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\
修改package.json
npm run start
运行验证
npm i -D @babel/core @babel/preset-env babel-loader core-js
兼容性插件
配置过程
webpack
https://www.typescriptlang.org/docs/handbook/2/classes.html
class Person { // 定义属性 name: string = '孙悟空' static age: number = 18 static readonly sex: number = 1}
demo
实例属性
静态属性(类属性)
readonly开头的属性表示一个只读的属性无法修改
只读属性
属性
实例方法
静态方法(类方法)
class Person {// 定义方法 sayHello() { console.log('hello world'); } static sayHH() { console.log('hello static'); }}
方法
构造函数会在我们使用 new创建类实例的时候被调用
构造函数中的this表示的是当前对象
构造函数(constructor)
代码抽象简化
子类从基类(父类)中继承了属性和方法
子类可重写父类的方法和属性
通过super可以直接调用父类的方法和属性
super
继承(extends)
abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法
抽象方法只能定义抽象类中且子类必须对抽象方法进行重写
抽象类(abstract)
任意位置访问修改
公共修饰符
public
只有类内可以访问修改 | 通过在类中添加方法是的私有属性(方法)可以被外部访问
私有修饰符
private
只能在当前类和子类中去访问修改
受保护的修饰符
protected
修饰符
类(class)
接口中所属有的方法都是抽象方法
接口(interface)
组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能
泛型类使用（ <>）括起泛型类型，跟在类名后面
泛型
TypeScript
0 条评论
回复 删除
下一页
