TS保姆教程

十五贝利小船长
344 阅读11分钟

TypeScripe

一 . 简介:

以javaScript为基础构建的语言 , 是一个JavaScript的一个超集 . .可以在任何支持JavaScript的平台中执行 , TypeScript扩展了JacaScript并添加了类型.

TS不能被JS解析器直接执行

1. 使用npm 全局安装typescript npm i -g typescript 检测安装成功没输入tsc弹出来一堆东西就是成功了
2.tsc xxxxx.ts 之后回车, 没有弹出东西就代表转译成功

二 .基本类型

类型声明

+  类型声明式TS非常重要的一个特点
+  通过类型声明可以指定TS中变量(参数, 形参)的类型
+  指定类型后 , 当为变量赋值时 , TS编译器会自动检查值是否符合类型声明, 符合则赋值, 否则报错
+  简而言之, 类型声明会给变量设置类型,使得变量只能存储某种类型的值

语法:

//声明变量并指定类型
let 变量:类型
//声明变量并指定类型并赋值
let 变量:类型 = 值
 //可以使用 | 来连接多个类型 (可以限制变量值在某几个值之间)
//b只能赋值'male'或者'fmale'
let b: 'male' | 'fmale'
//这个函数中类型1是指定的参数1的类型, 类型2是指定的参数2的类型,类型3是指定返回值的类型
     function fn(参数1: 类型1, 参数2: 类型2): 类型3{
         ...
     }
类型例子描述
number1,-332.2.5任意数字
string"xixi"任意字符串
booleantrue,false布尔值true或false
字面量其本身限制变量的值就是该字面量的值
any*任意类型
unknown*类型安全的any
void空值(undefined)没有值(或undefined)
never没有值不能是任何值
object{name:'马保国'}任意的js对象
array[1,2,3]任意的js数组
tuple[4,5]元组, TS新增类型,固定长度的数组
enumenum{A,B}枚举, TS中新增的类型
//声明变量不指定类型那默认就是any类型
let d  //此时这个d就是any类型
d = 10
d = 'zifuchuan' //any类型啥都可以给他赋值
//unknown 表示未知类型
let e:unknown;
e = 10;
e = "hello"
e = true;
​
let s:string;
//不报错
s = d ; //any类型这样写不会报错,any可以霍霍别人
//报错
s = e ; //unknown类型这样写会报错, unknown不霍霍别人
if(typeof e === "string"){
    s = e //这样不报错
}
2. 1 as 类型断言(可以用来告诉解析器变量的实际类型)
let e:unknown;
e = 10;
e = "hello"
e = true;
​
let s:string;
//报错
s = e ; //unknown类型这样写会报错, unknown不霍霍别人
if(typeof e === "string"){
    s = e //这样不报错
}
//类型断言写法一
s = e as string;
//类型断言写法二
s = <string>e;
2.2-1 void 用来表示空, 以函数为例, 就表示没有返回值的函数
2.2-2 never表示永远不会返回结果 .
​
function fn(): void{
   //可以是空,可以是 return,可以是return undefined
}
//像这种专门用来报错的函数就永远不会存在返回值
function fn(): never{
   throw new Error("报错了")
}
2.3 object 表示一个js对象
let a: object;
a = {};
a = function (){
    
};
//{}用来指定对象中可以包含哪些属性
// 语法: {属性名:属性值,属性名:属性值}
// 语法: {属性名1:属性值1,属性名2?:属性值2} 在属性名后面加上?,表示属性是可选的
let b:{name:string};
b = {name:'马保国'}
let c:{name:string,age?:number};
//[propName: string]:any  表示任意类型的属性
//[propName: string]:string 表示属性值只能是字符串,以此类推
let d : {name:string,[propName:string]:any}
d = {name:'马保国',age:18,sex"男,...}
     
//设置函数结构的类型声明
 /*
     语法: (形参1:类型, 形参2:类型,...) => 返回值
 */
     let d :(a:number,b:number)=>number
     d = function(n1:number,n2:number):number{
         return n1 + n2
     }
2.4 数组
/*
string[] 表示字符串数组  number[]表示数值数组
*/
let f:number[];  //同意义写法 let f: Array<number>
f = [1,2,3]
​
2.5 元组: 元组就是固定长度的数组
//语法: [类型,类型,...]
let h:[string,string]
h =['hello','马保国']
2.6 枚举
enum Gender {
  male = 0,
  female = 1
}
let i:{name:string,gender:Gender};
i = {
  name:'马保国',
   gender:Gender.male
}
2.7 自定义类型
type myType = 1|2|3|4|5
let k: myType

三 . 编译选项

  • 自动编译文件

    • 编译文件时, 使用-w指令后, ts编辑器会自动监视文件的变化,并在文件发生变化时文件进行重新编辑

    • 示例 :

      • tsc xxx.ts -w

  • 自动编译整个项目

    • 如果直接使用tsc指令, 则可以自动将当前项目下所有ts文件编译为js文件

    • 但是能直接使用tsc命令的前提时, 要先在项目根目录下创建一个ts的配置文件tsconfig.json

    • tsconfig.json是一个JSON文件, 添加配置文件后, 秩序tsc命令即可完成对整个项目的编译

    • 配置选项:

      • include
      • 定义希望被编译文件所在的目录
      • 默认值["**/*"]
      • tsconfig.json 示例:
      • {
  /*
    tsconfig.json是ts编译器的一个配置文件, ts编译器可以根据它的信息来对代码进行编译
      "include"用来指定哪些ts文件需要被编译 路径里两个*代表任意目录,一个*代表任意文件
      "exclude"用来指定哪些ts文件不需要被编译
      小技巧:配置选项中随便输一个错误的值,可选项会通过报错的方式提示你
    */
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    // "./src/Type/**"
  ],
  /*
  compilerOptions 编译器选项
*/
  "compilerOptions": {
    //target 用来指定ts被编译为的ES的版本 es2015其实就是Es6
    "target": "es2015",
    //module 指定要使用的模块化的规范 
    "module": "es2015",
    //  lib 用来指定项目中要使用的库 这个一般情况下不要动,用它的默认值即可
    // "lib": [] 
    //outDir 用来指定编译后文件所在的目录
    "outDir": "./dist",
    // outFile 设置后,所有的全局作用域中的代码会合并到同一个文件中 但是outFile仅支持amd和system模块(用的也不多)
    // "outFile": "./dist/app.js" 
    //allowJs 是否对js文件进行编译, 默认是false
    "allowJs": false,
    //是否检查js代码是否符合语法规范, 默认是false
    "checkJs": false,
    // 是否移除注释, 默认是false 
    "removeComments": false,
    //noEmit不生成编译后的文件, 默认是false 
    "noEmit": false,
    //当有错误时不生成编译后的文件, 默认是false 
    "noEmitOnError": false,
    //是否严格检查的总开关, 默认是false
    "strict": false,
    //alwaysStrict 用来设置编译后的文件是否使用严格模式, 默认false
    "alwaysStrict": false,
    //noImplicitAny 不允许隐式的any类型, 默认false
    "noImplicitAny": false,
    //noImplicitThis不允许不明确类型的this, 默认false
    "noImplicitThis": false,
    //strictNullChecks严格的检查空值, 默认false
    "strictNullChecks": true
  }
}

