运行期间做数据类型检查 js ruby python

编译期间类型检查 c c++ java

==冒号后面的都是类型==

typescript 是 js 的超集

拥有静态类型

需要编译成 js 运行

ts 的静态类型可以在开发过程中，发现潜在问题

更好的编辑器提示

通过静态类型的声明，代码清晰易读

// js中变量是动态类型 可以随时改变类型leta=1;a='str'// ts中是静态类型 改变类型会报错letb=1;b='str'

ts 自动启用类型推断，判断变量类型 如果能分析变量类型不需要类型注解，否则需要

// 基础类型 string number boolean symbol void null undefinedletcount: number;// 对象类型 {} [] function Classconstteacher: {name: string;  age: number;} = {name:'jason',age:28,};constnumbers: number[] = [1,2,3];classPerson{}constp: Person =newPerson();constgetTotal:()=>number =()=>{return123;};

letmyName:string| number;

将多个类型合并成一个类型

typeNativeButtonProps = BaseButtonProps & ButtonHTMLAttributestypeAnchorButtonProps = BaseButtonProps & AnchorHTMLAttributes

把一些属性变为可选的

exporttypeButtonProps = Partial

enum TabTypes {Case='case',  Ganged ='ganged',}const[currentTab, setCurrentTab] = useState(TabTypes.Case);if(currentTab === TabTypes.Case) {        setCaseSource(insertKeys(res.data));      }else{        setGangedSource(insertKeys(res.data));}

函数的入参需要类型注解，返回值如果可以类型推断的话不需要写

// 函数入参及返回值注解 c:可选参数只能放最后functionadd(a: number, b: number, c?: number):number{returna + b;}// 函数表达式constadd2:(x: number, y: number) =>number=(a,b)=>{returna+b}// interface写法interface IFn {  (x: number,y: number): number;}constadd2: IFn =(a, b) =>{returna + b;};// type写法type fn =(x: number, y: number) =>number;constadd2: fn =(a, b) =>{returna + b;};// 函数解构的写法functionadd2({ a, b }:{a:number, b: number}):number{returna + b;}add2({a:1,b:2});consttotal = add(1,2);// 无返回值functionsayHello():void{console.log('hello');}// 函数永远不会执行完functionerrorEmitter():never{thrownewError('error');console.log('end');}

// 数组注解 能推断出来的不需要注解 直接的赋值的数组ts可以类型推断出来constarr1: number[] = [1,2,3];// 只能是numberconstarr2: (number |string)[] = ['1',2,3];// 可以是number或stringconstarr3: undefined[] = [undefined, undefined];// 只能是undefined// 对象数组constarr4: { name:string; age: number }[] = [{ name:'a', age:18}];// 类型别名 对上面的另一种写法type User = { name:string; age: number };constarr5: User[] = [{ name:'a', age:18}];// 元组 tuple 一个数组的长度固定 元素顺序类型固定constinfo: [string,string, number] = ['andy','male',20];

interface是数据的共性的抽象 有自己的属性 只是在开发过程中做语法提示校验的工具 编译后不存在

对对象的形状(shape)的描述

