##TS(typescript)ts: typescript ,它是js超集（包含js所有的语法，在基础上增加了数据类型定义）
它最主要做的一件事，就是数据类型验证。
js是弱类型语言，java是强类型语言
let a = 123,a 就是number类型。let a = '123',a就是字符串类型
但是ts是在声明并定义的时候就是定义了它的数据类型。 let a:number = 100
如果你要去修改a ,a只能被修改成数值型，如果你修改成其他类型，那么会报错。
它运行的时候并不会报错（即使数据类型有问题，但是结果不会出错），在编译的过程中会报错。
浏览器没有办法去解析ts,ts是来源于js最终还是要以js的状态去运行。ts是弱类型，它也标志着，ts去向java靠拢
ts是谁开发的？
是微软开发的
ts适用的场景？
它适用于大型的项目开发，使你的开发更加的严谨
谁在用ts？
15年angular2.x它就是开始使用ts,所以说angular是谷歌和微软开发的精品。
15之前大家都是使用angular(1.x)，它的设计模式还是MVC。它在升级到2.x时候，全变了，从语法到设计模式都换了。它换成MVVM设计模式
vue3.0（核心库，还是载测试版本）它的源码就是用ts
一线大厂做项目都用ts。比如vue最新脚手架+ ts 或者 react中 ts + dva +umi+hook
ログイン後にコピー
1. インストールnpm install -g typescript
Version 4.2.3
ログイン後にコピー
tsc --init
它会自动创建出tsconfig.json文件
ログイン後にコピー
vscode => 终端=> 运行生成任务 => 选择监听 （开启自动监听模式）
ログイン後にコピー
释放出，输出目录，目录地址随意设置
"outDir": "./dist",
ログイン後にコピー
{"compilerOptions": {
/* 基本选项 */
"target": "es5",// 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
"module": "commonjs",// 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
"lib": [],// 指定要包含在编译中的库文件
"allowJs": true,//允许编译 javascript 文件
"checkJs": true,//报告javascript文件中的错误
"jsx": "preserve",//指定jsx代码的生成: 'preserve', 'react-native', or 'react'
"declaration": true,//生成相应的 '.d.ts' 文件
"sourceMap": true, //生成相应的 '.map' 文件
"outFile": "./",//将输出文件合并为一个文件
"outDir": "./",//指定输出目录
"rootDir": "./",//用来控制输出目录结构 --outDir.
"removeComments": true,//删除编译后的所有的注释
"noEmit": true,//不生成输出文件
"importHelpers": true,//从tslib导入辅助工具函数
"isolatedModules": true,//将每个文件做为单独的模块（与 'ts.transpileModule' 类似）.
/* 严格的类型检查选项 */
"strict": true,//启用所有严格类型检查选项
"noImplicitAny": true,//在表达式和声明上有隐含的any类型时报错
"strictNullChecks": true,//启用严格的null检查
"noImplicitThis": true,//当this表达式值为 any 类型的时候，生成一个错误
"alwaysStrict": true,//以严格模式检查每个模块，并在每个文件里加入 'use strict'
/* 额外的检查 */
"noUnusedLocals": true,//有未使用的变量时，抛出错误
"noUnusedParameters": true,//有未使用的参数时，抛出错误
"noImplicitReturns": true,//并不是所有函数里的代码都有返回值时，抛出错误
"noFallthroughCasesInSwitch": true,//报告switch语句的fallthrough错误。
/* 模块解析选项 */
"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//为装饰器提供元数据的支持
}}ログイン後にコピー
注: 一部の学生は、コンピュータの実行に問題があり、 PowerShell 権限
以管理员身份运行 PowerShell，并执行命令set-ExecutionPolicy RemoteSigned将PowerShell的执行策略更改为RemoteSigned
ログイン後にコピー
Number- String
- Boolean
- Object
- Array
- 元ance
- 未定義
- 列挙
- #任意の型
//numberlet a:Number = 10//a = '字符串' 这种赋值不对！！！a =500console.log(a,'a的值')//Stringlet msg:String = '信息'msg = "100"//Booleanlet isShow:Boolean = trueisShow = false//Objectlet obj:Object = {
name:'张三',
age:18}//array //空数组let arr:[] = []// 下面的赋值不对//arr = [1,2,3]//定义普通数组let arr1:Array<String> = ['香蕉','苹果']let arr2:Array<Number> = [1,2,3,4]//指向声明 不赋值let info:String
info= "1111"//undefined 类型let b:undefined//元祖类型 声明N个类型，你要根据你声明的类型进行赋值，一一对应let arr3:[Number,String,Boolean] = [1,'字符串',true]//枚举（有序举例） 默认是从0开始 依次排序。如果想去修改默认值直接赋值即可enum Sex{
man,
woman}//传输方式enum methodInfo{
get='GET',post='Post'}console.log(methodInfo.get,'枚举');console.log(methodInfo.post,'枚举');let type:methodInfo = methodInfo.getconsole.log(type,'type');//大部分的data属性的结果都是来自于接口返回的数据 //任意类型//anylet anyInfo:any
anyInfo = 100anyInfo ='结果'console.log(anyInfo,'anyInfo')ログイン後にコピー
6. 関数の型戻り値なし
function fn(): void {
console.log('无返回值');}console.log(fn(), '执行函数');ログイン後にコピー
戻り値ありの型
function fn1(): String {
return '函数有返回值'}console.log(fn1());ログイン後にコピー
任意の型
function fn2(): any {
return '任意'}console.log(fn2());ログイン後にコピー
パラメータの型を定義
//参数 一定要设定数据类型function fn3(msg: String): void {
console.log(msg, '参数一')}fn3('100')ログイン後にコピー
デフォルトのパラメータ
//默认参数//如果不传递参数，就是走默认，否则就赋值你传递的内容function fn4(params1: String, params2: String = '白居易'): String {
return params2}console.log(fn4('李白'));console.log(fn4('曹操', '大关羽'));ログイン後にコピー
オプションのパラメータ
//可选参数 （传不传参数都可以）function fn5(params1: String, params2?: String): String {
return params1}console.log(fn5('李白'));console.log(fn5('曹操', '大关羽'));ログイン後にコピー
7. クラス
public
///创建一个基本类class Zoo{
//类的作用域 省略了所有的声明方式
//设定一个变量，未赋值会报错，我们可以给其一个undefined类型还可以去构造函数中赋值
// 公有的public （如果不添加这个修饰符，这个属性默认就是公有的）
public name:String | undefined constructor(newName:String){
this.name = newName
console.log(this.name,'父类中的name值');
}
eat(food:String):String{
return `${this.name}喜欢吃${food}`
}}let zoo = new Zoo('狼')zoo.eat('肉')console.log(zoo.name,'zooname');// console.log(zoo,'zoo类实例化的结果');// console.log(zoo.eat('肉'),'执行结果');//类的继承（派生类）//继承了父类，就拥有了父类的所有属性和方法// 如果子类中定义的属性和方法与父类一致，其实就是修改（重置）//子类中constructor(){ super()} 必须调用super() 它可以调用父类中的属性和方法class Tiger extends Zoo{
name:String constructor(a:String){
//super调用父类中的属性和方法
super(a)
console.log(a,'aaaa');
this.name = a
console.log(this.name,'this.name');
}
eat(foods:String):String{
return '这个是一个字符串'
}}let tiger = new Tiger('老虎')tiger.eat('生肉')console.log(tiger.name,'name 属性 也可以用！！！');ログイン後にコピー
protected
//创建一个基本类class Zoo{
//类的作用域 省略了所有的声明方式
//设定一个变量，未赋值会报错，我们可以给其一个undefined类型还可以去构造函数中赋值
//protected 只能在父类 和子类中被调用， 不能在类的外层被调用
protected name:String | undefined constructor(newName:String){
this.name = newName
console.log(this.name,'父类中的name值');
}
eat(food:String):String{
return `${this.name}喜欢吃${food}`
}}let zoo = new Zoo('狼')zoo.eat('肉')console.log(zoo.name,'zooname');// console.log(zoo,'zoo类实例化的结果');// console.log(zoo.eat('肉'),'执行结果');//类的继承（派生类）//继承了父类，就拥有了父类的所有属性和方法// 如果子类中定义的属性和方法与父类一致，其实就是修改（重置）//子类中constructor(){ super()} 必须调用super() 它可以调用父类中的属性和方法class Tiger extends Zoo{
name:String constructor(a:String){
//super调用父类中的属性和方法
super(a)
console.log(a,'aaaa');
this.name = a
console.log(this.name,'this.name');
}
eat(foods:String):String{
return '这个是一个字符串'
}}let tiger = new Tiger('老虎')tiger.eat('生肉')console.log(tiger.name,'name 属性 也可以用！！！');ログイン後にコピー
private
//创建一个基本类class Zoo{
//类的作用域 省略了所有的声明方式
//设定一个变量，未赋值会报错，我们可以给其一个undefined类型还可以去构造函数中赋值
//private 私有属性 只能在自己的类中被调用，不能被子类以及类的外层调用
private name:String | undefined constructor(newName:String){
this.name = newName
console.log(this.name,'父类中的name值');
}
eat(food:String):String{
return `${this.name}喜欢吃${food}`
}}let zoo = new Zoo('狼')zoo.eat('肉')console.log(zoo.name,'zooname');// console.log(zoo,'zoo类实例化的结果');// console.log(zoo.eat('肉'),'执行结果');//类的继承（派生类）//继承了父类，就拥有了父类的所有属性和方法// 如果子类中定义的属性和方法与父类一致，其实就是修改（重置）//子类中constructor(){ super()} 必须调用super() 它可以调用父类中的属性和方法class Tiger extends Zoo{
name:String constructor(a:String){
//super调用父类中的属性和方法
super(a)
console.log(a,'aaaa');
this.name = a
console.log(this.name,'this.name');
}
eat(foods:String):String{
return '这个是一个字符串'
}}let tiger = new Tiger('老虎')tiger.eat('生肉')console.log(tiger.name,'name 属性 也可以用！！！');ログイン後にコピー
静的プロパティと静的メソッド
//创建一个基本的静态类class staticInfo{
//设定一个静态属性
static stName:String ='静态属性111'
//设定一个静态方法
static getTime():any{
return '时间的结果'
}}console.log(staticInfo,'静态类');console.log(staticInfo.stName,'静态属性');console.log(staticInfo.getTime(),'执行你的静态方法');ログイン後にコピー
8. インターフェース)
クラスの通常のデコレータ
//创建一个普通的类的装饰器//装饰器就是一个普通函数function getHttp(classInfo:any):any{
console.log(classInfo,'shui');
//当前函数的参数classInfo 是当前装饰器装饰的类
//在当前函数中做一些逻辑或者说去修改 创建类的属性和方法
classInfo.prototype.nameInfo = 'http客户端'}//创建一个类,如何调用装饰器，通过@去调用装饰器@getHttpclass Http{}let http = new Http()console.log(http,'http类');// console.log(http.nameInfo,'调用');ログイン後にコピー
デコレータのパラメータ受け渡し
//如何给装饰器传递参数 (工厂模式装饰器 ，函数的返回值还是一个函数)function getHttp1(params:any):any{
//装饰器传递参数，两个参数分别是谁
//params它是装饰器的参数 类型不能确定
//classInfo 是类
return (classInfo:any)=>{
console.log(classInfo,'who');
console.log(params,'params');
classInfo.prototype.paramsName = params }}// @getHttp1('张飞')@getHttp1({a:1,b:2})class Http1{}let h1 = new Http1()console.log(h1,'http类');// console.log(h1.paramsName,'http类');ログイン後にコピー
属性デコレータ
-
//属性装饰器//创建一个普通装饰器function getProps(params:any):any{
return (classInfo:any,propName:any)=>{
console.log(params,'aaaaaaaa');
console.log(classInfo,'bbbbbb');
console.log(propName,'ccccccc');
classInfo[propName] = params }}class Http2{
//调用封装好的属性装饰器
@getProps('蔡文姬') httpName:String | undefined}let h2 = new Http2()console.log(h2,'h2类');console.log(h2.httpName);ログイン後にコピー
メソッド デコレータ
//方法装饰器function getMethods(a:any):any{
/*
方法装饰器的四个参数
a 代表的是装饰器传参
b 代表的是类
c 代表的是被装饰的方法名称
d 代表的是方法的一些内置属性
*/
return (b:any,c:any,d:any)=>{
console.log(a,'aaaaaaaa');
console.log(b,'bbbbbb');
console.log(c,'ccccccc');
console.log(d,'ddddddd');
}}class Http3{
//调用封装好的属性装饰器
@getMethods('方法') getUrl():any{
}}let h3 = new Http3()console.log(h3,'h3类');ログイン後にコピー
10. 最新のスキャフォールディングと TS を組み合わせてプロジェクトを作成する
10.8 コンポーネント通信
1. 親から子への受け渡し
親コンポーネント
-
<v-header :name='name' :obj = 'obj' ></v-header>
ログイン後にコピー
#サブコンポーネント
#
import {Prop } from 'vue-property-decorator'
export default class vNav extends Vue{
@Prop() name:any
@Prop() obj:any
}ログイン後にコピー
#サブコンポーネント
親コンポーネント
<v-nav @自定义事件名称='getGift' ></v-nav>
//封装一个获取子组件数据的方法
getGift(e:any):void{
console.log(e,'数据源');
}ログイン後にコピー
##8.9監視 (リスナー)
//浅监听
@Watch('value')
getValue(newVal:any){
console.log(newVal,'新值')
}
//监听对象
//深度监听@Watch()这个方法装饰器，有两个参数，一，监听的对象属性。二、配置对象
@Watch('obj',{
deep:true, //深度
immediate:true //立即立刻
})
getObj(newVal:any){
console.log(newVal,'新')
}ログイン後にコピー
が推奨する学習: 「
vue ビデオ チュートリアル>>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