四 . 使用 webpack打包ts代码

1.npm init -y 初始化项目(作用就是在项目中生成package.json)
2.npm install -D webpack webpack-cli typescript ts-loader 三个依赖包
3. webpack插件 html-webpack-plugin

这个我就不细做笔记了, 用的时候再去看

五.面向对象

面向对象是程序中一个非常重要的思想, 听起来难, 其实面向对象很简单. 简而言之就是程序之中所有的操作都需要通过对象来完成

  • 举例来说

    • 操作浏览器要使用window对象
    • 操作网页要使用document对象
    • 操作控制台要使用console对象

一切操作都要通过对象,也就是所谓的面向对象.在程序中所有的对象都被分成了两个部分数据和功能, 以人为例, 人的姓名,性别,年龄,身高体重等属于数据, 人可以说话,睡觉这些属于人的功能, 数据在对象中被成为属性,而功能就被称为方法, 简而言之, 在程序中万物皆对象.

5 - 1. 类(calss)

要想要面向对象,操作对象,首先便要拥有对象,创建对象,必须要先定义类,所谓类可以理解为对象的模型,程序中可以根据类创建指定类型的对象,举例来说: 可以通过Person类来创建人的对象,通过Dog创建狗的对象,通过Car类来创建汽车的对象,不同的类可以用来创建不同的对象.

5-1-1 class
class 类名 {
    属性名: 类型
    constructor(参数,类型){
        this.属性名 = 参数
    }
方法名(){
    ...
   }
}

对象中主要包含了两个部分
 属性
 方法
 直接定义的属性是实例属性,需要通过对象的实例去访问:
 使用static开头的属性是静态属性(类属性),可以直接通过类去访问到
 calss Person {
   //实例属性
   name:string = '蔡徐坤',
   //类属性
   static age:number = 18
   //定义方法 实例方法
 sayHello(){
   console.log("大家好我是练习时长两年半的个人练习生蔡徐坤")
   }
  //定义方法 类方法
 static sayHi(){
   console.log("大家好我是混元太极门掌门人马保国")
  } 
}
 const per = new Person();
 //实例属性 通过实例去访问
 console.log(per.name)
 //类属性 通过类直接去访问
 console.log(Person.age)
//实例方法调用
 per.sayHello()
//类方法调用
 Person.sayHi()
