文章目录
文章名称
提示:以下是本篇文章正文内容,下面案例可供参考
全局安装ts
npm i -g typescript
// 查看是否安装成功
tsc -v
一 TS基础
1. 1字符串,数字,布尔类类型
var str:string = 'aaaaa'
var num:number = 123
var flag:boolean = true
// 不确定未来是否只是同一类型,可以指定多个类型
var str:string | number = '123'
str = 123
1.2 数组
// 数组内全部为字符串
var arr: string[] = ['1', '2', '3']
var arr:Array<string> = ['1', '2', '3']
// 数组内可以是字符串和数组
var arr: (string | number)[] = ['1', 2, '3']
var arr:Array<string | number> = ['1', 2, '3']
// 数组内要么全是数字要么全是字符串
var arr: string[] | number[] = ['1', '2', '3']
var arr: string[] | number[] = [1, 2, 3]
1.3 对象
// 定义一个接口
interface IObj = {
readonly id:number, // 只读属性,不允许修改
name:string,
age:number,
sex?:number, // 可选属性,可有可无
[propName:string]:any // 任意属性
}
var obj:IObj = {
name: '小明',
age: 18
}
var obj2:any = {} // 任意类型
1.4 函数
function test(a:string, b:number, c?:string):string {
return a + b
}
// 通过接口定义
interface IFun{ (a:string, b:number, c?string):string }
var test: IFun = function(a:string, b:number, c?:string):string {
return a + b
}
interface IObj = {
name:string,
age:number,
getName:(a:string)=>string
}
var obj:IObj = {
name: '小明',
age:18,
getName:(name:string)=> {
return name
}
}
1.5 any和void
any — 任何类型
void — 空值,表示没有任何返回值的函数
cosnt fun:void () => {
console.log(1111)
}
1.6 类型断言
function add(a:any, b:any):any {
return (a as string).length + b
}
2 进阶
2.1 类型别名
type s = string
let str1:s = 'aaa'
let str2:s = 'bbb'
type all = string | number | boolean
let a:all = 123
let b:all = 'abc'
let c:all = true
// 字符串字面量类型
type strValue = '张三' | '李四' | '王五'
let name: strValue = '张三'
2.2 元组Tuple
数组是合并了相同类型的对象,而元组是合并不同类型的对象
// 定义时,类型与数据的个数和位置要一一对应
let arr:[string, number] = ['123', 123]
// 但是可以向数组中追加元素,此时,只需要是属于定义中的类型即可
arr.push('456')
arr.push(456)
arr.push(true) // 报错
2.3 枚举
枚举类型指类型被限制在一定范围内,比如一周七天,
enum WeekType = {
Monday, // Monday = 1,如果赋值,下面的会自增,如果不赋值,则从0开始
Tuesday,
Wednesday, // Wednesday = 2 ,则下面的值会根据前面的值进行自增
Thursday,
Friday,
Saturday,
Sunday
}
console.log(WeekType.Monday) // 0
2.4 类
class Person {
// 定义实例中数据的类型
name: string
age: number
// 定义实例化对象时,传入参数的类型
constructor(name: string, age:number) {
this.name = name
this.age = age
}
}
class Person {
public name = '小明', // 共有属性
private list:sting[] = [] // 私有属性,只能在类的内部被访问,可以被子类继承,但是不能在子类中使用
protected age: number = 18 // 私有属性,只能在类的内部被访问,可以被子类继承,也可以在子类中使用
readonly sex = '男' // 只读属性
}
// 通过abstract修饰的类,是抽象类,只能被继承,不能被实例化
abstract class Car {
}
2.5 泛型
- 基本写法
function fun1<T>(data:T):T {
return data
}
let num:number = fun1<number>(10)
let str:string = fun1<string>('10')
function fun2<T, G>(d1:T, d2:G):string {
return d1 + d2
}
let result:string = fun2<number, string>(1, '2')
- 泛型的类型别名 和 接口
// 类型别名
type TStrOrNum = string | number
type TObj<T, G> = { text:T, fun:()=>G }
let obj:TObj<TStrOrNum, TStrOrNum> = {
text: '',
fun() {
return 'xxx'
}
}
接口形式
interface IObj<T, G> {
text:T,
fun:()=> G
}
let obj: IObj<TStrOrNum, TStrOrNum> = {
text: '',
fun() {
return 'xxx'
}
}
- Partial 和 Required
interface IPerson {
name:string,
age:number,
sex:string
}
/*
type Partial = { [P in keyof T]?:T[P] | undefined }
{
name?string|undefined,
age:?number|undefined
}
*/
var p1:Partial<IPerson> = {
name: '张三',
age: 18
}