typescript
- 安装 npm install -g typescript
编译
- tsc 文件名
TypeScript 的原始数据类型
-
string,number ,Boolean ,null,undefined,enum ,symbol
-
null,undefined 是其它类型的子类型,其它类型可以赋值为这两个类型
-
void 无返回值的意思
任意值 any 可以赋值为任意类型
- 不给变量指定类型,就会被认为是任意类型,跟原生 js 一样
当给一个变量赋初始值的时候,它会根据你的值判断你的类型
- 没有赋值就是任意类型,赋值会类型推导
联合类型
var b:string | number = 1
- 只能访问此联合类型的 共有方法
对象类型
interface Istate {
name: string
}
- 只能强约束对象的属性值和属性个数
如果其中一个类型 可有可无 ?
interface Istate {
name: string, // 也可以 string | number
age?: number
}
属性个数不确定
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 // 错误
数组
-
类型加 [] 表示法
var ary:number []= [1,2,3]
var ary2:any [] = [1,2,'3'] -
数组泛型 Array<数组类型>
var aryType:Array<Number> = [1,2,3] -
接口表示法 可以和对象类型 混用
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 }]
函数类型
function fun1(name: string, age:number) {
return age
}
fun1('123',123)
const ages:number = fun1('dsf', 123)
-
可有可无
function fun2(name: string, age:number, sex?:string) {
return age
} -
默认值
function fun3(name: string = 'type', age:number, sex?:string) {
return age
}
表达式的方式
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')
类型断言
- 因为只能返回两个参数共有方法,如果不想用共同方法,可以使用类型断言
function getAssert(name: string | number) {
// return (<string>name).length
或
return (name as string).length
} - 但在 tsx 中只能是使用 return (name as string).length <> 会导致 tsx 解析错误
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 是共有属性,都可以访问
- private 是私有属性,只有内部可以调用
- protected 受保护的属性,允许子类访问
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') // 如果不定义类型,就会自动类型推导
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 []
}
网友评论