TypeScript笔记

TS（就是JS的超集）是静态类型 是弱类型（允许隐式转化）

下载Ts编译器：npm i -g typescript

查看Ts：tsc

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

指定路径输出：tsc –outFile ./路径/index.js index.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=1)=>number				//必选参数要在可选参数之后 参数可以给定默认值
fun = function(n1,n2){
  return n1+n2
}
function alertName():void{
    alert('my name is tom')
}

定义变量的时候没有赋值则该变量被判断为any

2、TS新增类型

*字面量

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]		//报错 将number类型的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;		//问号表示可选
    [propName:string]:any;     //其他属性
}
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
  }
}

//通过接口定义函数的形状
interface inter{
    (num1:number,num2:number):boolean
}
let myinter = inter
myinter=function(num1:number,num2:number){
    return num1>num2?true:false
}

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;
}

原文地址：http://www.cnblogs.com/kq981024/p/16796023.html