ts转载

基础类型

boolean  //布尔
​
number   //数字
​
string   //字符串
​
object //对象
​
number[] string[] 等 数据类型[]  或  Array<number> Array<string> 等 Array<数据类型>   //数组
​
any[] //不确定个数,不确定类型的数组,但是不好的地方是就没有实时的编译提示了
​
any //任何类型
​
unknown //任何类型的安全形式
​
undefined null 
//默认情况下null和undefined是所有类型的子类型,但是如果想把其赋值给某个类型的变量,想要不报错首先要关闭严格模式
复制代码
​
​
void //没有类型,如 function f:void () { ... } 无返回值
​
never //函数无法返回的类型。
//例如一个会抛出异常的函数 就可以写 function f(msg:string):never {throw new Error(msg)}
​
​
复制代码
enum //枚举 
例:
enum Color {Red = 2, Green, Blue} 
let c: Color = Color.Green;
let d:string = Color[2]
console.log(c)
>> 3
console.log(d)
>> Red
​
let a:[string,number,boolean] = ['xxx',12,true]  
//元组  与数组不同的是可以存在不同类型,但是数据类型的位置和个数要一一对应
​
类型一|类型二   //联合类型,同时接受多种类型
​
(<string>str).length  或  (str as string).length //类型断言,断言某个变量是某种类型,以防止报错。 
//这个为例,断言str是string类型,所以在提前不知道str的类型的情况下,使用.length方法也不会报错
复制代码

需要注意的是很多地方没有提到的unknow类型,他与any不同的是使用unknown可以保证类型安全,而any则直接不进行类型检查,相当于又回到了JavaScript🤣,所以我们可以在很多情况下都用unknown来代替any。

例如:

let b:unknown //当我们不知道类型的时候,先用unknown类型 
b = 'abc'
let l:number = (b as string).length //某种情况下,我们确定了类型则使用类型断言来确定类型
//如果不用类型断言则会出现错误,而一开始换成any则不会,这是unknown安全性的体现
复制代码

更多内容可以参考 [译] 理解TypeScript 中 any 和 unknown

接口(interface)

你可以把接口理解为一个契约,遵守契约的类型都有必须根据接口做出规范。

基本用法(含常见点)

interface Iperson {
    readonly firstName: string //只读
    lastName: string
    sex?: string //?:表示可以没有
} 
function showFullName(person: Iperson) {
    return person.firstName + person.lastName // person.qq是没有的
}//这里的函数传入的参数,必须同时具备firstName,lastName两种属性,但是多具备其他属性则不做要求,在传进时会把多余的参数去掉
let q: object = {
    firstName:'xx',
    lastName:'x',
    qq:'123'
}
console.log(showFullName(q as Iperson)) //注意这里断言了q是Iperson型,不然会类型不一致
>> xx
复制代码

接口也可以是函数类型的接口

//定义一个函数的规范
interface SearchFunc {
    (source: string, subString: string): boolean;
}
  
let mySearch: SearchFunc = function(so: string, su: string) {
    let result = so.search(su);
    return result > -1;
}
复制代码

同时接口可以定义类类型(没用过类的直接跳到 更实用的TypeScript指南:从ES6的class到TS的装饰器 ,让你知道一些类的简单用法)

//定义两个接口
interface Time {
    currentTime: Date;
    setTime(d: Date): void;
}
interface Name {
    name: string;
    setname(pname: string): void;
}
​
//类使用接口
class Clock implements Time, Name {
    name:string
    currentTime: Date
    other: string  //可以在类中多定义属性,只要包含所有接口特性就行
    setTime(d: Date) {
        this.currentTime = d;
    }
    setname(pname: string) {
        this.name = pname;
    }
    constructor(h?: number, m?: number) { } //构造函数类是接口不约束的 
}
复制代码

接口也可以继承:

interface L {
    len: number;
}
interface S extends L {
    area: number;
}
let s = <S>{}; //注意这里使用是断言,也可以写成let s: S = ({} as S)。和泛型区分开
s.len = 10, s.area = 100
复制代码

其他用法,我们遇到具体场景具体说明,这里如果一股脑排列出来反而会混乱。

类(class)

这里你只介绍类是什么和基本知识点,为了是先看懂,他的应用将在 更实用的TypeScript指南:从ES6的class到TS的装饰器 中根据具体使用场景说明。

class Animal {
    private name: string = 'daHuang';//私有
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}
//继承
class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}
​
const dog = new Dog();
dog.bark();
>> Woof! Woof!
dog.move(10);
>> Animal moved 10m.
dog.name //报错:属性“name”为私有属性,只能在类“Animal”中访问。
复制代码

函数(function)

函数声明

const add = function(x:number = 1,y?:number):number {
    if(y)   
        return x+y
    else
        return x
} 
//add函数参数必须是数字类型,返回值必须是数字类型,x默认是1,y可选
复制代码

函数重载

根据传入不同的参数而返回不同的类型

function add(x:string,y:string):string
function add(x:number,y:number):number
function add(x,y) {
    if(typeof(x) === 'string')
    return 'the String'+x+y //字符串拼接
    else return x+y  //相加
}
​
add(1,2)//可以,符合第二种重载
add('hello','world')//符合第一种重载
add(1,'ss')//报错,不符合重载类型
复制代码

泛型(generic)

泛型用来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

function fun<T>(x: T,y:number): T {
    return x;
}//将类型设置成类似于变量的形式,这样以后再用的时候就可以根据不同的数据类型,使用不同的参数
​
fun<string>('xx',12)//可以
fun<string>(123,12)//可以
fun<number>('ss',12)//报错
复制代码

类型别名 type

type作用就是给类型起一个新名字,支持基本类型、联合类型、元组及其它任何你需要的手写类型

例子:

type test = number; //基本类型
let num: test = 10;
type userOjb = {name:string} // 对象
type getName = ()=>string  // 函数
type data = [number,string] // 元组
type numOrFun = Second | getName  // 联合类型

作者:AEI
链接:https://juejin.cn/post/7014499287295852551
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。