typescript学习笔记（一）

奋斗蚂蚁的逆袭之路
79 阅读5分钟

typescript基础学习

1. typescript的环境搭建
  1. 在node.js 官网下载node.js 的稳定版，最新版本也可以，
  2. 安装好node后再 安装 typescript npm install -g typescript
  3. 创建一个.ts结尾的文件
  4. 在命令行运行 tsc xxx.ts
2.typescript的基础数据类型
类型例子描述
数字 number1，12.14任意数字
布尔值 boolean布尔值true和false
字符串 string任意字符串
字面量其本身申明时的类型
any任意类型
unknown任意类型
void空值没有值（或是Undefined）
Never没有值不能是任意值
object{name:'tom'}任意js对象
数组 array任意数组
元组 Tuple[4,5]元素，TS新增类型，固定长度数数组
枚举enumenum[4,1]枚举，TS刑新增类型
3.typescript的类型申明

  1. 直接字面量的形式

    let a: 10;
let b:false

  2. 联合类型：

    let sex: "male" | "female";
let c: boolean | string;
c = true;
c = "hello"
c = 10 //c 赋值10就会报错

  3. any类型

    any在typescript中可以赋值任意类型 在类型不确定的情况下可以使用any

    let notSure: any = 4;
notSure = "hello";
notSure = true;
//any类型可以赋值任何类型，
let anyStr: any;
anyStr = "hello";
anyStr = false;
anyStr = 10;
let s: number;
s = anyStr;

  4. unknown类型

    unknown类型可以是任意类型的值，

    let e: unknown;
e = 'hello';
e = true;
let a: string;
//将e赋值个a会报错
a = e;

  5. Void和Never一般用于在函数没有返回值的情况下。

    1. nerver
    function fn(): never {
  throw new error('error')
}

    1. void 返回一个空值

      function fu2(): void{
}

  6. obj类型

    1. 用来定义对象的结构体

      let obj: { name: string };
obj = { name: "tom"} //这样个给obj赋值可以
//但是
obj = {name:"zhangsan",age:18}//这样就会报错，表示age:18不在obj：{name:string}类型中

//在属性后面加一个？表示可以选的
let obj: { name: string, age?: number };
obj = {
  name: "tom"
}
          
//如果想添加其他的类型可以这样定义,name属性是必须要有的。如果没有name属性就会报错
 let obj: { name: string, [proName:string]:any};
obj = {
  name: "tom",
  age: 18,
  flag:true
}

    2. 用来定义函数的结构体

      let obj2: (x: number, y: number) => number; //定义结构
obj2 = function (n1:number, n2:number,) { 
  return n1 + n2
}
//如果结构体不符合就会报错
obj2= function(n1:string,n2:number){  //这就会报错
    return n1+n2 
}

  7. 数组array

    申明数组是需要有数组类型

    //定义数组
let arr: string[] = ['hello', 'string'] //只能是字符串
let arr2: Array<number>;
arr2 = [1,45,41] //数组中只能存放数字

  8. 元组 Tuple（固定长度的数组）

    let arr3: [string, string]; //定义一个元组
arr3 = ['hello', 'string'] //数组里面只能存放两个字符串，多了不行，其他类型也不行
arr3 = ['hello',12] //报错

  9. 枚举类型 enum,多个值从中选一个值的场景

    //定义枚举
enum Gender {
  male,
  female
}

let person: { name: string, gender: Gender }
person = {name:'tom',gender:Gender.male}

  10. 类型断言

    1. 类型断言的使用

      a = e as string
