TS基本语法

TypeScript 开发环境搭建

npm 全局下载 typescript

npm i -g typescript

基本类型

• 类型声明

  • 类型声明是TS非常重要的一个特点

  • 通过类型声明可以指定TS中变量(参数、形参)的类型

  • 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

  • 语法:

    let 变量: 类型;
    let 变量: 类型 = 值;
    functionfn(参数: 类型, 参数: 类型): 类型{
        ...
    }
    

• 自动类型判断

  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
  • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

• 类型:

  类型	例子	描述
  number	1, -33, 2.5	任意数字
  string	‘hi’, “hi”, hi	任意字符串
  boolean	true, false	布尔值true或false
  字面量	其本身	限制变量的值就是该字面量的值
  any	*	任意类型
  unknown	*	类型安全的any
  void	空值（undefined）	没有值（或undefined）
  never	没有值	不能是任何值
  object	{name: ‘孙悟空’}	任意的JS对象
  array	[1,2,3]	任意JS数组
  tuple	[4,5]	元素，TS新增类型，固定长度数组
  enum	enum{A, B}	枚举，TS中新增类型

• number

  let decimal: number = 6
  let hex: number = 0xff00d
  let binary: number = 0b1010
  let octal: number = 0o744
  let big: bi
  

• boolean

  let isDone: boolean = false
  

• string

  let color: string = "blue"
  color = 'red'
  
  let fullName: string = `Bob Bobbington`
  let age: number = 37
  let sentence: string = `He11o, my name is ${fullName}`
  
  `I'll be ${age + 1} years old next month.`;
  

• 字面量

  • 也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围

    let color: 'red' | 'blue' | 'black'
    let num: 1 | 2 | 3 | 4 | 5
    

• any

  let d: any = 4
  d = 'hello'
  d = true
  

• unknown

  let notSure: unknown = 4
  notsure = 'hello'
  

• void

  let unusable: void = undefined
  

• never

  function error(message: string): never {
      throw new Error(message)
  }
  

• object（没啥用）

  let obj: object = {}
  

• array

  let list: number[] = [1, 2, 3]
  let list: Array<number> = [1, 2, 3];
  

• tuple

  let x: [string, number]
  x = ["he11o", 10]
  

• enum

  enum Color {
      Red,
      Green,
      Blue
  }
  let c: Color = Color.Green;
  
  enum Color {
      Red = 1,
      Green,
      Blue
  }
  let c: Color = Color.Green;
  
  enum Color {
      Red = 1,
      Green = 2,
      Blue = 4
  }
  let c: Color = Color.Green;
  

• 类型断言

  • 有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式:

    • 第一种

      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
      

例子：

let a: number;  // number尽量写小写

a = 10;
// a = 'hello' 报错只能为数字

let b: string;

b = 'hello'
// b = 111 报错只能为字符串

let c: boolean = true;

// 如果变量的声明和赋值是同时进行的，TS 可以自动对交量进行类型检测
// let c = true;
// c = 123  也会报错

// JS 中的西数是不考店参数的类型和个数的
function sum1(a, b) {
    return a + b;
}

console.log(sum1(123, 456));  // 579
console.log(sum1(123, '456')); // 123456


function sum2(a: number, b:number) {
    return a + b;
}

console.log(sum2(123, 456));  // 579
// console.log(sum2(123));  // 报错传少了
// console.log(sum2(123, 456, 789));  // 报错传多了
// console.log(sum2(123, '456')); // 报错不是数字类型

function sum3(a: number, b:number):number {  // 返回值为number
    // return a + 'Hello';  报错返回值不是数字类型
    return a + b;
}

// 把文件当作一个模块,在每个文件至少有一个导出，比如在末尾加上一下代码
export default void 0

// 也可以直接使用字面量进行类型声明
let a: 10
a = 10
// a = 20  报错因为赋值不是10

let b: "male" | "female"
b = "male"
b = "female"
// b = "hello"  报错因为赋值不是 male 或者 female

let c: boolean | string
c = true
c = "hello"
// c = 123  报错因为赋值不是 布尔类型 或者 字符串类型

// any 表示的是任意类型，一个变量设置类型为any 后相当于对该变量关闭了TS 的类型检测
// 使用TS时，不建议使用any美型
// let d: any

// 声明变量如果不指定类型，则TS 解析器会自动判断变量的类型为any (隐式的any )
let d
d = 10
d = 'hello'
d = true

