ts---入门篇

悦悦妍妍
126 阅读5分钟

参考链接 www.bilibili.com/video/BV1Xy…

TypeScript中的基本类型

  • 语法
let 变量: 类型;

let 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型{}
  • 类型
类型例子描述
number1, -33, 2.5数字
string'hi', "hi", hi字符串
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类型

// any      any变量可以赋值给任何变量,并且不会有校验提示，这时会污染其他类型变量，所以不推荐给变量申明any类型
// unknown  安全的any, unknown类型变量赋值给其他非unknown或any类型的变量时，会有类型校验提示；可以配合类型断言，告诉变量的实际类型
let a: unknown = 9
a = 88
let b: number;
// 下面行会有提示
// b = a
  • 类型断言
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;


let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;
  • 举例
// void 表示没有返回值 或 返回值可以为空(undefined null)
function fn(): void {
  return undefined;
}

// never 表示没有返回值 且 返回值不能为空
function fn2(): never {
  throw new Error('')
}

// 联合类型
let d: string | number;
d = 12;
d = "50";



// object 不严谨的对象类型
let e: object = {}
e = []

// {} 表示对象中包含有且仅有哪些属性
let f: { name: string }
f = { name: "bwf" }
// 下面行会有提示
// f = { name: "bwf", sex: "男" }
// 可以在属性后加 ?，表示属性可有可无
let g: { name: string, age?: number }
g = { name: "bwf", age: 90 }
g = { name: "xxx" }
// [propName:string]:string 适合对象的属性不太确定的情况
let h: { name: string, [prop: string]: unknown };
h = { name: "bwf", a: 90, b: "88" }
h = { name: "bwf" }


// 给1个变量定义为函数类型，且规定返回值类型和实际调用时的参数类型
let i: (a: string, b: string) => string;
i = function (aa, bb) {
  return aa + bb
}
i("lal", "19")


//  给1个变量定义为数组类型
let j: string[]
j = ["aa", "bb"]

// 只能为 0 || 1两种类型的值 (这种的话外界调用的话不语义化)
let male: 0 | 1
male = 0

// 枚举
enum Gender {
  MALE = 10,
  FEMALE = 20
}
let obj: { name: string, sex: Gender }
obj = { name: "bwf", sex: Gender.FEMALE }
// true
console.log(obj.sex === Gender.FEMALE);
// 20
console.log(obj.sex);

// 类型的别名 
type myType = 1 | 2 | 3
let k: myType
k = 2
let l: myType
// 下面行会有提示
// l = 6

编译ts文件配置

{
  /* 
    tsconfig.json 是ts编译器的配置文件，ts编译器可以更具它的信息来对代码进行编译
    "include" 用来表示指定哪些ts文件需要被编译
    路径；
        *表示任意文件，
        **表示任意目录
    "exclude" 用来表示不需要被编译的文件目录
            默认值：{"node_modules", "bower_components", "jspm_packages"}
*/
  "include": [
    "./src/**/*"
  ],
  // "exclude": [
  //     "./src/hello/**/*"
  // ]
  //compilerOptions 编译器的选项 
  "compilerOptions": {
    //target 用来指定ts被编译为ES的版本
    //'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'.
    "target": "ES2015",
    //module 指定要使用的模块化的规范
    //'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
    "module": "es2015",
    //outDir 用来指定编译后文件所在的目录
    "outDir": "./dist",
    //outFile 将代码合并为一个文件
    // "outFile": "./dist/app.js",
    // 是否对js文件进行编译，默认是false
    "allowJs": true,
    // 是否检查js文件代码是否符合ts语法规范，默认值是false
    "checkJs": true,
    // 是否移除注释
    "removeComments": true,
    // 不生成编译后的文件
    "noEmit": false,
    // 当有错误时不生成编译文件
    "noEmitOnError": true,
    // 所有严格检查的总开关
    "strict": true,
    // 用来设置编译后的文件是否使用严格模式，默认是false
    "alwaysStrict": true,
    // 不允许隐式的any类型
    "noImplicitAny": true,
    // 不允许不明确类型的this
    "noImplicitThis": true,
    // 严格检查空值
    "strictNullChecks": true
  }
}

类

封装

  • 静态属性（static）：

    • 声明为static的属性或方法不再属于实例，而是属于类的属性；

  • 只读属性（readonly）：

    • 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改

  • TS中属性具有三种修饰符：

    • public（默认值），可以在类、子类和对象中修改
    • protected ，可以在类、子类中修改
    • private ，只允许可以在本类中访问

属性存取器(属性私有化，方法公有化)

class Person{

    private _name: string;

    constructor(name: string){
        this._name = name;
    }

    get name(){
        return this._name;
    }

    set name(name: string){
        this._name = name;
    }

}

const p1 = new Person('xxx');
// 实际通过调用setter方法修改name属性 
p1.name = 'bwf'; 
// 实际通过调用getter方法读取name属性
console.log(p1.name);

抽象类(它只能被其他类所继承不能用来创建实例)

// 抽象类中可以含有含有抽象方法 和 非抽象方法；但是抽象方法一定要被子类实现
abstract class Animal{
  abstract run(): void;
  bark(){
      console.log('动物在叫~');
  }
}

class Dog extends Animals{
  run(){
      console.log('狗在跑~');
  }
}

接口

  • 注意：接口中的所有方法都是抽象方法；
  • 示例
interface Person{
    name: string;
    age:number
}

function fn(per: Person){
  
}

fn({name:'孙悟空', age:18});




interface Animal {
  sex: string
  say(): void
}

interface Dog {
  name: string;
  age: number
}

class Test implements Animal, Dog {
  name: string;
  age: number;
  sex: string;

  constructor(name: string, age: number, sex: string) {
    this.name = name
    this.age = age
    this.sex = sex
  }
  say(): void {
    console.log(`${this.name}say`);

  }

}

泛型

  • 使用场景
定义函数或类时 类型不明确就可以使用泛型
  • 举例
function fn<T, K>(a: T, b: K): T {
  return a;
}
fn<string, number>("bb", 12)




interface Inter {
  length: number
}

function fn(a: Inter): void {
  console.log(a);
}
fn("lala")
fn({ length: 10 })



class Person<T>{
  name: T
  constructor(name: T) {
    this.name = name
  }
}
let p = new Person<string>("haha")
avatar
文章
阅读
粉丝