a = <string>e;
4.tsconfig.josn的常用配置
{
   
    "include": [ //需要编译的文件
        "./src/**/*"
    ],
    "exclude": [ //不需要编译的ts文件
      "./util/**/*"
    ],
    "compilerOptions": {  //编译器的选项
         "target": "ES2015",  //用来指定ts被编译为ES的版本
         "module": "ES2015" , //指定使用的模块化的规则 ，例如es2015,common.js等
         //"lib": [] //一般不用，可选的参数是：'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext', 'dom', 'dom.iterable'....
         "outDir": "./dist", //ts编译后的文件目录
         "outFile": "./dist/app.js",   //全局作用域的文件合并为一个js文件
         "allowJs": false, //是否编译js文件
         "checkJs": false, //检查js文件语法规范
         "removeComments": false, //删除所有注释，除了以 /!*开头的版权信息
         "noEmit": false, //不生成编译文件
         "noEmitOnError": false, //报错时不生编译文件。
         "alwaysStrict": false, //编译后的文件是否我验证模式"use strict"
         "noImplicitAny": true, //不允许有隐式的any类型
         "noImplicitThis": true,//检查不明确的this
         "strictNullChecks": true, //严格检查空值
         "strict": true,//启用所有严格类型检查选项。
                          //启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict， ///--strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。

    }
}
5.typescript的类

  1. 使用关键字class 来创建一个对象，使用new 实例化一个对象

    class Dog {
  // 对象的属性
  name: string
  age: number
  constructor(name: string, age: number) {  //使用构成函数实现传参
    this.name = name;
    this.age = age
  }
  //定义一个方法
  greet() {
    return this.name
  }

}

//实例化一个对象
const xb = new Dog('小白', 2)

  2. 类的继承 extends 和super 关键字

    // 一个动物类
class Animal {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  //定义方法
  say() {
    console.log("动物叫~")
  }
}

class Dog extends Animal {
  color: string
  constructor(name: string, age: number, color: string,) {
    super(name, age)
    this.color = color
  }
  say() {
    console.log('旺~旺~旺')
  }
  playFrisbee() { //自已特有的方法
    console.log("可以玩飞盘")
  }
}
const xiaobai = new Dog('小白', 4, '斑点狗');

class Cat extends Animal {
  say() {
    console.log('喵喵喵！')
  }
}

const miao = new Cat('喵', 3);

  3. 抽象类 abstract开头定义的类就抽象类

    // 一个动物抽象类型
abstract class Animal {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  //定义方法
  say() {
    console.log("动物叫~")
  }
}

//如果用Animal创建实例就会报错
const snake = new Animal('小蛇',1)  //报错

  4. 抽象方法实例对象在继承抽象类时，必须要实现抽象法法

    // 一个动物抽象类型
abstract class Animal {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  //定义方法
  say() {
    console.log("动物叫~")
  }
  //抽象方法
  abstract sayHillo(): void
}


class Dog extends Animal {
  color: string
  constructor(name: string, age: number, color: string,) {
    super(name, age)
    this.color = color
  }
  //必须要实现抽象类的抽象方法
  sayHillo(): void {
    console.log('抽象类的方法')
  }
  say() {
    console.log('旺~旺~旺')
  }
  playFrisbee() { //自已特有的方法
    console.log("可以玩飞盘")
  }
}
const xiaobai = new Dog('小白', 4, '斑点狗');
6.接口 (用来定义一个类的结构，定义一个类中包含了那些属性和方法，同时还可以当类型声明来使用)

定义接口中的所有属性不能有实际的值，所有的方方法都是抽象方法,

//定义一个接口
interface myInterface {
  name: string,
  age: number
}

//可以定义多个 接口

const obj: myInterface = {  //申明 myInterface 中必须包含name,age属性
  name: 'zhangsna',
  age: 18
}

可以通过类实现一个接口

interface myInter {
      name: string,
      play(): void
    }

    class Animal implements myInter {
      name: string
      constructor(name: string) {
        this.name = name
      }
      play(): void {
        console.log('say hello')
      }
    }
7.泛型(泛型类可以是多个，也可以是一个接口或类)
 //typescript的泛型 同时定义多个泛型
  function fn2<T, K>(arg1: T, arg2: K): void {
    console.log(arg1)
    console.log(arg2)
  }
  fn2<string, number>('hllo', 124)

//泛型类型是一个接口
  interface num {
    length: number
  }

  function fn3<T extends num>(arg: T): number {
    return arg.length
  }

  fn3('hello');
avatar
文章
阅读
粉丝