// unknown 表示未知类型的值
let e: unknown
e = 10
e = 'hello'
e = true

let s: string
// d 的类型是any，他可以赋值给任意变量
// s = d

e = 'hello'

// unknown 实际上就是一个类型安全的any
// unknown 类型的变量，不能直接赋值给其他交量
// s = e  

if(typeof e === 'string') {  // 判断赋值类型
    s = e  // 不报错
}

// 类型断言，可以用来告诉解析器变量的实际类型
/*
*  语法：
*       变量 as 类型
*       <类型>变量
*
*/
s = e as string
s = <string>e

// void 用来表示空，以西数为例，就表示没有返回值的西数
function fn(): void{
    // return undefined
}

// never 表示永远不会返回结果
function fn2(): never{
    throw new Error('报错了！')
}


// 把文件当作一个模块,在每个文件至少有一个导出，比如在末尾加上一下代码
export default void 0

// object 表示一个js对象
let a: object;  // 不实用
// a = {}
// a = function(){}  这两都可以

// {} 用来指定对象中可以包含哪些属性
let b1: {name: string}
// b1 = {name: 1121}  报错name要为字符串类型
// b1 = {name: '李四', age: 123}  报错name要为字符串类型且只能有一个name属性
b1 = {name: '李四'}

// 语法:{属性名: 属性值，属性名: 属性值}
// 在属性名后边加上?，表示属性是可选的
let b2: {name: string, age?: number}
b2 = {name: '王五', age: 112}
b2 = {name: '王五'}

// [propName: string]: any 表示任意类型的属性
let c: {name: string, [propName: string]: any}
c = {name: '甲', age: 111, page: true}

/*
*   设置函数结构的类型击明:
*       语法:(形参: 美型，形参: 美型...) => 返回值
*/
let d: (a:number, b: number)=>number
// d = function(n1: string, n2: string): number{
//     return 10  就算返回值的类型相同，参数类型不同也会报错
// }

/*
*   数组的类型声明:
*       类型[]
*       Array<类型>
*/
// string[] 表示宁符串数组
let e: string[]
// e = ['a', 'b', 'c', 1323] 报错类型要字符串
e = ['a', 'b', 'c']

// number[] 表示数字数组
let f: number[]

let g: Array<number>
// g = ['a', 'b', 'c', 1323] 报错类型要数字
g = [1, 2, 3]

/*
*   元组，元组就是固定长度的数组
*       语法：[类型, 类型, 类型]
*/
let h: [string, string]
// h = ['hello', 123, 'hello'] 报错数组长度为2，第二类型为字符串
h = ['hello', 'hello']

/*
*  enum 枚举
*
*/
enum Gender{
    Male = 0,
    Female = 1
}

let i: {name: string, gender: Gender}
i = {
    name: '甲乙丙丁',
    gender: Gender.Male
}

i.gender == Gender.Male ? console.log('男的') : console.log('女的')

// &表示同时
let j1: {name: string} & {age: number}
let j2: {name: string} & {age?: number}
j1 = {name: 'TS', age: 123}
// j1 = {name: 'TS'} 报错
j2 = {name: 'TS'}  // 不报错

// 类型的别名
type myType = 1 | 2 | 3 | 4 | 5
let k: myType
let l: myType
let m: myType

k = 5

// 把文件当作一个模块,在每个文件至少有一个导出，比如在末尾加上一下代码
export default void 0

编译选项

• 自动编译文件

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

  • 示例：

    tsc xxx.ts -w
    

