TypeScript —— 基础知识篇

Posted 2021-03-15 yanghana

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TypeScript —— 基础知识篇相关的知识，希望对你有一定的参考价值。

一、配置及基本操作

全局安装TypeScript cnpm install -g typescript
tsc -v 查看版本
tsc hello.ts 编译，将ts文件编译成js文件

二、定义变量类型

var str: string = ‘hello‘;
var num: number = 1;
var flag: boolean = true;
var un: undefined = undefined;
var nul: null = null;
var callBack = function():void{}  //代表函数不能有返回值
var num2: any = 1;
num2 = true;
//any 为任意值类型 当定义了any类型，之后可以复制任意值
var num2; //这样也表示任意值any类型，等价于var num2: any = 1;

View Code

类型推论

给变量赋予初始值的时候，如果没有指定类型，会自动根据初始值倒推类型

var b = 1;  //会默认为number类型
b = true;  //当给b赋值为其他类型的时候回报错

View Code

注意： var b 和 var b = 1指定的类型不相同，前者是any类型，后者是number类型

联合类型

表示取值可以为多种类型中的一种

var b: number|boolean = 5;
b = false; //正确不报错

View Code

只能访问联合类型内的所有类型中共有的属性或者方法

比如：

var b: number|string = 5;
b = ‘hello‘;
console.log(b.length) //这样就会报错，因为number类型没有length属性
console.log(b.toString()) //这个方法正确，以为toString()是两者都有的方法

View Code

三、对象类型-接口

定义接口

interface One {
    name: string,
    age: number
}
?
var obj1: One;
obj1 = {
    name: "hannah",
    age: 10   //这两个字段要严格对应定义的接口的类型和字段，上面定义两个下面要赋值两个,只写一个name或只写一个age都不可以
}

View Code

定义可选属性

interface Two {
    name: string,
    age?: number
}
?
var obj2: Two;
obj2 = {
    name: "hannah" //字段要按照上面定义的类型，但是 age+? 就代表可选，可有可无
}

View Code

属性个数不确定的时候

interface Three {
    name: string;
    age?: number;
    [propName: string]: any;
}
?
var obj3: Three;
obj3 = {
    name: "hannah",
    age: 23,
    gender: "女",
    isMarry: false
}

View Code

只读属性

interface Four {
    name: string;
    readonly age: number  //一经赋值不可修改
}
?
var obj4: Four;
obj4 = {
    name: ‘hannah‘,
    age: 23  //一经赋值不可修改
}
obj4.name = ‘han‘;
obj4.age = 20; //报错

View Code

四、数组类型

第一种类型+[] 的形式

var arr: number [] = [1,2,3];
var arr2: string [] = [‘1‘,‘2‘,‘3‘];
var arr3: any [] = [1,‘2‘, true]

View Code

第二种数组泛型 Array<elemType> 的形式

var arrType: Array<number> = [1,2,3];
var arrType2: Array<boolean> = [true, false];
var arrType3: Array<any> = [1,‘2‘,false]

View Code

第三种接口表示法

interface Five {
    [index: number]: number;  // key value
}
?
var arrType4: Five = [1,2,3]
 

interface Father {
    username: string;
    age: number
}
?
interface Five {
    [index: number]: Father;  // key value
}
?
var arrType4: Five = [{username: ‘hannah‘,age: 23}]

View Code

五、函数类型

声明式函数

function funcType(name: string, age: number): number{//这里代表返回的是number类型
    return age;
}

View Code

函数参数不确定

function funcType(name:string,age:number,sex?:string): number{
    return age;
}

View Code

函数参数的默认值

function funcType(name:string=‘hannah‘,age:number=23): number{
    return age;
}

View Code

表达式类型的函数

函数的约束规范

var funcType1 = function(name:string,age:number):number{
    return age
}

View Code

变量名以及函数的约束规范

var funcType3:(name:string,age:number)=>number = function(name:string,age:number):number{
    return age;
}

View Code

接口式对变量名的约束规范

interface funcType4 {
    (name: string, age: number) : number;
}
?
var funcType4: funcType4 = function(name: string,age: number): number{
    return age;
}

