運(yùn)行期間做數(shù)據(jù)類型檢查?js?ruby python
編譯期間類型檢查?c?c++ java
==冒號(hào)后面的都是類型==
typescript 是 js 的超集
擁有靜態(tài)類型
需要編譯成 js 運(yùn)行
ts 的靜態(tài)類型可以在開發(fā)過程中，發(fā)現(xiàn)潛在問題
更好的編輯器提示
通過靜態(tài)類型的聲明，代碼清晰易讀
// js中變量是動(dòng)態(tài)類型 可以隨時(shí)改變類型leta=1;a='str'// ts中是靜態(tài)類型 改變類型會(huì)報(bào)錯(cuò)letb=1;b='str'
ts 自動(dòng)啟用類型推斷，判斷變量類型 如果能分析變量類型不需要類型注解，否則需要
// 基礎(chǔ)類型 string number boolean symbol void null undefinedletcount: number;// 對(duì)象類型 {} [] 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;
將多個(gè)類型合并成一個(gè)類型
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));}
函數(shù)的入?yún)⑿枰愋妥⒔猓祷刂等绻梢灶愋屯茢嗟脑挷恍枰獙?/p>
// 函數(shù)入?yún)⒓胺祷刂底⒔?c:可選參數(shù)只能放最后functionadd(a: number, b: number, c?: number):number{returna + b;}// 函數(shù)表達(dá)式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;};// 函數(shù)解構(gòu)的寫法functionadd2({ a, b }:{a:number, b: number}):number{returna + b;}add2({a:1,b:2});consttotal = add(1,2);// 無返回值functionsayHello():void{console.log('hello');}// 函數(shù)永遠(yuǎn)不會(huì)執(zhí)行完functionerrorEmitter():never{thrownewError('error');console.log('end');}
// 數(shù)組注解 能推斷出來的不需要注解 直接的賦值的數(shù)組ts可以類型推斷出來constarr1: number[] = [1,2,3];// 只能是numberconstarr2: (number |string)[] = ['1',2,3];// 可以是number或stringconstarr3: undefined[] = [undefined, undefined];// 只能是undefined// 對(duì)象數(shù)組constarr4: { name:string; age: number }[] = [{ name:'a', age:18}];// 類型別名 對(duì)上面的另一種寫法type User = { name:string; age: number };constarr5: User[] = [{ name:'a', age:18}];// 元組 tuple 一個(gè)數(shù)組的長度固定 元素順序類型固定constinfo: [string,string, number] = ['andy','male',20];
interface是數(shù)據(jù)的共性的抽象 有自己的屬性 只是在開發(fā)過程中做語法提示校驗(yàn)的工具 編譯后不存在
對(duì)對(duì)象的形狀(shape)的描述
interfacePerson{readonlyname:string;// 只讀 該屬性再寫會(huì)報(bào)錯(cuò)age?: number;// 可選屬性 可有可無[propName: string]: any;// 將來多出的其他屬性string類型也是可以的say?():string;// 方法屬性 返回值stringsay: ()=>{}}// 接口繼承interfaceTeacherextendsPerson{? ? teach():string;// 自己的屬性}
定義函數(shù)
// interface 定義函數(shù)類型interfaceISayHi{ (word:string):string;}constsay: SayHi = () => {return'hi';};interfaceIModalProps{? visible: boolean;// 是否可見handleClose: () =>void;// 隱藏自身form: any;}
對(duì)類(class)進(jìn)行抽象
interfaceRadio{? switchRadio():void}interfaceBatteryextendsRadio{? checkBatter():void}// 類實(shí)現(xiàn)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;};// 傳對(duì)象引用和對(duì)象字面量的校驗(yàn)結(jié)果不一樣 前一種無強(qiáng)校驗(yàn)letp = {name:'andy',sex:'male', say() {} };getName(p);getName({name:'andy',sex:'male'});setName({name:'jason'},'andy');
聯(lián)合類型時(shí) ts 只拿到公有的一些方法 使用類型斷言聯(lián)合類型的某一種類型
functiongetLength(input: string | number){// 這里會(huì)報(bào)錯(cuò)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 允許在類的內(nèi)外調(diào)用
? *? private 允許類內(nèi)不允許子類
? *? protected 允許類內(nèi)及繼承的子類
? *? 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 實(shí)現(xiàn)單例模式classDemo{// 私有靜態(tài)屬性privatestaticinstance: Demo;// 私有constructorprivateconstructor(publicname:string){};// 公共靜態(tài)方法staticgetInstance(){if(!this.instance){this.instance =newDemo('lee')? ? ? ? }returnthis.instance? ? }}// 調(diào)用的是同一個(gè)instanceconstdemo1 = Demo.getInstance();constdemo2 = Demo.getInstance();console.log(demo1, demo2)
泛型，泛指的類型, 定義==函數(shù)、接口和類==時(shí)使用占位符不指定具體類型，使用時(shí)才指定,用<>先聲明,?聲明泛型 T 可以任意命名函數(shù)泛型,代表不知道什么類型的同一種類型
函數(shù)泛型
// 常規(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{// 需要一個(gè)有l(wèi)ength屬性的泛型console.log(args.length);returnargs? }constres =echo('sss')constres2=echo([1,2,3])// 泛型繼承 使用extends擴(kuò)展類型interfaceIJoin{? ? name: string;}functionjoin(data:T[]){returndata[0].name;}join([{ name:'sss'}]);
第三方庫使用時(shí)需要聲明文件?聲明文件以.d.ts 結(jié)尾 如：jQuery.d.ts?有了聲明文件后項(xiàng)目中就可以使用?jQuery()?提供語法提示且不報(bào)錯(cuò)
搜索第三方庫的聲明文件?TypeSearch?從 npm 安裝第三方庫的聲明文件?npm @types
// jQuery.d.tsdeclarevarjQuery: (selector:string) =>any;
npminstall -g ts-nodets-node script.ts
不帶任何輸入文件的情況下調(diào)用 tsc，編譯器會(huì)從當(dāng)前目錄開始去查找 tsconfig.json 文件，逐級(jí)向上搜索父目錄。
不帶任何輸入文件的情況下調(diào)用 tsc，且使用命令行參數(shù)--project（或-p）指定一個(gè)包含 tsconfig.json 文件的目錄。
當(dāng)命令行上指定了輸入文件時(shí)，tsconfig.json 文件會(huì)被忽略。
生成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 聲明文件