• 自动编译整个项目

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

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

  • tsconfig.ison是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译

  • 配置选项：

    • include

      • 定义希望被编译文件所在的目录

      • 默认值:["** / *“]

      • 示例：

        "include":["src/**/*", "tests/**/*"]
        

        上述示例中，所有src目录和tests目录下的文件都会被编译

    • exclude

      • 定义需要排除在外的目录

      • 默认值:[“node_modules”，"bower_components”,“jspm_packages”]

      • 示例：

        "exclude": ["./scr/hello/**/*"]
        

        上述示例中，src下hello目录下的文件都不会被编译

    • extends

      • 定义被继承的配置文件

      • 示例：

        "exclude": "./config/base"
        

        上述示例中，当前配置文件中会自动包含config目录下base.ison中的所有配置信息

  • files

    • 指定被编译文件的列表，只有需要编译的文件少时才会用到

    • 示例：

      "files": [
          "core.ts",
          "sys.ts",
          "types.ts",
          "scanner.ts",
          "parser.ts",
          ...
      ]
      

      列表中的文件都会被TS编译器所编译

  • compilerOptions

    • 编译选项是配置文件中非常重要也比较复杂的配置选项

    • 在compilerOptions中包含多个子选项，用来完成对编译的配置

      • 项目选项

        • target

          • 设置ts代码编译的目标版本

          • 可选值

            • ES3(默认) 、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

          • 示例：

            "compilerOptions": {
                "target": "ES6"
            }
            

            如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码

        • lib

          • 指定代码运行时所包含的库 (宿主环境)

          • 可选值:

            • ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost …

          • 示例：

            "compilerOptions": {
                "target": "ES6",
                "lib": ["ES6", "DOM"],
                "outDir": "dist",
                "outFile": "dist/aa.js"
            }
            

        • module

          • 设置编译后代码使用的模块化系统

          • 可选值：

            • CommonJS、UMD、AMD、System、ES2020、ESNext、None

          • 示例：

            "compilerOption": {
                "module": "CommonJS"
            }
            

        • outDir

          • 编译后文件的所在目录

          • 默认情况下，编译后的is文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置

            "compilerOptions": {
                "outDir": "dist"
            }
            

        • outFile

          • 将所有的文件编译为一个js文件

          • 默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中

          • 示例：

            "compilerOptions": {
                "outFile": "dist/app.js"
            }
            

        • rootDir

          • 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录

          • 示例：

            "compilerOptions": {
                "rootDir": "./src"
            }
            

        • allowJs

          • 是否对js文件编译

        • checkJs

          • 是否对js文件进行检查

          • 示例：

            "compilerOptions": {
                "allowJs": true,
                "checkJs": true
            }
            

        • removeComments

          • 是否删除注释
          • 默认值：false

        • noEmit

          • 不对代码进行编译
          • 默认值：false

        • sourceMap

          • 是否生成sourceMap
          • 默认值：false

      • 严格检查

        • strict
          • 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
        • alwaysStrict
          • 总是以严格模式对代码进行编译
        • noImplicitAny
          • 禁止隐式的any类型
        • noImplicitThis
          • 禁止类型不明确的this
        • strictBindCallApply
          • 严格检查bind、call和apply的参数列表
        • strictFunctionTypes
          • 严格检查函数的类型
        • strictNullChecks
          • 严格的空值检查
        • strictPropertyInitialization
          • 严格检查属性是否初始化

      • 额外检查

        • noFallthroughCasesInSwitch
          • 检查switch语句包含正确的break
        • noImplicitReturns
          • 检查函数没有隐式的返回值
        • noUnusedLocals
          • 检查未使用的局部变量
        • noUnusedParameters
          • 检查未使用的参数

      • 高级

        • allowUnreachableCode
          • 检查不可达代码
          • 可选值：
            • true，忽略不可达代码
            • false，不可达代码将引起错误
        • noEmitOnError
          • 有错误的情况下不进行编译
          • 默认值：false

面向对象

简而言之，面向对象就是程序之中所有的操作都需要通过对象来完成。
举例来说，

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

一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

在程序中所有的对象都被分成了两个部分，即数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象

类的简介

要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。
要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象。
举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。

定义类：

class 类名{
	属性名: 类型
}

例子：

// 使用cLass 关键字来定义一个类
/*
*   对系中主要包含了两个部分
*       属性
*       方法
*/
class Person {

    /*
    *   直接定义的属性是实例属性，需要通过对象的实例去访问:
    *      const per = new Person()
    *      per.name
    * 
    *   使用static 开头的属性是静态属性(类属性)，可以直接通过类去访问
    *       Person.age
    * 
    *   readonLy开头的属性表示一个只读的属性无法修改
    */

    // 定义实例属性
    name: string = 'TS'

    readonly name2: string = 'TTT'

    // 在属性前使用static 关键字可以定义类属性(静态属性)
    static readonly age: number = 11
    
    // 定义方法
    /*
    *   如果方法以static 开头则方法就是类方法，可以直接通过类去调用
    */
    static sayHello() {
        console.log('Hello');
        
    }
    }

const per = new Person()

console.log(per);
console.log(per.name);
// console.log(per.age); 报错age为静态属性
console.log(Person.age);

console.log(per.name2);
// per.name2 = 'tom' 报错
console.log(per.name2); // tom

Person.sayHello()

构造函数和this

构造函数:

class 类名{
	constructor() {
		...
	}
}

例子：

class Dog {

    /*
    *   
    */

    name: string
    age: number

    // constructor 被称为构造函数
    // 构造函数会在对象创建时调用
    constructor(name: string, age: number) {
        console.log('构造函数执行了');
        // 在实例方法中，this就表示当前的实例
        // 在构造西数中当前对象就是当前新建的那个对象
        // 可以通过this 向新建的对象中添加属性
        console.log(this);
        this.name = name
        this.age = age
        
        
    }

    bark() {
        console.log('www');
        // 在方法中可以通过this来表示当前调用方法的对象
        console.log(this);
        
    }
}

const dog = new Dog('小白', 5)
const dog2 = new Dog('小黑', 8)

console.log(dog);
console.log(dog2);

dog.bark()
dog2.bark()

继承

例子：

(function() {
    // 定义一个Animal的类
    
    class Animal{
        name: string
        age: number

        constructor(name:string, age:number) {
            this.name = name
            this.age = age
        }

        sayHello() {
            console.log('动物在叫');
        }
    }
    /* Dog extends Animal
    *   此时，Animal被称为父类，Dog 被称为子类
    *   使用继承后，子类将会拥有父类所有的方法和属性
    *   通过继承可以将多个类中共有的代码写在一个父类中,*
    *       这样只需要写一次即可让所有的子类都同时拥有父类中的属性
    *       如果希望在子类中添加一些父类中没有的属性或方法直接加就行
    *   如果在子类中添加了和父类相同的方法， 则子类方法会覆盖掉父类方法
    *       这种子类覆盖掉父类方法的形式，我们称为方法的重写
    */

    // 定义一个狗的类
    //og类继承Animal类
    class Dog extends Animal{

        run() {
            console.log(this.name+'在跑');
        }
    }
    // 定义一个猫的类
    class Cat extends Animal{

        sayHello() {
            console.log('mmm');
        }
    }

    const dog = new Dog('小白', 5)
    console.log(dog);
    dog.run()
    
    const cat = new Cat('小咪', 8)
    console.log(cat);
    cat.sayHello()
    
})()

super

示例：

(function() {
    class Animal{
        name: string

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

        sayHello(){
        console.log('动物叫');
            
        }
    }

    class Cat extends Animal{
        age: number
        constructor(name:string, age:number) {
            // 如果子类中写了构造函数，在子类构造函数中必须对父类的构造函数进行调用
            super(name) // 调用父类的构造函数
            this.age = age
        }
        sayHello() {
            // 在类的方法中 super就表示当前类的父类
            super.sayHello()
        }
    }

    const cat = new Cat('小咪', 2) 

})()

super表示父类

抽象类

示例：

(function() {
    /*
    *   以abstract开头的类是抽象类
    *       抽象类和其他类区别不大，只是不能用来创建对象
    *       抽象类就是专门用来被继承的类
    * 
    *       抽象类中可以添加抽象方法
    */
    abstract class Animal{
        name: string

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

        // 定义一个抽象方法
        // 抽象方法使用abstract开头，没有方法体
        // 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
        abstract sayHello():void
    }

    class Cat extends Animal{
        sayHello() {
            console.log('mmm');
        }
    }

    const cat = new Cat('小咪') 

    // const animl = new Animal() 报错不能创建抽象类

})()

接口

接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法，同时接口也可以当成类型声明去使用

示例：

(function() {


    // 描述一个对象的类型
    type myType = {
        name: string,
        age: number
    }

    // 重复声明报错
    // type myType = {
    //     name: string,
    //     age: number
    // }

    /*
    *
    *   接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
    *       同时接口也可以当成类型声明去使用
    * 
    */

    interface myInterface {
        name: string,
        age: number
    }

    interface myInterface {
        gender: string
    }

    const obj: myInterface = {
        name: 'sss',
        age: 111,
        gender: '男'
        // g: 22  报错不能多加也不能少加
    }


    /*
    *   解控可以在定义类的时候去限制类的结构
    *       接口中的所有的属性都不能有实际的值
    *       接口只定义对象的结构，而不考虑实际值
    *           在接口中所有的方法都是抽象方法
    */
    interface myInter{
        name: string
        sayHello(): void
    }

    /*
    *   定义类时，可以使类去实现一个接口
    *       实现接口就是使类满足接口的要求
    * */
    class MyClass implements myInter {
        name: string

        constructor(name:string) {
            this.name = name
        }
        sayHello(): void {
            console.log('mmm');
        }
    }
})()

接口其实就是定义了一个规范，对类作出限制

属性的封装

示例：

(function(){

    // 定义一个表示人的类
    class Person {
        // TS 可以在属性前添加属性的修饰符
        /*
        *
        *   public  修饰的属性可以在任意位置访问（修改）默认值
        *   private 私有属性，私有属性只能在类内部进行访问（修改）
        *       - 通过在类中添加方法使得私有属性可以被外部访问
        *   protected 受保护的属性，只能在当前类和当前子类中访问（修改）
        * 
        */
        private name: string
        private age: number

        constructor(name:string, age:number) {
            this.name = name
            this.age = age
        }

        /*
        *
        *   getter 方法用来读取属性
        *   setter 方法用来设置属性
        *       -它们被称为属性的存放器
        * 
        */

        // 定义方法，用来获取name属性
        getName(){
            return this.name
        }
        // 定义方法，用来设置name属性
        setName(val:string) {
            this.name = val
        }
        // 定义方法，用来获取age属性
        getAge(){
            return this.age
        }
        // 定义方法，用来设置age属性
        setAge(val:number) {
            if(val >= 0) {
                this.age = val
            }
        }

        
        // TS中设置getter 方法的方式
        get _name(){
            return this.name
        }
        
        // TS中设置setter 方法的方式
        set _name(val:string){
            this.name = val
        }
        
        // TS中设置getter 方法的方式
        get _age(){
            return this.age
        }
        
        // TS中设置setter 方法的方式
        set _age(val:number){
            if(val >= 0) {
                this.age = val
            }
        }


    }

    const xiaoming = new Person('小明', 12)
    console.log(xiaoming);

    /*
    *
    *   现在属性是在对象中设置的，属性可以任意的被修改
    *       属性可以任意被修改将会导致对象中的数据变得非常不安全
    * 
    * */
//    xiaoming.name = '小红'
//    xiaoming.age = -88
//    console.log(xiaoming);  // 报错私有属性private不能外部修改

    console.log(xiaoming.getName());  // 小明

    xiaoming.setName('猪八戒')
    console.log(xiaoming.getName());  // 猪八戒

    xiaoming.setAge(-88)
    console.log(xiaoming.getAge());  // 12

    console.log(xiaoming._name); // 猪八戒
    xiaoming._name = '小明'
    console.log(xiaoming._name); // 小明
   
    xiaoming._age = -88
    console.log(xiaoming._age); // 12

    class A{
        // private num: number
        protected num: number

        constructor(num:number){
            this.num = num
        }
    }

    class B extends A{
        test(){
            console.log(this.num); // 若继承的属性是私有属性private则不能使用
        }
    }

    const b = new B(123)
    // B.num = 33 实例访问不了

    class C{

        // 可以直接将属性定义在构造函数中
        constructor(public name: string, public age: number) {
        }
    }

    const c = new C('C', 11)

})()

泛型

示例：

// function fn(a: any):any{
//     return a
// }

/*
*
*   在定义函数或是类时，如果遇到类型不明确就可以使用泛型
*
*/

function fn<T>(a: T): T{
    return a
}

// 可以直接调用具有泛型的函数
let result = fn(10)  // 不指定泛型，TS可以自动对类型进行推断
let result2 = fn<string>('hello')  // 指定泛型

// 泛型可以同时指定多个
function fn2<T, K>(a: T, b: K):T{
    console.log(b);
    return a
}

fn2(123, 'xxx')
fn2<number, string>(123, 'xxx')

interface Inter{
    length: number
}

// T extends Intern 表示泛型T必须是Intern实现类（子类）
function fn3<T extends Inter>(a: T): number{
    return a.length
}

fn3('123') // 必须要传一个有T继承Intern中的length属性 string自带length属性
// fn3(123)   报错
fn3({length: 2})  // 不报错

class MyClass<T>{
    name: T
    constructor(name: T){
        this.name = name
    }
}

const mc = new MyClass<string>('xxx')