interfacePerson{readonlyname:string;// 只读 该属性再写会报错age?: number;// 可选属性 可有可无[propName: string]: any;// 将来多出的其他属性string类型也是可以的say?():string;// 方法属性 返回值stringsay: ()=>{}}// 接口继承interfaceTeacherextendsPerson{    teach():string;// 自己的属性}

定义函数

// interface 定义函数类型interfaceISayHi{ (word:string):string;}constsay: SayHi = () => {return'hi';};interfaceIModalProps{  visible: boolean;// 是否可见handleClose: () =>void;// 隐藏自身form: any;}

对类(class)进行抽象

interfaceRadio{  switchRadio():void}interfaceBatteryextendsRadio{  checkBatter():void}// 类实现interfaceclassCarimplementsRadio{  switchRadio() {  }}classPhoneimplementsBattery{  switchRadio() {  }  checkBatter() {  } }

type 类型别名 只是简单的别名

// 常用于type fnType =(a: string) =>stringtype FooType = string | fnTypetype Person = {name: string;  age?: number;  };functiongetName(person: Person):void{console.log(person.name);}constsetName =(person: Person, newName: string) =>{  person.name = newName;returnperson;};// 传对象引用和对象字面量的校验结果不一样 前一种无强校验letp = {name:'andy',sex:'male', say() {} };getName(p);getName({name:'andy',sex:'male'});setName({name:'jason'},'andy');

联合类型时 ts 只拿到公有的一些方法 使用类型断言联合类型的某一种类型

functiongetLength(input: string | number){// 这里会报错if(input.length){returninput.length  }}functiongetLength(input: string | number){// 类型断言 告诉ts我知道他是什么类型conststr = inputasStringif(str.length){returnstr.length  }}functiongetLength(input: string | number){// 另一种写法if((input).length){      return (input).length  }}

ts 给 es6 的类增加了访问修饰符

classPerson{/**

*  public 允许在类的内外调用

*  private 允许类内不允许子类

*  protected 允许类内及继承的子类

*  readonly 只能读不能写

* */// 简写constructor(private_name:string,publicage: number){}// 常规写法// public name: string;// constructor(name) {//  this.name = name;// }// getter 属性getname(){returnthis._name +'geted';  }// setter 属性setname(value:string){this._name =value}}constp =newPerson('nn',18);console.log(p.name);p.name ='change';console.log(p.name);// ts 实现单例模式classDemo{// 私有静态属性privatestaticinstance: Demo;// 私有constructorprivateconstructor(publicname:string){};// 公共静态方法staticgetInstance(){if(!this.instance){this.instance =newDemo('lee')        }returnthis.instance    }}// 调用的是同一个instanceconstdemo1 = Demo.getInstance();constdemo2 = Demo.getInstance();console.log(demo1, demo2)

泛型，泛指的类型, 定义==函数、接口和类==时使用占位符不指定具体类型，使用时才指定,用<>先声明, 声明泛型 T 可以任意命名函数泛型,代表不知道什么类型的同一种类型

函数泛型

// 常规写法functionplus(a: number, b):number{returna + b;  }consta = plus// interface写法interface IPlus{    (a: number,b: number): number}constplus:IPlus=(a,b)=>{returna + b;}consta = plus(2,2)// 泛型写法functionjoin(first: T, second: T):T{return`${first}${second}`;}// 可以声明 也可以类型推断join(1,1);join(1,2);functionjoin(first: T, second: P){return`${first}${second}`;}

接口泛型

interface IPlus {  (a: T,b: T): T;}constplus: IPlus =(a, b) =>{returna + b;};consta = plus(1,2);constconnet: IPlus =(a, b) =>{returna + b;};constb = connet('hello','ts');

类泛型

classQueue{    private data=[]    push(item: T){returnthis.data.push(item)    }    pop(): T{returnthis.data.pop()    }}constq1=newQueue()q1.push(1)q1.push(2)console.log(q1.pop().toFixed());constq2=newQueue()q2.push('ss')console.log(q2.pop().trim())

// 泛型约束 使用extends使泛型满足某些条件interfaceIWithLength{    length: number}functionecho(args: T):T{// 需要一个有length属性的泛型console.log(args.length);returnargs  }constres =echo('sss')constres2=echo([1,2,3])// 泛型继承 使用extends扩展类型interfaceIJoin{    name: string;}functionjoin(data:T[]){returndata[0].name;}join([{ name:'sss'}]);

第三方库使用时需要声明文件 声明文件以.d.ts 结尾 如：jQuery.d.ts 有了声明文件后项目中就可以使用 jQuery() 提供语法提示且不报错

搜索第三方库的声明文件 TypeSearch 从 npm 安装第三方库的声明文件 npm @types

// jQuery.d.tsdeclarevarjQuery: (selector:string) =>any;

npminstall -g ts-nodets-node script.ts

不带任何输入文件的情况下调用 tsc，编译器会从当前目录开始去查找 tsconfig.json 文件，逐级向上搜索父目录。

不带任何输入文件的情况下调用 tsc，且使用命令行参数--project(或-p)指定一个包含 tsconfig.json 文件的目录。

当命令行上指定了输入文件时，tsconfig.json 文件会被忽略。

生成tsconfig.json

tsc--init

使用指定的tsconfig.json编译

// pacage.json"script":{"build-ts":"tsc -p tsconfig.build.json"}

常规写法

importReactfrom'react';interface IHelloProps {name: string}constHello =(props: IHelloProps) =>{return

{`Hello ${props.name}`};};exportdefaultHello;

使用 react 提供的声明 /node_modules/@types/react/index.d.ts 声明文件