1.ts环境配置
//安装命令
yarn add typescript --dev
//配置初始化
yarn tsc --init
//编译
yarn tsc
2.配置文件常用配置
target:转化为js时的标准
module：使用的模块规范
sourceMap：是否生成map.js文件
outDir：输出目录
rootDir:编译目录
strict：是否开启严格模式
lib:所使用的标准库，注释掉为默认标准库，dom和bom标准库和一为dom
3.标准类型
- js的六种基本类型加void
- symbol在转换模式为es5时会报错
const a:string='foo'
const b:number=3
const c:boolean = true
const d:void = undefined
const e:null = null
const f:undefined = undefined
const h:symbol= Symbol()
4.对象类型
- 直接设置object类型代表处理原始类型以外的所有类型
const foo:object=function(){} //不会报错
const obj:{foo:number,bar:string} = {foo:5,bar:'sss'} //这种方式里面的对象键值必须和设置的一样，不能多也不能少
5.数组类型
const g:Array<number>=[0,1,2] // 数组里面元素类型只能是同一种类型
const i:number[] = [5,6,7]
const h:Array<number|string>=[0,1,'sss'] //用|可以设置数组里面元素是多种类型
6.元组类型
const tump:[number,string]=[2,'dd'] //元组里面的数据类型必须和设置的一一对应
const tump:[number,string]=['dd',2] //顺序不一样也会报错
7.枚举类型
- 枚举类型可以通过值获取键 （置入双向键值对）
- 常量枚举不可通过值获取键 （在enum前加const）
enum postStatus{
draft=6,
ahah=3
}
const enum constPostStatus{
draft=6,
ahah=3
}
8.函数类型
函数声明方式定义
function fun1(a:number,b:number):string{
return '只能返回string'
}
fun1(2,2) //参数的个数和类型都必须与设置的一致
//可选参数
//1.冒号前加一个问号
//2.设置参数默认值
function fun2(a?:number,b:number=3):string{
return '只能返回string'
}
//任意个数参数使用..rest
function fun1(a:number,b:number,...rest:number):string{
return '只能返回string'
}
函数表达式方式
const fun3:(a: number, b: number) => string = function(a:number,b:number):string{
return '只能返回string'
}
9.任意类型
function stringfy(value:any){
return JSON.stringify(value)
}
10.隐式类型推断
只在声明时根据赋的值进行推断，如果只声明为赋值会推断为any类型
11.类型断言
const num = [1,2,3]
const res = num.find(i=>i>0)
// const square = res as square 因为ts不确定res是数字所以会报错
const square = res as number * (res as number)
//另一种方式是使用尖括号：
<number>res //jsx语法中无法使用
12.接口
interface Post{
title:string
content:string
subtitle?:string //可选成员
readonly summary:string //只读成员
}
function pointPost(post:Post){
console.log(post.title)
console.log(post.content)
}
pointPost({
title:'接口的作用是用来约束对象中的成员的',
content:'使用interface关键词定义接口，里面的参数可以用逗号分割，也可以用分号，分号可省略',
summary:'设置后不可修改'
})
let testPost:Post = {
title:'接口的作用是用来约束对象中的成员的',
content:'使用interface关键词定义接口，里面的参数可以用逗号分割，也可以用分号，分号可省略'，
summary:'设置后不可修改'
}
//动态成员
interface Cache{
[prop:string]:string
}
const cache:Cache={}
cache.poo='poo'
13.类
和es6中类的一些区别
- 构造函数中的参数必须先定义并在定义时或者构造函数中赋值
- 多了三个修饰符 ——public:共有属性，private:私有属性，protected:保护属性
- 只读属性：readonly
class Person{
public name:string
private age:number //私有修饰符，只能在类的内部访问
protected readonly gender:boolean //保护修饰符，只能在类的内部和子类中访问
constructor(name:string,age:number){
this.name=name
this.age=age
this.gender=true
}
}
const tom =new Person('tom',18)
class Student extends Person {
//构造器上设置私有属性private，就不能在外部被new生成实例和继承了。
//设置成保护属性protected,不能new可以继承
private constructor(name:string,age:number){
super(name,age)
console.log(this.gender) //子类中可以访问父类的保护类型
}
//static是代表静态方法
static create(name:string,age:number){
return new Student(name,age)
}
}
const jack =Student.create('jack',18)
在类中表明实现了哪种接口的方式
使用implements关键字
interface Eat{
eat(food:string):void
}
interface Run{
run(distance:string):void
}
class Animal implements Eat,Run{
eat(food:string){
console.log(food)
}
run(dd:string){
console.log(dd)
}
}
抽象类
在class关键字前加一个abstract 关键字，抽象类只能被继承不可创建实例，在自己抽象类内部new也是不允许的
abstract class Person{
public name:string
private age:number //私有修饰符，只能在类的内部访问
protected gender:boolean //保护修饰符，只能在类的内部和子类中访问
constructor(name:string,age:number){
this.name=name
this.age=age
this.gender=true
}
static create(name:string,age:number){
return new Person(name,age) //报错
}
}
const tom =new Person('tom',18) //报错
14.泛型和类型声明
泛型:使用尖括号在函数名后定义泛型，解决函数参数不确定类型的情况，在调用函数时用简括含传参
function Tname<T>(name:T) {
console.log(name)
}
Tname<string>(666) //报错
Tname<string>('haha')
类型声明
使用declare声明未定义类型的函数
import {camelCase} from 'lodash'
declare function camelCase(input:string) {
}
