TS入门个人笔记

简单来说TS就是JS的超集

学习过程

        一、终端下载Ts编译器：npm i -g typescript

        二、终端查看Ts：tsc

        三、使用编译器将Ts文件编译成为js文件使用：tsc 文件名.ts

1、给变量、函数参数、函数返回值确定类型、未来给变量、函数参数、函数返回值赋值必须是同一类型的值。

let a :number = 7||let a =7;    
a='n'       //报错  变量类型错误
​
function sum(num1:number,num2:number):number{
    return num1+num2
}
sum(123,'456')  //报错  函数参数类型错误
​
let fun :(a:number,b:number)=>number
fun = function(n1,n2){
  return n1+n2
}

2、TS新增类型

类型	例子	描述
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型，相当于关闭TS的类型检测,能够直接赋值给其他类型的变量(尽量少用)
unknown	*	未知类型，不能直接赋值给其他类型的变量 要赋值先进行类型判断(尽量多用)
void	undefined	没有值或者undefined(函数没有返回值)
never	没有值	不能是任何值
tuple	[x,y]	元组就是固定长度的数组
enum	enum{x,y}	枚举

*字面量

let a :10;      //限制c的值只能为10  类似常量的作用
a=11;    //报错  
​
let d :Number|String        //限制d的类型为数字和字符串
d=10
d='10'
d=true   //报错

*unknown 该类型的变量必须赋已知类型

let u:unknown
let s :String
if(typeof s === "string"){
    u = s
}

​
/*
类型断言:用来告诉解析器变量的实际类型   
*/

u = s as String     
u =<String>s

*void 用来表示空 表示没有返回值的函数

function fn():void{
    return;||return undefined||return null
}

*never 永远不会有返回结果 就为了报错 报错就没有返回值

function fn2():never{
    throw new Error('报错了！')
}

*object 给对象属性设置类型以及是否必需

let obj : { name: string, age?: Number }        //?表示该属性是可选的
obj = { name: '猪八戒',age:23}
​
let person :{[propName:string]:string}      //表示该对象可以有任意个属性 属性值限制为字符串类型
person={hight:177,weight:65,name:'张三'}

*array 给数组元素限制类型

let arr :string[]  ||   let arr:Array<string>
arr =['1','2',3]        //报错 将3作为字符串数组中的元素

*tuple

let tup:[string,string]
tup=['x','y',z]     //报错 超过元组设置的最大长度

*enum 列出所有可能性

enum Gender{
  Male,
  FeMale
}
let i:{name:string,gender:Gender}
i={
  name:'心野',
  gender:Gender.Male
}
​

3、类型别名（将复杂的类型名取别名 简化类型的使用）

type myType = 1 | 2 | 3 | 4 | 5
let k :myType
type s = string     
let str :s

4、编译选项

#tsc 编译当前目录下所有ts文件 前提要在tsconfig.json中配置

#tsc -w 监视当前目录下所有ts文件变化,同步更新js文件

#tsc 文件名.ts -w 监视ts文件变化,同步更新js文件

tsconfig.json配置

{
    /*
    include:指定需要被编译的目录
    exclude:指定不需要被编译的目录
    extend:继承配置
    files:指定需要被编译的文件的列表
    compilerOptions:编译器的选项
​
    路径：**表示任意目录
          *表示任意文件
    */ 
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "./src/haha/**/*"
    ],
    "compilerOptions": {
        "strict": false,        //是否开启所有严格检查
        "target": "ES6",    //指定编译结果的ES版本,默认ES3
        "module": "ES6",    //指定编译结果的模块化规范
        "lib": ["ES6","DOM"],   //指定TS文件用到的库
        "outDir": "./dist",     //指定编译后文件存放目录
        "outFile": "./dist/app.js",  //指定所有文件合并编译后输出的文件(module是amd或system的情况)
        "allowJs": false,       //是否编译并存放include目录下的js文件
        "checkJs": false,       //是否以ts标准去检查编译目录下的js文件
        "removeComments": false,     //编译过程是否移除注释
        "noEmit": false,         //编译后是否生成js文件
        "noEmitOnError": true,   //编译过程有错误就不生成js文件
        "alwaysStrict": false,   //是否对编译后的js文件使用严格模式
        "noImplicitAny": true,   //ts文件中的隐式any会报错提醒
        "noImplicitThis": true,  //ts文件中的不明确this会报错提醒
        "strictNullChecks": true, //严格检查ts文件中可能的空值   
    }
}

5、Ts的面向对象

普通属性|方法使用对象实例访问

static静态属性|方法使用类访问

readonly 属性只读不能修改

class Person {
  name: string = '张三'
  readonly age: number = 23
  static address: string = '厦门'
  static readonly hobit:string = '干饭'
  static fn(){
      console.log('你好啊');
      
  }
}
let person = new Person()
console.log(person.name)
person.age = 24         //报错   
console.log(Person.address)
Person.hobit ='敲代码'     //报错 
console.log(Person.fn); 

构造函数

class Person {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}
const man1 = new Person('张三',23)
const man2 = new Person('李四',24)

抽象类(专门给其他类继承的类）,其中的抽象方法在实例化中必须被重写 使用abstract修饰符

接口只定义对象的结构不考虑实际值，在接口中所有的方法都是抽象方法

定义类时，可以使类实现一个接口，即一个类中必须要有接口所定义的东西 接口即是对类的限制

interface myinterface{
    name:string;
    age:number;
}
interface myinterface{
    gender:string
}
const obj:myinterface={
    name:'张三',
    age:23,
    gender:'男'
}
class Obj implements myinterface {
  name: string
  age: number
  gender: string
  constructor(name: string, age: number, gender: string) {
    this.name = name
    this.age = age
    this.gender = gender
  }
}

privite修饰符：防止敏感属性被随意修改 可以通过get方法暴露使外部可以获取属性，通过set方法用来设置属性（加判断实现控制）

public修饰符：后代类可以随意访问祖先类

protect修饰符：只能当前类和当前类的子类中使用属性

class Person {
//   private age: number
  constructor(age: number) {
    this.age = age
  }
  get age(){
      return this.age
  }
  set age(val:number){      对set方法加条件，使得外部更改必须符合条件
      if(val>=0){
          this.age =val
      }
  }
}
const p = new Person(23)
p.age=22

泛型

在定义i函数或者类时，如果遇见类型不明确就可以使用泛型（尽量避免使用any）

function fn<T>(a:T):T{              //使用<>
    return a
}
fn(10);             //ts自动判断类型
fn<string>('张三')          //人为设置泛型类型
​
interface inter{        //泛型继承接口必须实现其属性和方法
    length:number;
} 
function fn2<T extends inter>(a:T):number{
    return a.length;
}

TS个人学习笔记,有错误的地方 还希望各位大神多多指教。