運行期間做數據類型檢查?js?ruby python
編譯期間類型檢查?c?c++ java
==冒號后面的都是類型==
typescript 是 js 的超集
擁有靜態(tài)類型
需要編譯成 js 運行
ts 的靜態(tài)類型可以在開發(fā)過程中翰舌，發(fā)現潛在問題
更好的編輯器提示
通過靜態(tài)類型的聲明淹遵，代碼清晰易讀
// js中變量是動態(tài)類型 可以隨時改變類型leta=1;a='str'// ts中是靜態(tài)類型 改變類型會報錯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
把一些屬性變?yōu)榭蛇x的
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');}// 函數永遠不會執(zhí)行完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是數據的共性的抽象 有自己的屬性 只是在開發(fā)過程中做語法提示校驗的工具 編譯后不存在
對對象的形狀(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){}// 常規(guī)寫法// 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{// 私有靜態(tài)屬性privatestaticinstance: Demo;// 私有constructorprivateconstructor(publicname:string){};// 公共靜態(tài)方法staticgetInstance(){if(!this.instance){this.instance =newDemo('lee')? ? ? ? }returnthis.instance? ? }}// 調用的是同一個instanceconstdemo1 = Demo.getInstance();constdemo2 = Demo.getInstance();console.log(demo1, demo2)
泛型疏哗，泛指的類型, 定義==函數、接口和類==時使用占位符不指定具體類型禾怠，使用時才指定,用<>先聲明,?聲明泛型 T 可以任意命名函數泛型,代表不知道什么類型的同一種類型
函數泛型
// 常規(guī)寫法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{// 需要一個有l(wèi)ength屬性的泛型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"}
常規(guī)寫法
importReactfrom'react';interface IHelloProps {name: string}constHello =(props: IHelloProps) =>{return
{`Hello ${props.name}`}
;};exportdefaultHello;使用 react 提供的聲明 /node_modules/@types/react/index.d.ts 聲明文件
