typescript
- 安裝 npm install -g typescript
編譯
- tsc 文件名
TypeScript 的原始數(shù)據(jù)類型
string蛛枚，number 谅海，Boolean ，null蹦浦，undefined胁赢，enum ,symbol
null,undefined 是其它類型的子類型，其它類型可以賦值為這兩個(gè)類型
void 無(wú)返回值的意思
任意值 any 可以賦值為任意類型
- 不給變量指定類型白筹，就會(huì)被認(rèn)為是任意類型智末，跟原生 js 一樣
當(dāng)給一個(gè)變量賦初始值的時(shí)候，它會(huì)根據(jù)你的值判斷你的類型
- 沒(méi)有賦值就是任意類型徒河，賦值會(huì)類型推導(dǎo)
聯(lián)合類型
var b:string | number = 1
- 只能訪問(wèn)此聯(lián)合類型的 共有方法
對(duì)象類型
interface Istate {
name: string
}
- 只能強(qiáng)約束對(duì)象的屬性值和屬性個(gè)數(shù)
如果其中一個(gè)類型 可有可無(wú) ?
interface Istate {
name: string, // 也可以 string | number
age?: number
}
屬性個(gè)數(shù)不確定
interface Istate {
name: string,
[propName: string]: any
}
- any 是必須的
只讀屬性
interface Istate2 {
name: string,
readonly age: number
}
var obj2:Istate2 = { name: '11', age: 1 }
obj2 = { name: '1243', age: 23 }
obj2.age = 1 // 錯(cuò)誤
數(shù)組
類型加 [] 表示法
var ary:number []= [1,2,3]
var ary2:any [] = [1,2,'3']數(shù)組泛型 Array<數(shù)組類型>
var aryType:Array<Number> = [1,2,3]接口表示法 可以和對(duì)象類型 混用
interface IArr {
[index: number]: Istate2
}
var interAry:IArr = [{ name: 'hhh', age: 1 }]
var arrType2: Array<Istate2> = [{ name: 'hhh', age: 1 }]
var arrType3:Istate2 [] = [{ name: 'hhh', age: 1 }]
函數(shù)類型
function fun1(name: string, age:number) {
return age
}
fun1('123',123)
const ages:number = fun1('dsf', 123)
可有可無(wú)
function fun2(name: string, age:number, sex?:string) {
return age
}默認(rèn)值
function fun3(name: string = 'type', age:number, sex?:string) {
return age
}
表達(dá)式的方式
var funa = function(name:string, age:number = 20):number { // number 返回類型
return age
}
變量的類型 約束 + 返回值的類型
var funa2:(name: string, age: number) => number = function(name: string, age: number) {
return age
}interface 的方式
interface funType3 {
(name: string, age: number): number
}
var funa3:funType3 = function(name: string, age: number):number {
return age
}
- 重載的方式 定義輸入類型和返回類型相同 系馆，輸入是什么類型，返回值是什么類型
// 輸入是 number顽照，輸出也是 number
function getValue(value: number):number;
function getValue(value: string):string;
function getValue(value:string|number):number|string {
return value
}
var res1:number = getValue(1)
var res2:string = getValue('2')
類型斷言
- 因?yàn)橹荒芊祷貎蓚€(gè)參數(shù)共有方法由蘑，如果不想用共同方法闽寡，可以使用類型斷言
function getAssert(name: string | number) {
// return (<string>name).length
或
return (name as string).length
} - 但在 tsx 中只能是使用 return (name as string).length <> 會(huì)導(dǎo)致 tsx 解析錯(cuò)誤
ts 中聲明文件 ，引入第三方包
- 例如使用 jQuery
- 聲明 declare var $:(selector:string)=> any
- 引入 /// <reference path="...ts"/>
declare var $:(selector:string)=> any
js 類型別名 type
type str = string
var str5:str = "1"
type muchType = string | number | boolean
var str6 = false
- 接口類型
interface muchType2 {
name: string,
str: number
}
interface muchType3 {
name: string,
age: number
}
type muchType4 = muchType2 | muchType3
- 限定字符串
// 限定字符串
type myStr = '我' | '你'
function getSelf(self: myStr) {
}
getSelf('我')
枚舉類型
- 枚舉
enum nums {
'one',
'two',
'three',
'four',
'five'
}
nums[1] == 'two' // true
mums.two
類 class
class Person {
private name = 'hello'
age = 20
protected sex = '女'
speak() {
console.log('我是' + this.name + '我多大了?' + this.age)
}
}
var p = new Person()
p.speak()
console.log(p.name) // ?
console.log(p.age)
console.log(p.sex) // ?
- public 是共有屬性尼酿，都可以訪問(wèn)
- private 是私有屬性爷狈，只有內(nèi)部可以調(diào)用
- protected 受保護(hù)的屬性，允許子類訪問(wèn)
class Child extends Person {
callPerent() {
console.log(super.age)
console.log(super.sex)
}
}
泛型
function resArray<T>(length: number, value:T):Array<T> {
let ary = []
for (let i = 0; i < length; i++) {
ary[i] = value
}
return ary
}
resArray(3, '1') // 如果不定義類型裳擎，就會(huì)自動(dòng)類型推導(dǎo)
resArray<String>(1, '1') // 可以傳遞類型
var arrVal: string [] = resArray(2, '1')
- interface 使用泛型
interface FXFun {
<T>(name:string, value: T): Array<T>
}
var func5: FXFun
func5 = function<T>(name: string, value: T): T [] {
return []
}
