TypeScript 是什么
-
TypeScript简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。 -
在 JS 基础之上，为 JS 添加了类型支持。TypeScript =
Type+ JavaScript -
TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行
TypeScript和JS的对比
-
ts完全兼容javascript，它可以编译成javascript
-
使用TS会有强大的代码类型提示
-
提升了代码的可维护性，使得重构代码更容易
-
支持最新的 ECMAScript 语法
TypeScript使用
第一步?安装包：
npm i -g typescript用来编译 TS 代码的包??
tsc –v(查看 typescript 的版本)第二步?创建ts文件?例如 hello.ts 文件??
第三步 在终端中输入命令?tsc hello.ts 生成js代码
第四步 执行 JS 代码?
ts-node 简化运行 TS 使用的步骤
npm i -g ts-node //提供了ts-node命令可以让你在ts文件中直接运 行 如?ts-node hello.ts
ts-node报错问题
解决
-
tsc --init生成配置文件 tsconfig.json -
写代码时，用{}包起来
TS类型注解
格式
let 变量名: 类型 = 初始值
示例代码:
let age: number = 18
说明：代码中的 : number 就是类型注解
作用：为变量添加类型约束**。
类型别名
格式
type 别名 = 类型
目的?
-
给类型起别名
-
定义了新类型
type s = string // 定义
const str1:s = 'abc'
const str2:string = 'abc'别名可以是任意的合法字符串，一般首字母大写
TS的类型
原始类型
-
原始类型：number/string/boolean/null/undefined/symbol
-
特点：简单，这些类型，完全按照 JS 中类型的名称来书写
// 数值类型
let age: number = 18
// 字符串类型
let myName: string = '小花'
// 布尔类型
let isLoading: boolean = false
// undefined
let un: undefined = undefined
// null
let timer:null = null
联合类型
定义一个变量 可以是null类型 也可以是number类型
格式
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
3 数组类型
格式
let 变量: 类型[] = [值1，...]
let 变量: Array<类型> = [值1，...]
?示例
// 写法一：
let numbers: number[] = [1, 3, 5] // numbers必须是数组，每个元素都必须是数字
// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] // strings必须是数组，每个元素都必须是字符串数组类型结合联合类型使用
let arr: (number | string) [] = ['1', 1]函数的类型
格式
// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 { }
// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => { }如?
// 函数声明
function add(num1: number, num2: number): number {
return num1 + num2
}
// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
return num1 + num2
}
add（1,'1') // 报错函数类型别名
把拥有相同形参和实参的函数当做一个整体，来定义? 如
type Fn = (n1:number,n2:number) =>number
const add1 : Fn = (a,b)=>{return a+b }参数可选设置
当参数不确定是否传参时 用?代替
格式?
const add =(num1:number,num2?:number):void{ }?不确定参数放在确定参数列表的最后?
参数默认值设置
当不传参时 默认传值
格式?
const add=(num1:number=0,num2:number=10){ }注意可选不能与默认值一起使用
函数返回值
void 类型
如果函数没有返回值，那么，函数返回值类型为：void
使用void一般有三种情况
-
不写return
-
写return ，但是后面不接内容
-
写return undefined
?注意不要设置返回值类型为undefined?
对象类型
格式
const 对象名: {
属性名1：类型1，
属性名2?：类型2，
方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
方法名2:(形参1: 类型1，形参2: 类型2)=>返回值类型
} = { 属性名1: 值1，属性名2：值2 }对象类型别名
// 创建类型别名
type Person = {
name: string，
age: number
sayHi(): void
}
// 使用类型别名作为对象的类型：
let person: Person = {
name: '小花',
age: 18
sayHi() {}
}
function f1 (p: Persion) :void {
}对象类型-接口
有俩种方法用来描述对象类型别名
-
类型别名， Type
-
接口, interface
interface格式
?接口名 推荐大写 i?开头?
interface 接口名 {
属性1: 类型1, 属性2: 类型2,
}interface 只能为对象指定类型,可以实现别名继承
type 可以为任意类型指定别名
推荐：能使用 type 就是用 type
接口继承
interface IPoint2D { x: number; y: number }
interface IPoint3D { x: number; y: number; z: number }俩个接口都有相同的属性 实现继承 方法与格式
interface 接口2 extends 接口1 {
属性1： 类型1， // 接口2中特有的类型
...
}
interface IPoint2D extends IPoint3D{
属性1: 类型1 //接口2中国特有类型
}元组
元组是另一种特殊的数组：
-
它确切地包含多少个元素
-
特定索引对应的类型
let position: [number, number] = [1, 2]解释：
-
元组类型可以确切地标记出有多少个元素，以及每个元素的类型
-
该示例中，元素有两个元素，每个元素的类型都是 number
?当你使用时便会自动提示 如下图
字面量类型
任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用
如?
?看起来会有点怪
相对于const 简写为 const str = 'aaaa'
字面量的作用
它一般和联合类型一起使用? 用来表示一组明确的可选值列表
?下一篇为大家带来typescript的高阶使用