前端开发工程师

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

联合类型

交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

通过&进行交集

interface Colorful {  color: string;}interface Circle {  radius: number;} type ColorfulCircle = Colorful & Circle;

交叉类型

parameterName is Type

function isFish(pet: Fish | Bird): pet is Fish {    return (<Fish>pet).swim !== undefined;}

用户自定义的类型保护

 typeof类型保护只有两种形式能被识别： typeof v === \"typename\"和 typeof v !== \"typename\"， \"typename\"必须是 \"number\"， \"string\"， \"boolean\"或 \"symbol\"。

typeof类型保护

instanceof类型保护是通过构造函数来细化类型的一种方式

instanceof的右侧要求是一个构造函数1. 此构造函数的 prototype属性的类型，如果它的类型不为 any的话2. 构造签名所返回的类型的联合

interface Padder {    getPaddingString(): string}class SpaceRepeatingPadder implements Padder {    constructor(private numSpaces: number) { }    getPaddingString() {        return Array(this.numSpaces + 1).join(\" \");    }}class StringPadder implements Padder {    constructor(private value: string) { }    getPaddingString() {        return this.value;    }}function getRandomPadder() {    return Math.random() < 0.5 ?        new SpaceRepeatingPadder(4) :        new StringPadder(\"  \");}// 类型为SpaceRepeatingPadder | StringPadderlet padder: Padder = getRandomPadder();if (padder instanceof SpaceRepeatingPadder) {    padder; // 类型细化为'SpaceRepeatingPadder'}if (padder instanceof StringPadder) {    padder; // 类型细化为'StringPadder'}

instanceof类型保护

类型保护与区分类型

--strictNullChecks，可选参数会被自动地加上 | undefined

class C {    a: number;    b?: number;}

可选参数和可选属性

identifier!从 identifier的类型里去除了 null和 undefined

类型断言 !

function f(sn: string | null): string {    return sn || \"default\";}

类型保护

类型保护和类型断言

可以为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

编译选项

接口中所属有的方法都是抽象方法

接口(interface)

组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能

泛型类使用（ <>）括起泛型类型，跟在类名后面

泛型

Typescript

vuex

vue-router

vue-cli

vite

Vue组件

Vue-SSR

Vue2/vue3

react-redux

react-router

mobx

umi

hooks

高级框架

reactNative

flutter

ElectronJs

taro

uniapp

小程序

跨端开发

Ant Design

Element UI

bootstarp - vue

PC端UI组件库

D3

百度echarts

数据可视化框架

three.js

ThingJS

Unity3D

WebGL

百度地图API

天地图

阿里超图

mapbox gl

高德地图

腾讯开发者中心

地图服务

Uview

vant

TDesign React Mobile

移动端UI组件库

qiankun

micro-app

微前端

npm

yarn

phpm

包管理器

@babel/core

babel

工具链

埋点监控SDK

错误监控

性能优化

linux命令

Docker

持续集成CICD

jest

cypress

测试

eslint

prettier

代码规范

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

前端工程化

前端安全

webSocket

EventSource

前后端通信

scss

less

stylus

css预处理

分组元素

文本元素

form表单

容器元素

html元素

float

Flex

grid

BFC

盒模型

css变形

css渐变

css过渡

css动画

css/css3

单列布局

自适应布局

圣杯布局

双飞翼布局

等高布局

定位布局

布局方式

html / css

至少精通一个（另外两个需要了解并掌握）

浏览器对象（BOM）

文档对象模型（DOM）

Event 事件

API集合

Ajax - XMLHttpRequest

this的指向

语法/词法

ES5

fetch

promise

箭头函数

proxy

解构

可选链

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)

ES6/ES7/ES8/ESNext

所谓标识符，就是指给变量、函数、属性或函数的参数起名字。

第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。

其它字符可以是字母、下划线、美元符号或数字。

按照惯例，ECMAScript 标识符采用驼峰命名法。

标识符不能是关键字和保留字符。

标识符可以是按照下列格式规则组合起来的一或多个字符

关键字

保留字符

其它不建议使用的标识符

标识符

字面量都是不可以改变的，由于字面量不是很方便使用，所以在JavaScript中很少直接使用字面量，使用的而是变量。

字面量

字面量实际上就是一些固定的值，比如：1、2 、3、true、false、null、NaN、“hello”

变量的作用是给某一个值或对象标注名称

变量的声明： 使用var关键字声明一个变量。var a;

变量的赋值： 使用=为变量赋值。a = 123;

声明和赋值同时进行：var a = 123;

变量

字面量和变量

数据类型决定了一个数据的特征

对于不同的数据类型我们在进行操作时会有很大的不同。

String用于表示一个字符序列，即字符串。‌字符串需要使用 单引号 或 双引号 括起来。

转义字符

字符串型（String）

Number 类型用来表示整数和浮点数，最常用的功‌能就是用来表示10进制的整数和浮点数。

最大值：+1.7976931348623157e+308

最小值：-1.7976931348623157e+308

0以上的最小值：5e-324

Number表示的数字大小是有限的，如果超过了这‌个范围，则会返回 ±Infinity。

Infinity：正无穷

-Infinity：负无穷

NaN：非法数字（Not A Number）

特殊的数字

二进制：0b 开头表示二进制，但是，并不是所有的浏览器都支持

八进制：0 开头表示八进制

十六进制：0x 开头表示十六进制

其它的进制

注意：使用typeof检查一个Number类型‌的数据时（包括NaN 和 Infinity），会返‌回\"number\"。

数值型（Number）

布尔型也被称为逻辑值类型或者真假值类型。

布尔型只能够取真（true）和假（false）两种数值。除此以外， 其它的值都不被支持。

布尔型（Boolean）

Undefined 类型只有一个值，即特殊的 undefined

在使用 var 声明变量但未对其加以初始化时，‌这个变量的值就是 undefined。

undefined型（Undefined）

注意：使用typeof对没有初始化‌和没有声明的变量，会返回‌“undefined”。

Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。

undefined值实际上是由null值衍生出来的，‌所‌以如果比较undefined和null是否相等，‌会返回true。

null型（Null）

注意：从语义上看null表示的是一个空的对象，‌所以使用typeof检查null会返回一个Object。

JavaScript( ES5 )中一共有5种基本数据类型：

这5种之外的类型都称为Object，‌所以总的来看JavaScript中共有‌六种数据类型。

类型分类

typeof 数据

使用typeof操作符可以用来检查一个变量的数据类型。

typeof运算符

数据类型

调用被转换数据类型的toString()方法

调用String()函数，并将被转换的数据作为参数传递给函数

为任意的数据类型 +\"\"

转换为String类型

如果是纯数字的字符串，则直接将其转换为数字

如果字符串中有非数字的内容，则转换为NaN

如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

字符串 --> 数字

true 转成 1

false 转成 0

布尔 --> 数字

null 转成 0

null --> 数字

undefined 转成 NaN

undefined --> 数字

方式一：使用Number()函数

方式二：这种方式专门用来对付字符串，parseInt() 把一个字符串转换为一个整数

方式三：这种方式专门用来对付字符串，parseFloat() 把一个字符串转换为一个浮点数

转换为Number类型

数字 —> 布尔除了0和NaN，其余的都是true

字符串 —> 布尔除了空串，其余的都是true

null和undefined都会转换为false

子主题

将其它的数据类型转换为Boolean，只能使用Boolean()函数。

转换为Boolean类型

强制类型转换

javascript

大概列出es6的几个重点，实际内容远大于列出的内容

jquery

bootstarp

入门框架

git

svn

版本控制工具

前端开发工程师的学习路径

二选一的情况下，必须要会git

可以不精通，工作中用到的可能性也非常少，但是在学习过程依然是不可避开的一个过程