View Code

对于联合类型的函数，可以采用重载的方式

//输入时number类型，输出也是number类型
//输入时string类型，输出也是string类型
?
function getValue(value:number): number;
function getValue(value:string): string;
function getValue(value:string|number):string|number{
    return value;
}
?
let q: number = getValue(1);
let b: string = getValue(‘1‘);

View Code

六、类型断言

用来手动指定一个值得类型，只能断言联合类型中存在的类型

function gerAssert(name:string|number){
    return (<string>name).length  //第一种断言方式 指定为name是string类型而不是number类型
    return (name as string).length  //第二种断言方式
}

View Code

注意：在react中jsx语法为ts版时，尽量不要使用第一种断言方式

七、类型别名

类型别名可以用来给一个类型起一个新名字，采用关键词type

类型别名

type strType = string | number | boolean;
?
var strT: strType = ‘10‘;
strT = 10;
strT = true;

View Code

对于接口也可采用类型别名

interface muchType1 {
    name: string
}
interface muchType2 {
    age: number
}
type muchType = muchType2 | muchType1;
?
var obj11: muchType = {name: ‘hannah‘}
var obj22: muchType = {age: 10}
var obj33: muchType = {name: ‘han‘, age: 23}

View Code

限制字符串的选择

type sex = "男" | "女";
function getSex(s:sex): string {
    return s
}
?
getSex(‘1‘) //报错类型“"1"”的参数不能赋给类型“sex”的参数
getSex(‘女‘)

View Code

八、枚举（Enum）

使用枚举可以定义一些有名字的数组常量，枚举成员会被赋值为从0开始递增的数字

enum Days{
    Sun,
    Mon,
    Tue,
    Wed,
    Thu,
    Fri,
    Sat
}
?
console.log(Days.Sun)   // 0
console.log(Days.Sat)   // 6
?
enum Day{
    Sun = 3,
    Mon,
    Tue,
    Wed,
    Thu,
    Fri,
    Sat
}
?
console.log(Day.Sun)   // 3
console.log(Day.Sat)   // 9

View Code

编译成js文件后：

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));
console.log(Days.Sun); // 0
console.log(Days.Sat); // 6

View Code

同时也会被枚举值到枚举名进行反向映射

console.log(Days)
==>
    {
    0: "Sun"
    1: "Mon"
    2: "Tue"
    3: "Wed"
    4: "Thu"
    5: "Fri"
    6: "Sat"
    Sun: 0
    Mon: 1
    Tue: 2
    Wed: 3
    Thu: 4
    Fri: 5
    Sat: 6
    }

View Code

九、类的修饰符

public

当一个类成员变量没有修饰的时候，外界是可以进行访问的，默认就是public进行修饰

public修饰的属性或者方法是共有的，可以在任何地方被访问到

//创建Person类
class Person {
    name = ‘hannah‘;
    age = 18;
    say() {
        console.log(‘我的名字是‘+this.name+‘，我的年龄是‘+this.age)
    }
}
?
//创建Person的实例
var p = new Person()
p.say()
console.log(p.name)

View Code

private

修饰的属性或者方法是私有的，不能在声明它的类外面访问
protectd

修饰的属性或者方法是受保护的，它和private类似
static

类的静态方法里面不允许用this

十、泛型

泛型是指在定义函数、接口或类的时候，不预先指定具体类型，而在使用的时候再指定类型的一种特征，可以来帮助我们限定约束规范

function createArray<T>(length:number,value:T): Array<T>{
    let arr = [];
    for(var i = 0; i <length; i++) {
        arr[i] = value;
    }
    return arr;
}
?
var strArray: string[] = createArray<string>(3,‘1‘)  //限定了为string类型
var numArray: number[] = createArray(3,1)  //不传的时候根据类型进行倒推

View Code

以上是关于TypeScript —— 基础知识篇的主要内容，如果未能解决你的问题，请参考以下文章

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming

深入理解TypeScript——第一章：上手篇

typeScript函数篇

typescript 打字稿+角度1的启动片段