TypeScrpt初体验

TypeScrpt初体验

1.什么是TS

TupeScript 是一种由微软开发的自由开源的编程语言,他是JavaScript的一个超集,扩展JavaScript的语法,主要提供了类型系统和对ES6 的支持

TypeScript 的优势

1. 强大的IDE支持: 体现在三个特性上,1.类型检查,在TS中允许腻味变量指定类型.2.语法提示.3.重构

2. Angular2,Vue3的开发语言

2.安装TypeScript

// 下载TS
npm install -g typescript
// 以上命令会在全局环境下安装tsc命令,安装完成之后,我们就可以在任何地方执行tsc命令
// 查看版本 
tsc -v

// .ts文件编译
tsc 文件名称

使用TypeScript编写的文件以.ts为后辍

浏览器是不可以解析TS

3.TypeScript 用法

基本类型定义

使用:指定变量的类型,:前后有没有空格都可以

变量名:类型= 具体值

let num:number = 15;
// 表示定义一个变量num,指定类型为number;
let str:string = 'abc';
// 表示定义一个变量str,指定类型为string;

联合类型

变量名可以指定个类型

变量名:类型 | 类型2

var id :string | number
id = '1';
id = 10;

任意类型

变量名可以指定任意类型

变量明:any

var s :any = '1'
s = true;
s = 10;

数组类型定义

简单 地方式

类型+方括号

let arr:number[] = [1,2,3,4,5] // 数组里面必须是数字类型
let arrstr:string[] = ['a','b','c'] // 数组里面必须是字符串类型
let arrall:any[] = [{id:1},[2,3],true,2,'a'] // 数组里面任意类型

泛型 T表示变量 任何类型

泛型(Generics) 是指在定义函数,接口或类的时候,不预先指定具体的类型,而在使用的时候在指定类型的一种特性

let arr:Array<number> = [1,2,3,4,5]
let arr:Array<number | string> = [1,2,3,4,5,'a','b']

对象类型定义

接口(Interfaces)可以用于对[对象的形状(Shape)]进行描述

语法:interface I接口名 {属性名:类型} 定义的对象使用let 对象名:I接口名 = {对象受到接口的约束}

interface I接口名{属性名?:类型} 属性名后面添加?代表对象的属性名可有可无

[变量名:string]:any; 任意属性

interface IPerson {
    name?:string; // 可选属性
    age:number;
    sex:string;
    [propName:string]:any; // 任意属性
}
let tom:IPerson= { // 对象受到接口的约束
    name:'tom',
    age:18,
    sex:'man'
}

函数类型定义

输入类型 输出类型

//         输入类型            输出类型(返回值是数字类型如果没有返回值设置void)
function f(x:number,y:number):number{
    return x+y
}
f(1,3)
// 			输入类型 		输出类型(返回值值是一个数组所以使用数组类型定义)
function f(x:number,y:number):number[]{
    return [x,y]
}
f(1,3)
//      函数泛型的使用
function f<T>(x:T,y:T):T[]{
        return [x,y]
    }
f<string | number>(1,'2')