5-1-2 构造器 constructor
class Dog{
  name:string;
  age:number ;
  //构造函数 也称构造器
  //构造函数会在对象创建时调用
  constructor(name:string,age:number){
    //在实例方法中, this就表示当前的实例
     //在构造函数中当前对象就是当前新建的那个对象
     //可以通过this向当前新建的对象中添加属性
     this.name = name;
     this.age = age;
  }

  bark(){
    alert("汪汪汪")
  }
}
const wangcai = new Dog("旺财",8)
const laifu = new Dog("来福",6)
console.log(laifu)
console.log(wangcai);
5-1-2 继承 extends
// 继承
/*
这里个Animal被称为父类, Dog和Cat被称为子类
使用继承后, 子类将拥有父类所有的方法和属性
通过继承可以将多个类中共有的代码写在一个父类中
 这样只需要写一次即可让所有的子类都同事拥有父类中的属性和方法
 如果希望在子类中添加一些父类中没有的属性或方法直接添加即可
 如果在子类中添加了和父类相同的方法, 则子类方法会覆盖掉父类的方法
 这种子类覆盖掉父类方法的形式, 我们称为方法的重写
*/
(function () {
  class Animal{
    name:string;
    age:number
    constructor(name:string,age:number){
      this.name = name
      this.age = age
    }
    sayHello(){
      console.log("动物在叫")
    }
  }
  class Dog extends Animal{
    //这个就是Dog这个类独有的方法,这时Dog这个类不仅有继承的一些方法和属性并且还新增了一个run方法
     run(){
       console.log(`${this.name}这个狗子在跑,冲冲冲`)
     }
     sayHello(){
      console.log("汪汪汪")
    }
  }
  class Cat extends Animal{
    sayHello(){
      console.log("喵喵喵")
    }
  }
const dog1 = new Dog("旺财",6)
const cat1 = new Cat("小白",6)
console.log(dog1)
dog1.sayHello()
console.log(cat1);
cat1.sayHello()
dog1.run()
//cat.run() 这个run方法只有在Dog这个类上才存在,Cat上是没有的
})()
5-1-3 抽象类 abstract
//抽象类
/*
 以abstract开头的类是抽象类
  抽象类和其他类区别不大, 只是不能用来创建对象
  抽象类就是专门用来被继承的类

  抽象类中可以添加抽象方法
*/
(function () {
  //这时Animal就是一个抽象类只能被继承不能创建对象
  abstract class Animal {
    name: string;
    constructor(name: string) {
      this.name = name
    }
    //定义一个抽象方法
    //抽象方法使用abstract开头, 没有方法体
    //抽象方法只能定义在抽象类中,子类必须对抽象方法进行重写
   abstract sayHello():void
  }
  class Dog extends Animal {
    sayHello() {
      console.log('汪汪汪');
    }
  }
  class Cat extends Animal{
    sayHello() {
      console.log('喵喵喵');
    }
  }
  const dog1 = new Dog('旺财')
  console.log(dog1)
})()
5-1-4 接口 interface
//接口
/*
接口用来定义一个类结构
接口可以在定义类的时候去限制类的结构
接口中所有的属性都不能有实际的值
接口只定义对象的结构,而不考虑实际值
在接口中所有的方法都是抽象方法
*/
(function () {
 type myType = {
   name:string,
   age:number
 }

 //在这定义后,之后用这个类型的obj中这些属性一个不能多一个不能少
 interface myInterface{
   name:string;
   age:number
 }
 //如果有多个就是添加操作,这里的必写属性中,多了一个sex属性
 interface myInterface{
  sex:string
}
 
//接口限制对象
 const obj:myInterface = {
   name:'sss',
   age:111,
   sex:'男'
 }

 interface myInter{
   name:string;
   sayHello():void;
 }
 /*
 定义类时, 可以使类去实现一个接口,
 实现接口就是使类满足接口的要求
 */
class MyClass implements myInter{
  name:string ;
  constructor(name:string){
       this.name = name
  }
  sayHello(){
    console.log('混元太极门掌门人');
    
  }
}
})()
5-1-4 泛型
/*
泛型
function fn(a:any):any{
  return a;
}
在定义函数或者是类时,如果遇到类型不明确就可以使用泛型
*/
function fn<T>(a:T):T{
  return a;
}

//可以直接调用具有泛型的函数
let result1 = fn(10);//这里第一次传进去的是一个数字那这时泛型T就就是指number类型 这种是不指定泛型,TS可以自动对类型进行推断
//总结: 泛型的泛指的是: 宽泛的意思, 定义函数时,类型很广泛,等到函数调用时,再根据用户传的值得类型,推断函数得返回值类型
let result2 =fn<string>('马保国')//指定泛型

// 同样也可以指定多个
function fn2<T,K>(a:T,b:K):T{
    
  console.log(b);
  return a 
}
fn2(123,"马飞飞") // 这样TS会自动推断T是number,K是string. 不指定泛型
fn2<number,string>(123,"马飞飞") // 指定泛型 (建议还是指定一下,这样不容易出错)
avatar
文章
阅读
粉丝