TS（就是JS的超集）是静态类型 是弱类型（允许隐式转化）
下载Ts编译器：npm i -g typescript
查看Ts：tsc
使用编译器将Ts文件编译成为js文件使用：tsc 文件名.ts
指定路径输出：tsc --outFile ./路径/index.js index.ts
1、给变量、函数参数、函数返回值确定类型、未来给变量、函数参数、函数返回值赋值必须是同一类型的值。
let a :number = 7||let a =7;
a='n' //报错 变量类型错误
function sum(num1:number,num2:number):number{ //函数是控制输入参数啥类型 输出结构啥类型
return num1+num2
}
sum(123,'456') //报错 函数参数类型错误
let fun :(a:number,b?:number=1)=>number //必选参数要在可选参数之后 参数可以给定默认值
fun = function(n1,n2){
return n1+n2
}
function alertName():void{
alert('my name is tom')
}
定义变量的时候没有赋值则该变量被判断为any
2、TS新增类型
| 类型 | 例子 | 描述 |
|---|---|---|
| 字面量 | 其本身 | 限制变量的值就是该字面量的值 |
| any | * | 任意类型，相当于关闭TS的类型检测,能够直接赋值给其他类型的变量(尽量少用) |
| unknown | * | 未知类型，不能直接赋值给其他类型的变量 要赋值先进行类型判断(尽量多用) |
| void | undefined | 没有值或者undefined(函数没有返回值) |
| never | 没有值 | 不能是任何值 |
| tuple | [x,y] | 元组就是固定长度的数组 |
| enum | enum{x,y} | 枚举 |
*字面量
let a :10; //限制c的值只能为10 类似常量的作用
a=11; //报错
let d :Number|String //限制d的类型为数字和字符串
d=10
d='10'
d=true //报错
*unknown 该类型的变量必须赋已知类型
let u:unknown
let s :String
if(typeof s === "string"){
u = s
}
/*
类型断言:用来告诉解析器变量的实际类型
*/
u = s as String
u =<String>s
*void 用来表示空 表示没有返回值的函数
function fn():void{
return;||return undefined||return null
}
*never 永远不会有返回结果 就为了报错 报错就没有返回值
function fn2():never{
throw new Error('报错了！')
}
*object 给对象属性设置类型以及是否必需
let obj : { name: string, age?: Number } //?表示该属性是可选的
obj = { name: '猪八戒',age:23}
let person :{[propName:string]:string} //表示该对象可以有任意个属性 属性值限制为字符串类型
person={hight:177,weight:65,name:'张三'}
*array 给数组元素限制类型
let arr :string[] || let arr:Array<string>
arr =['1','2',3] //报错 将number类型的3作为字符串数组中的元素
*tuple
let tup:[string,string]
tup=['x','y',z] //报错 超过元组设置的最大长度
*enum 列出所有可能性
enum Gender{
Male,
FeMale
}
let i:{name:string,gender:Gender}
i={
name:'心野',
gender:Gender.Male
}
3、类型别名（将复杂的类型名取别名 简化类型的使用）
type myType = 1 | 2 | 3 | 4 | 5
let k :myType
type s = string
let str :s
4、编译选项
#tsc 编译当前目录下所有ts文件 前提要在tsconfig.json中配置
#tsc -w 监视当前目录下所有ts文件变化,同步更新js文件
#tsc 文件名.ts -w 监视ts文件变化,同步更新js文件
tsconfig.json配置
{
/*
include:指定需要被编译的目录
exclude:指定不需要被编译的目录
extend:继承配置
files:指定需要被编译的文件的列表
compilerOptions:编译器的选项
路径：**表示任意目录
*表示任意文件
*/
"include": [
"./src/**/*"
],
"exclude": [
"./src/haha/**/*"
],
"compilerOptions": {
"strict": false, //是否开启所有严格检查
"target": "ES6", //指定编译结果的ES版本,默认ES3
"module": "ES6", //指定编译结果的模块化规范
"lib": ["ES6","DOM"], //指定TS文件用到的库
"outDir": "./dist", //指定编译后文件存放目录
"outFile": "./dist/app.js", //指定所有文件合并编译后输出的文件(module是amd或system的情况)
"allowJs": false, //是否编译并存放include目录下的js文件
"checkJs": false, //是否以ts标准去检查编译目录下的js文件
"removeComments": false, //编译过程是否移除注释
"noEmit": false, //编译后是否生成js文件
"noEmitOnError": true, //编译过程有错误就不生成js文件
"alwaysStrict": false, //是否对编译后的js文件使用严格模式
"noImplicitAny": true, //ts文件中的隐式any会报错提醒
"noImplicitThis": true, //ts文件中的不明确this会报错提醒
"strictNullChecks": true, //严格检查ts文件中可能的空值
}
}
5、Ts的面向对象
普通属性|方法使用对象实例访问
static静态属性|方法使用类访问
readonly 属性只读不能修改
class Person {
name: string = '张三'
readonly age: number = 23
static address: string = '厦门'
static readonly hobit:string = '干饭'
static fn(){
console.log('你好啊');
}
}
let person = new Person()
console.log(person.name)
person.age = 24 //设置只读 报错
console.log(Person.address)
Person.hobit ='敲代码' //报错
console.log(Person.fn);
构造函数
class Person {
name: string
age: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
}
const man1 = new Person('张三',23)
const man2 = new Person('李四',24)
抽象类(专门给其他类继承的类）,其中的抽象方法在实例化中必须被重写 使用abstract修饰符
接口只定义对象的结构不考虑实际值，在接口中所有的方法都是抽象方法
定义类时，可以使类实现一个接口，即一个类中必须要有接口所定义的东西 接口即是对类的限制
interface myinterface{
name:string;
age?:number; //问号表示可选
[propName:string]:any; //其他属性
}
interface myinterface{
gender:string
}
const obj:myinterface={
name:'张三',
age:23,
gender:'男'
}
class Obj implements myinterface {
name: string
age: number
gender: string
constructor(name: string, age: number, gender: string) {
this.name = name
this.age = age
this.gender = gender
}
}
//通过接口定义函数的形状
interface inter{
(num1:number,num2:number):boolean
}
let myinter = inter
myinter=function(num1:number,num2:number){
return num1>num2?true:false
}
privite修饰符：防止敏感属性被随意修改 可以通过get方法暴露使外部可以获取属性，通过set方法用来设置属性（加判断实现控制）
public修饰符：后代类可以随意访问祖先类
protect修饰符：只能当前类和当前类的子类中使用属性
class Person {
// private age: number
constructor(age: number) {
this.age = age
}
get age(){
return this.age
}
set age(val:number){ 对set方法加条件，使得外部更改必须符合条件
if(val>=0){
this.age =val
}
}
}
const p = new Person(23)
p.age=22
泛型
在定义i函数或者类时，如果遇见类型不明确就可以使用泛型（尽量避免使用any）
function fn<T>(a:T):T{ //使用<>
return a
}
fn(10); //ts自动判断类型
fn<string>('张三') //人为设置泛型类型
interface inter{ //泛型继承接口必须实现其属性和方法
length:number;
}
function fn2<T extends inter>(a:T):number{
return a.length;
}